/* ==========================================================================
   LANDS OF ZEMLYA — Tema rústico com temas elementais rotativos (v3)
   Madeira, ferro forjado, bordado eslavo e pergaminho.
   ========================================================================== */

/* ----- Fontes (hospedadas no próprio site, licença OFL) ----- */
@font-face { font-family: 'Macondo'; src: url('../fonts/Macondo.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Runic';   src: url('../fonts/NotoSansRunic.woff') format('woff'); font-display: swap; }

:root {
	/* Madeira */
	--w-1: #1a110a;
	--w-2: #2a1b10;
	--w-3: #3d2817;
	--w-4: #5a3b20;
	/* Ferro */
	--iron: #2e2a28;
	--iron-hi: #6b645d;
	--iron-dk: #0c0a09;
	/* Metais e tintas */
	--brass: #c9a24a;
	--brass-hi: #ecd08a;
	--brass-dk: #7d6125;
	--blood: #8e1c1c;
	--blood-hi: #b8322b;
	--ember: #d9732b;
	--frost: #8fb8c9;
	/* Texto */
	--bone: #eadfc4;
	--ash: #a89880;
	--ink: #2b1c0d;
	--ink-soft: #5e4528;
	--parch: #e6d6b0;

	--f-display: 'Macondo', Georgia, serif;
	--f-title: 'Macondo', Georgia, serif;
	--f-label: 'Macondo', Georgia, serif;
	--f-body: 'Macondo', Georgia, serif;
	--f-rune: 'Runic', serif;
	--max: 1240px;

	--emb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='16' shape-rendering='crispEdges'%3E%3Crect width='48' height='16' fill='%23dccca8'/%3E%3Cpath d='M0 8L8 0L16 8L8 16Z M32 8L40 0L48 8L40 16Z' fill='%238e1c1c'/%3E%3Cpath d='M4 8L8 4L12 8L8 12Z M36 8L40 4L44 8L40 12Z' fill='%23dccca8'/%3E%3Cpath d='M7 7h2v2h-2z M39 7h2v2h-2z' fill='%23151012'/%3E%3Cpath d='M16 8L24 2L32 8L24 14Z' fill='%23151012'/%3E%3Cpath d='M20 8L24 5L28 8L24 11Z' fill='%238e1c1c'/%3E%3Crect width='48' height='1.5' fill='%23151012'/%3E%3Crect y='14.5' width='48' height='1.5' fill='%23151012'/%3E%3C/svg%3E");
	--knot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='20' viewBox='0 0 120 20'%3E%3Cg fill='none' stroke='%23c9a24a' stroke-width='1.6'%3E%3Cpath d='M0 10H44'/%3E%3Cpath d='M76 10H120'/%3E%3Cpath d='M48 10l6-6 6 6-6 6z M60 10l6-6 6 6-6 6z'/%3E%3Ccircle cx='60' cy='10' r='2' fill='%23c9a24a'/%3E%3Cpath d='M44 10h4 M72 10h4'/%3E%3C/g%3E%3C/svg%3E");
	--nail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Ccircle cx='7' cy='7' r='5.5' fill='%233a3633' stroke='%230c0a09' stroke-width='1.2'/%3E%3Ccircle cx='5.6' cy='5.6' r='2' fill='%238a837b'/%3E%3C/svg%3E");
	--c-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg %3E%3Cpath d='M2 2h40v11H13v29H2z' fill='%232e2a28' stroke='%230c0a09' stroke-width='2'/%3E%3Cpath d='M4 4h36v3H7v33H4z' fill='%235e5852'/%3E%3Ccircle cx='8.5' cy='8.5' r='3.2' fill='%238a837b' stroke='%230c0a09'/%3E%3Ccircle cx='31' cy='8' r='2.6' fill='%238a837b' stroke='%230c0a09'/%3E%3Ccircle cx='8' cy='31' r='2.6' fill='%238a837b' stroke='%230c0a09'/%3E%3C/g%3E%3C/svg%3E");
	--c-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg transform='translate(44 0) scale(-1 1)'%3E%3Cpath d='M2 2h40v11H13v29H2z' fill='%232e2a28' stroke='%230c0a09' stroke-width='2'/%3E%3Cpath d='M4 4h36v3H7v33H4z' fill='%235e5852'/%3E%3Ccircle cx='8.5' cy='8.5' r='3.2' fill='%238a837b' stroke='%230c0a09'/%3E%3Ccircle cx='31' cy='8' r='2.6' fill='%238a837b' stroke='%230c0a09'/%3E%3Ccircle cx='8' cy='31' r='2.6' fill='%238a837b' stroke='%230c0a09'/%3E%3C/g%3E%3C/svg%3E");
	--c-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg transform='translate(0 44) scale(1 -1)'%3E%3Cpath d='M2 2h40v11H13v29H2z' fill='%232e2a28' stroke='%230c0a09' stroke-width='2'/%3E%3Cpath d='M4 4h36v3H7v33H4z' fill='%235e5852'/%3E%3Ccircle cx='8.5' cy='8.5' r='3.2' fill='%238a837b' stroke='%230c0a09'/%3E%3Ccircle cx='31' cy='8' r='2.6' fill='%238a837b' stroke='%230c0a09'/%3E%3Ccircle cx='8' cy='31' r='2.6' fill='%238a837b' stroke='%230c0a09'/%3E%3C/g%3E%3C/svg%3E");
	--c-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg transform='translate(44 44) scale(-1 -1)'%3E%3Cpath d='M2 2h40v11H13v29H2z' fill='%232e2a28' stroke='%230c0a09' stroke-width='2'/%3E%3Cpath d='M4 4h36v3H7v33H4z' fill='%235e5852'/%3E%3Ccircle cx='8.5' cy='8.5' r='3.2' fill='%238a837b' stroke='%230c0a09'/%3E%3Ccircle cx='31' cy='8' r='2.6' fill='%238a837b' stroke='%230c0a09'/%3E%3Ccircle cx='8' cy='31' r='2.6' fill='%238a837b' stroke='%230c0a09'/%3E%3C/g%3E%3C/svg%3E");
	--rivets: radial-gradient(circle at 50% 50%, #8a837b 0 1.6px, #3a3633 2.4px, #0c0a09 3.2px, transparent 3.6px);

	/* Compatibilidade com páginas antigas */
	--primary: var(--w-2);
	--secondary: var(--w-1);
	--border: var(--iron-dk);
	--font-color: var(--bone);
	--anchor: var(--brass);
	--anchor-hover: var(--brass-hi);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
	margin: 0;
	color: var(--bone);
	font-family: var(--f-body);
	font-size: 17px;
	line-height: 1.6;
	background: var(--bg-base);
	-webkit-font-smoothing: antialiased;
	transition: background-color .8s;
}
/* Fundo do tema (fixo) + partículas */
.z-bg { position: fixed; inset: 0; z-index: -2; background: var(--bg-base) var(--bg-img) center / cover no-repeat; }
.z-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, transparent 20%, rgba(0,0,0,.35) 80%), linear-gradient(rgba(0,0,0,.12), rgba(0,0,0,.42)); }
#zFx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

a { color: var(--brass); text-decoration: none; transition: color .15s, text-shadow .15s; }
a:hover { color: var(--brass-hi); text-shadow: 0 0 10px rgba(var(--brass-rgb),.35); }

h1, h2, h3, h4 {
	font-family: var(--f-title);
	font-weight: 400;
	color: var(--bone);
	letter-spacing: .02em;
	line-height: 1.15;
	margin: 0 0 .55em;
	text-shadow: 0 2px 0 rgba(0,0,0,.7);
}
h1 { font-size: 2.3rem; }
h2 { font-size: 1.9rem; }
h3 { font-size: 1.4rem; }

p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; }
li { list-style: none; }
img { max-width: 100%; }
hr, .bighr { border: 0; height: 20px; background: var(--knot) center / 120px 20px no-repeat; margin: 1.4em 0; position: relative; }
hr::before, .bighr::before { content: ''; position: absolute; top: 9px; left: 0; right: calc(50% + 64px); height: 1px; background: linear-gradient(90deg, transparent, var(--brass-dk)); }
hr::after, .bighr::after { content: ''; position: absolute; top: 9px; right: 0; left: calc(50% + 64px); height: 1px; background: linear-gradient(270deg, transparent, var(--brass-dk)); }
::selection { background: var(--blood); color: var(--bone); }

.pull-left  { float: left; }
.pull-right { float: right; }
.preventCollapse { overflow: hidden; }
.centralizeContent { text-align: center; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.relative, div.relative { position: relative; }
.z-runes { font-family: var(--f-rune); letter-spacing: .5em; color: var(--brass-dk); user-select: none; }

/* Faixa de bordado eslavo */
.z-embroidery { height: 16px; background: var(--emb) 0 0 / 48px 16px repeat-x; box-shadow: 0 2px 6px rgba(0,0,0,.6); }

/* Moldura de ferro nos cantos (aplicada em painéis) */
.z-iron-corners {
	background-image: var(--c-tl), var(--c-tr), var(--c-bl), var(--c-br);
	background-position: top left, top right, bottom left, bottom right;
	background-repeat: no-repeat;
	background-size: 44px 44px;
}

/* --------------------------------------------------------------------------
   Barra superior — viga de madeira com cintas de ferro
   -------------------------------------------------------------------------- */
.z-topbar {
	position: sticky;
	top: 0;
	z-index: 1000;
	background:
		linear-gradient(180deg, rgba(255,210,150,.06), rgba(0,0,0,.35)),
		var(--tx-beam) 0 50% / 2048px 100% repeat-x;
	border-top: 4px solid var(--iron);
	border-bottom: 4px solid var(--iron);
	box-shadow: 0 1px 0 var(--iron-dk), 0 -1px 0 var(--iron-dk) inset, 0 8px 22px rgba(0,0,0,.75);
}
.z-topbar::before, .z-topbar::after {
	content: '';
	position: absolute;
	left: 0; right: 0;
	height: 8px;
	background: var(--rivets) 0 50% / 64px 8px repeat-x;
	pointer-events: none;
}
.z-topbar::before { top: -6px; }
.z-topbar::after  { bottom: -6px; }

.z-topbar-inner {
	max-width: var(--max);
	margin: 0 auto;
	padding: 0 20px;
	height: 70px;
	display: flex;
	align-items: center;
	gap: 26px;
}
.z-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.z-brand img {
	width: 48px; height: 48px;
	image-rendering: pixelated;
	border: 2px solid var(--iron-dk);
	box-shadow: 0 0 0 2px var(--brass-dk), 0 4px 10px rgba(0,0,0,.7);
}
.z-brand span {
	font-family: var(--f-display);
	font-size: 1.05rem;
	color: var(--bone);
	line-height: 1;
	letter-spacing: .04em;
	text-shadow: 0 2px 0 #000;
}
.z-brand span small { display: block; font-size: 1.45em; color: var(--brass); margin-top: 2px; }

.z-nav { display: flex; align-items: center; flex: 1; justify-content: space-between; }
.z-nav > ul { display: flex; align-items: center; gap: 2px; }
.z-nav li { position: relative; }
.z-nav > ul > li > a {
	display: flex;
	align-items: center;
	gap: 7px;
	height: 70px;
	padding: 0 13px;
	font-family: var(--f-label);
	font-weight: 700;
	font-size: 1.02rem;
	letter-spacing: .05em;
	color: #e9d9b8;
	text-shadow: 0 1px 0 #000, 0 -1px 0 rgba(255,220,160,.12);
	position: relative;
}
.z-nav > ul > li > a .fa { color: var(--brass-dk); transition: color .15s; }
.z-nav > ul > li > a::after {
	content: 'ᛟ';
	font-family: var(--f-rune);
	position: absolute;
	left: 50%;
	bottom: 6px;
	transform: translateX(-50%) scale(.6);
	color: var(--ember);
	opacity: 0;
	transition: opacity .15s, transform .15s;
	text-shadow: 0 0 8px var(--ember);
}
.z-nav > ul > li:hover > a,
.z-nav > ul > li > a.active { color: var(--brass-hi); }
.z-nav > ul > li:hover > a .fa,
.z-nav > ul > li > a.active .fa { color: var(--brass); }
.z-nav > ul > li:hover > a::after,
.z-nav > ul > li > a.active::after { opacity: 1; transform: translateX(-50%) scale(1); }
.z-nav .z-caret { font-size: .6rem !important; opacity: .7; }

/* Dropdown — tábua escura pregada */
.z-nav li > ul {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	min-width: 230px;
	padding: 10px 0;
	background: linear-gradient(rgba(10,6,3,.55), rgba(10,6,3,.75)), var(--tx-plank) 0 0 / 512px;
	border: 3px solid var(--iron);
	outline: 1px solid var(--iron-dk);
	box-shadow: 0 14px 30px rgba(0,0,0,.8);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .15s, transform .15s, visibility .15s;
}
.z-nav li:hover > ul,
.z-nav li:focus-within > ul { opacity: 1; visibility: visible; transform: none; }
.z-nav li > ul a {
	display: block;
	padding: 7px 20px;
	color: var(--bone);
	font-family: var(--f-label);
	font-size: .98rem;
	border-left: 3px solid transparent;
}
.z-nav li > ul a:hover { background: rgba(var(--brass-rgb),.08); border-left-color: var(--ember); color: var(--brass-hi); }

.z-nav-right { gap: 10px !important; }
.z-lang {
	display: inline-flex;
	border: 2px solid var(--iron);
	background: rgba(0,0,0,.4);
	font-family: var(--f-label);
	font-weight: 700;
	font-size: .8rem;
}
.z-lang button { background: none; border: 0; color: var(--ash); padding: 5px 9px; cursor: pointer; font: inherit; }
.z-lang button.active { background: var(--blood); color: var(--bone); }

.z-nav > ul.z-nav-right > li > a.z-btn-nav,
.z-btn-nav {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: auto;
	padding: 7px 14px;
	font-family: var(--f-label);
	font-weight: 700;
	font-size: .95rem;
	letter-spacing: .04em;
	white-space: nowrap;
	color: var(--bone);
	background: rgba(0,0,0,.35);
	border: 2px solid var(--iron);
	box-shadow: inset 0 0 0 1px rgba(var(--brass-rgb),.25);
}
.z-nav > ul.z-nav-right > li > a.z-btn-nav::after { display: none; }
.z-btn-nav:hover { color: var(--brass-hi); box-shadow: inset 0 0 0 1px var(--brass-dk); }
.z-nav > ul.z-nav-right > li > a.z-btn-nav.primary,
.z-btn-nav.primary {
	background: linear-gradient(180deg, var(--blood-hi), var(--blood) 60%, #5a0f0f);
	border-color: var(--iron-dk);
	box-shadow: inset 0 0 0 1px var(--brass-dk), 0 2px 0 #000;
	color: var(--bone);
}
.z-btn-nav.primary:hover { filter: brightness(1.12); color: #fff; }
.z-btn-nav .fa { color: inherit !important; }

.z-burger {
	display: none;
	margin-left: auto;
	background: rgba(0,0,0,.35);
	border: 2px solid var(--iron);
	color: var(--brass);
	width: 44px; height: 44px;
	font-size: 1.2rem;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   Faixa panorâmica em loop
   -------------------------------------------------------------------------- */
.z-faixa {
	--faixa-h: 170px;
	--faixa-r: 8.5714;   /* proporção largura/altura da arte (o PHP calcula) */
	--faixa-w: calc(var(--faixa-h) * var(--faixa-r));
	--faixa-t: 140s;
	position: relative;
	height: var(--faixa-h);
	overflow: hidden;
	background: #07050a;
	border-bottom: 4px solid var(--iron);
	box-shadow: 0 1px 0 var(--iron-dk);
}
.z-faixa-track {
	position: absolute;
	top: 0; bottom: 0; left: 0;
	width: calc(var(--faixa-w) * 3);
	background-size: var(--faixa-w) 100%;
	background-repeat: repeat-x;
	animation: z-faixa-loop var(--faixa-t) linear infinite;
	will-change: transform;
}
.z-faixa.dir-direita .z-faixa-track { animation-direction: reverse; }
@keyframes z-faixa-loop {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(calc(var(--faixa-w) * -1), 0, 0); }
}
.z-faixa::before {      /* vinheta + escurecimento embaixo */
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(0,0,0,.7), transparent 14%, transparent 86%, rgba(0,0,0,.7)),
		linear-gradient(180deg, rgba(0,0,0,.35), transparent 30%, transparent 60%, rgba(0,0,0,.75));
}
.z-faixa-content {
	position: relative;
	z-index: 2;
	height: 100%;
	max-width: var(--max);
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* Home: logo e título sobre a faixa */
.z-faixa.is-home .z-faixa-content { flex-direction: column; gap: 6px; }
.z-hero-logo {
	width: 112px; height: 112px;
	image-rendering: pixelated;
	border: 3px solid var(--iron-dk);
	box-shadow: 0 0 0 3px var(--brass-dk), 0 0 40px rgba(var(--ember-rgb),.4), 0 14px 30px rgba(0,0,0,.8);
	animation: z-float 6s ease-in-out infinite;
}
@keyframes z-float { 50% { transform: translateY(-5px); } }
.z-hero-title {
	font-family: var(--f-display);
	font-size: clamp(2rem, 5vw, 3.4rem);
	color: var(--bone);
	margin: 10px 0 0;
	letter-spacing: .04em;
	text-shadow: 0 3px 0 #000, 0 0 24px rgba(0,0,0,.9), 0 0 40px rgba(var(--ember-rgb),.25);
}
.z-hero-tagline {
	font-family: var(--f-label);
	font-size: 1.05rem;
	letter-spacing: .2em;
	color: var(--brass-hi);
	text-shadow: 0 2px 4px #000;
}
.z-hero-tagline .z-runes { letter-spacing: .3em; color: var(--brass); margin: 0 10px; }

/* Placa de madeira pendurada com o nome da página (páginas internas) */
.z-sign-wrap { position: relative; z-index: 3; display: flex; justify-content: center; margin-top: -46px; }
.z-sign {
	position: relative;
	padding: 14px 46px 12px;
	background:
		linear-gradient(180deg, rgba(255,220,170,.08), rgba(0,0,0,.35)),
		var(--tx-beam) center / 600px 100%;
	border: 3px solid var(--iron-dk);
	box-shadow: inset 0 0 0 2px rgba(var(--brass-rgb),.25), inset 0 0 18px rgba(0,0,0,.6), 0 12px 24px rgba(0,0,0,.8);
	text-align: center;
}
.z-sign::before, .z-sign::after {   /* pregos */
	content: '';
	position: absolute;
	top: 50%;
	width: 14px; height: 14px;
	margin-top: -7px;
	background: var(--nail) center / contain no-repeat;
}
.z-sign::before { left: 14px; }
.z-sign::after  { right: 14px; }
.z-sign small {
	display: block;
	font-family: var(--f-label);
	font-size: .78rem;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--brass);
}
.z-sign h1 {
	margin: 0;
	font-size: 2rem;
	color: #f4e6c6;
	text-shadow: 0 2px 0 #000, 0 -1px 0 rgba(255,220,170,.15);
}

/* --------------------------------------------------------------------------
   Faixa de status — tábua com cravos
   -------------------------------------------------------------------------- */
.z-status { max-width: var(--max); margin: 22px auto 0; padding: 0 20px; }
.z-faixa.is-home + .z-embroidery + .z-status { margin-top: 22px; }
.z-status-inner {
	display: flex;
	flex-wrap: wrap;
	background: linear-gradient(rgba(10,6,3,.35), rgba(10,6,3,.55)), var(--tx-plank) 0 0 / 512px;
	border: 3px solid var(--iron);
	outline: 1px solid var(--iron-dk);
	box-shadow: 0 10px 24px rgba(0,0,0,.6);
	position: relative;
}
.z-stat {
	flex: 1 1 160px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 20px;
	border-right: 2px solid rgba(0,0,0,.55);
	box-shadow: 1px 0 0 rgba(255,220,170,.06);
	color: var(--bone);
}
.z-stat:last-child { border-right: 0; box-shadow: none; }
.z-stat .fa {
	width: 38px; height: 38px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: radial-gradient(circle at 40% 35%, #4a4440, #1c1917);
	border: 2px solid var(--iron-dk);
	box-shadow: 0 0 0 1px var(--brass-dk);
	color: var(--brass-hi);
}
.z-stat b { display: block; font-family: var(--f-title); font-weight: 400; font-size: 1.45rem; line-height: 1; color: var(--bone); text-shadow: 0 2px 0 #000; }
.z-stat span { font-family: var(--f-label); font-size: .8rem; color: var(--ash); letter-spacing: .06em; }
a.z-stat:hover b { color: var(--brass-hi); }
.z-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; background: var(--blood-hi); box-shadow: 0 0 8px var(--blood-hi); }
.z-dot.on { background: #7ed37a; box-shadow: 0 0 8px #7ed37a; animation: z-blink 2s infinite; }
@keyframes z-blink { 50% { opacity: .45; } }

/* --------------------------------------------------------------------------
   Estrutura principal
   -------------------------------------------------------------------------- */
.main { max-width: var(--max); margin: 0 auto; padding: 28px 20px 0; }
.feedContainer { display: grid; grid-template-columns: minmax(0, 1fr) 318px; gap: 28px; align-items: start; }
.leftPane, .rightPane { float: none !important; width: auto !important; min-width: 0; }

/* Painel principal: tábua escura, moldura de ferro com cantoneiras */
.leftPane {
	position: relative;
	padding: 34px 36px;
	min-height: 420px;
	background-color: #1b120b;
	background-image:
		var(--c-tl), var(--c-tr), var(--c-bl), var(--c-br),
		linear-gradient(rgba(16,10,5,.80), rgba(16,10,5,.88)),
		var(--tx-plank);
	background-position: top left, top right, bottom left, bottom right, 0 0, 0 0;
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
	background-size: 44px, 44px, 44px, 44px, 100% 100%, 512px;
	border: 4px solid var(--iron);
	outline: 1px solid var(--iron-dk);
	box-shadow: inset 0 0 40px rgba(0,0,0,.7), 0 14px 34px rgba(0,0,0,.7);
}
.leftPane > h1:first-child, .leftPane > h2:first-child { margin-top: 0; }
.leftPane > h1, .leftPane > h2 {
	padding-bottom: 14px;
	margin-bottom: 18px;
	background: var(--knot) left bottom / 120px 20px no-repeat;
	padding-bottom: 26px;
}

.rightPane { display: flex; flex-direction: column; gap: 22px; }
.topPane { grid-column: 1 / -1; }
#countDownTimer { color: var(--brass-hi); }

/* Widgets — placas de madeira penduradas */
.well { width: auto; }
.rightPane .well, .z-card {
	position: relative;
	background: linear-gradient(rgba(16,10,5,.78), rgba(16,10,5,.86)), var(--tx-plank) 0 0 / 512px;
	border: 3px solid var(--iron);
	outline: 1px solid var(--iron-dk);
	box-shadow: 0 10px 22px rgba(0,0,0,.65);
}
.rightPane .well > .header, .z-card > .header {
	position: relative;
	margin: -3px -3px 0;
	padding: 11px 34px 10px;
	text-align: center;
	background:
		linear-gradient(180deg, rgba(255,220,170,.1), rgba(0,0,0,.3)),
		var(--tx-beam) center / 520px 100%;
	border: 3px solid var(--iron-dk);
	border-bottom-width: 3px;
	box-shadow: inset 0 0 0 1px rgba(var(--brass-rgb),.22), 0 4px 8px rgba(0,0,0,.5);
	font-family: var(--f-label);
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: .06em;
	color: #f1e2c0;
	text-shadow: 0 2px 0 #000;
}
.rightPane .well > .header::before, .rightPane .well > .header::after,
.z-card > .header::before, .z-card > .header::after {
	content: '';
	position: absolute;
	top: 50%;
	width: 12px; height: 12px;
	margin-top: -6px;
	background: var(--nail) center / contain no-repeat;
}
.rightPane .well > .header::before, .z-card > .header::before { left: 10px; }
.rightPane .well > .header::after,  .z-card > .header::after  { right: 10px; }
.rightPane .well > .body, .z-card > .body { padding: 16px 16px 14px; }
.rightPane .well > .body ul li { padding: 5px 0; border-bottom: 1px solid rgba(0,0,0,.5); box-shadow: 0 1px 0 rgba(255,220,170,.04); }
.rightPane .well > .body ul li:last-child { border-bottom: 0; box-shadow: none; }
.rightPane table { background: none; padding: 0; margin: 0; border: 0; }
.rightPane td { padding: 6px 4px; }
.rightPane tr + tr td { border-top: 1px solid rgba(0,0,0,.5); }
.rightPane select, .rightPane input[type="text"], .rightPane input[type="password"] { width: 100%; }
.rightPane input[type="submit"] { width: 100%; margin-top: 10px; }
.rightPane center h3 { margin: 14px 0 2px; font-size: 1.25rem; }
.rightPane center p { font-size: .92rem; color: var(--ash); margin: 0; }
.rightPane td.z-rank { width: 30px; text-align: center; font-family: var(--f-title); font-size: 1.2rem; color: var(--ash); }
.rightPane td.z-rank-1 { color: var(--brass-hi); text-shadow: 0 0 8px rgba(var(--brass-rgb),.5); }
.rightPane td.z-rank-2 { color: #cfd2d6; }
.rightPane td.z-rank-3 { color: #d0905a; }
.rightPane td.z-lvl { text-align: right; color: var(--ash); font-family: var(--f-label); font-size: .9rem; white-space: nowrap; }
.z-srv { font-family: var(--f-title); font-size: 1.4rem; text-align: center; padding: 2px 0 8px; }
.z-srv.on { color: #9ad893; }
.z-srv.off { color: #e07b70; }
.vote_widget p { font-size: .92rem; color: var(--ash); margin-bottom: 4px; }

.loginForm { display: block; }
.loginForm .well, .rightPane .loginForm .well { margin-bottom: 10px; background: none; border: 0; outline: 0; box-shadow: none; }
.loginForm label { display: block; font-family: var(--f-label); font-size: .9rem; color: var(--ash); margin-bottom: 3px; }
.loginForm input { width: 100%; }

ul.linkbuttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0; margin: 0; }
ul.linkbuttons li { border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0; width: auto; float: none; }
ul.linkbuttons li a {
	display: block;
	padding: 7px 6px;
	text-align: center;
	font-family: var(--f-label);
	font-size: .92rem;
	color: var(--bone);
	background: rgba(0,0,0,.35);
	border: 2px solid var(--iron);
	box-shadow: inset 0 0 0 1px rgba(var(--brass-rgb),.15);
}
ul.linkbuttons li a:hover { color: var(--brass-hi); box-shadow: inset 0 0 0 1px var(--brass-dk); }

.search_widget form { display: block; }
.search_widget label { display: none; }
.search_widget input { width: 100% !important; float: none !important; }
.search_widget .body { position: relative; }
.search_widget #name_suggestion {
	display: none;
	position: absolute;
	top: 46px; left: 0; right: 0;
	width: auto;
	z-index: 50;
	background: #140d07;
	border: 2px solid var(--iron);
	box-shadow: 0 12px 24px rgba(0,0,0,.8);
}
.search_widget #name_suggestion.show { display: block; }
.search_widget .sname { text-align: left; }
.search_widget .sname a { display: block; padding: 7px 12px; background: none; border-bottom: 1px solid rgba(0,0,0,.6); }
.search_widget .sname a:hover { background: rgba(var(--brass-rgb),.08); }

/* --------------------------------------------------------------------------
   Formulários e botões
   -------------------------------------------------------------------------- */
input, select, textarea {
	font-family: var(--f-body);
	font-size: 1rem;
	color: var(--bone);
	background: #0d0805;
	border: 2px solid var(--iron);
	border-radius: 0;
	box-shadow: inset 0 2px 6px rgba(0,0,0,.8);
	padding: 8px 11px;
	height: auto;
	transition: border-color .15s, box-shadow .15s;
}
input::placeholder { color: #6e604e; font-style: italic; }
input:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--brass-dk);
	box-shadow: inset 0 2px 6px rgba(0,0,0,.8), 0 0 0 2px rgba(var(--brass-rgb),.25);
}
input[type="checkbox"], input[type="radio"] { width: auto; padding: 0; box-shadow: none; accent-color: var(--blood); }
select { cursor: pointer; }
textarea { width: 100%; min-height: 120px; }

/* Botão padrão: madeira com ferragem e letras douradas */
input[type="submit"], button[type="submit"], .z-btn, .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 9px 22px;
	font-family: var(--f-label);
	font-weight: 700;
	font-size: 1.02rem;
	letter-spacing: .05em;
	color: #f3e3bf;
	text-shadow: 0 2px 0 #000;
	background:
		linear-gradient(180deg, rgba(255,220,170,.12), rgba(0,0,0,.35)),
		var(--tx-beam) center / 520px 100%;
	border: 2px solid var(--iron-dk);
	border-radius: 0;
	box-shadow: inset 0 0 0 1px rgba(var(--brass-rgb),.35), 0 3px 0 #000, 0 6px 12px rgba(0,0,0,.5);
	cursor: pointer;
	text-decoration: none;
	transition: filter .15s, transform .08s, box-shadow .15s;
}
input[type="submit"]:hover, button[type="submit"]:hover, .z-btn:hover, .btn:hover {
	filter: brightness(1.15);
	color: var(--brass-hi);
	box-shadow: inset 0 0 0 1px var(--brass), 0 3px 0 #000, 0 0 16px rgba(var(--ember-rgb),.3);
}
input[type="submit"]:active, .z-btn:active, .btn:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px var(--brass-dk), 0 1px 0 #000; }

/* Variante vermelha (estandarte) */
.z-btn.blood, .btn-danger, .btn-primary {
	background: linear-gradient(180deg, var(--blood-hi), var(--blood) 55%, #4f0d0d);
	border-color: var(--iron-dk);
	box-shadow: inset 0 0 0 1px var(--brass-dk), inset 0 0 0 3px rgba(0,0,0,.25), 0 3px 0 #000, 0 6px 14px rgba(0,0,0,.6);
}
.z-btn.ghost { background: rgba(0,0,0,.45); }
.btn-success { background: linear-gradient(180deg, #4d7a3c, #34562a 60%, #1f3519); }
.btn-warning { background: linear-gradient(180deg, #b98432, #8a5f1f 60%, #573a10); }
.btn-info    { background: linear-gradient(180deg, #4d7488, #34525f 60%, #1f333b); }

/* --------------------------------------------------------------------------
   Tabelas
   -------------------------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; background: none; margin-bottom: 1.4em; font-size: 1rem; }
.leftPane table { border: 3px solid var(--iron); outline: 1px solid var(--iron-dk); box-shadow: 0 6px 16px rgba(0,0,0,.5); }
td, th { padding: 9px 12px; text-align: left; vertical-align: middle; }
th, tr.yellow td, tr.yellow th, .table thead th {
	background: linear-gradient(180deg, rgba(255,220,170,.08), rgba(0,0,0,.35)), var(--tx-beam) center / 520px 100%;
	color: #f1e2c0;
	font-family: var(--f-label);
	font-weight: 700;
	font-size: .98rem;
	letter-spacing: .04em;
	text-shadow: 0 2px 0 #000;
	border-bottom: 3px solid var(--iron-dk);
}
tr.yellow a { color: var(--brass-hi); }
.leftPane tr { border-bottom: 1px solid rgba(0,0,0,.6); }
.leftPane tr:last-child { border-bottom: 0; }
.leftPane tr:not(.yellow) td { background: rgba(20,12,6,.55); }
.leftPane tr:nth-child(2n):not(.yellow) td { background: rgba(40,26,14,.55); }
.leftPane tr:not(.yellow):hover td { background: rgba(142,28,28,.18); }

.page_highscores .leftPane tr:not(.yellow):nth-of-type(2) td:first-child { color: var(--brass-hi); font-family: var(--f-title); font-size: 1.3rem; }
.page_highscores .leftPane tr:not(.yellow):nth-of-type(3) td:first-child { color: #cfd2d6; font-family: var(--f-title); font-size: 1.2rem; }
.page_highscores .leftPane tr:not(.yellow):nth-of-type(4) td:first-child { color: #d0905a; font-family: var(--f-title); font-size: 1.15rem; }

/* --------------------------------------------------------------------------
   Notícias — pergaminhos pregados no quadro de madeira
   -------------------------------------------------------------------------- */
.z-news-title {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 22px !important;
	padding: 0 !important;
	background: none !important;
	font-size: 2rem;
}
.z-news-title .line { flex: 1; height: 20px; background: var(--knot) right center / 120px 20px no-repeat, linear-gradient(var(--brass-dk), var(--brass-dk)) left center / calc(100% - 124px) 1px no-repeat; }

.z-news { display: flex; flex-direction: column; gap: 34px; padding: 6px 4px 10px; }
.z-scroll {
	position: relative;
	background: var(--parch) url('../img/pergaminho.jpg') center / 512px repeat;
	color: var(--ink);
	padding: 30px 34px 26px;
	box-shadow: inset 0 0 50px rgba(110,62,18,.45), inset 0 0 4px rgba(70,35,8,.5), 0 12px 24px rgba(0,0,0,.7);
	font-family: var(--f-body);
	font-size: 1.07rem;
	line-height: 1.7;
	transform: rotate(-.4deg);
	/* bordas irregulares, como papel rasgado */
	clip-path: polygon(0% 1%, 4% 0%, 12% .8%, 22% 0%, 35% .6%, 48% 0%, 60% .9%, 73% .1%, 85% .8%, 96% 0%, 100% 1.2%,
		99.6% 20%, 100% 42%, 99.5% 63%, 100% 84%, 99.4% 99%, 90% 100%, 78% 99.2%, 64% 100%, 50% 99.3%, 37% 100%, 24% 99.1%, 11% 100%, 2% 99.3%, 0% 98%,
		.5% 78%, 0% 57%, .6% 36%, 0% 16%);
}
.z-news .z-scroll:nth-child(even) { transform: rotate(.35deg); }
.z-scroll-pin { position: relative; }
.z-scroll-pin::before {   /* prego de ferro */
	content: '';
	position: absolute;
	z-index: 3;
	top: -9px; left: 50%;
	width: 18px; height: 18px;
	margin-left: -9px;
	background: var(--nail) center / contain no-repeat;
	filter: drop-shadow(0 2px 2px rgba(0,0,0,.7));
}
.z-scroll-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
	border-bottom: 1px solid rgba(90,60,30,.4);
	padding-bottom: 8px;
	margin-bottom: 12px;
}
.z-scroll-head h3 { margin: 0; font-size: 1.75rem; color: #2a1806; text-shadow: none; }
.z-scroll-head h3 a { color: inherit; }
.z-scroll-head h3 a:hover { color: var(--blood); text-shadow: none; }
.z-scroll-meta { font-family: var(--f-label); font-size: .9rem; color: var(--ink-soft); }
.z-scroll-meta a { color: var(--blood); font-weight: 700; }
.z-scroll a { color: var(--blood); }
.z-scroll a:hover { color: #5a0f0f; text-shadow: none; }
.z-scroll p:last-child { margin-bottom: 0; }
.z-scroll-body::first-letter {  /* capitular */
	float: left;
	font-family: var(--f-title);
	font-size: 3.4em;
	line-height: .8;
	padding: 6px 8px 0 0;
	color: var(--blood);
}
.z-seal {
	position: absolute;
	right: 26px; bottom: 14px;
	width: 50px; height: 50px;
	border-radius: 46% 54% 50% 50%;
	background: radial-gradient(circle at 35% 30%, #c2413a, #8e1c1c 55%, #4f0a0a);
	box-shadow: 0 3px 6px rgba(0,0,0,.5), inset 0 -3px 6px rgba(0,0,0,.4), inset 0 2px 3px rgba(255,255,255,.2);
	display: grid; place-items: center;
	color: rgba(255,210,190,.7);
	font-family: var(--f-rune);
	font-size: 1.4rem;
	transform: rotate(-12deg);
}
.z-scroll-body { padding-right: 40px; }

.z-pager { display: flex; justify-content: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.z-pager a, .z-pager span {
	min-width: 38px;
	padding: 5px 10px;
	text-align: center;
	font-family: var(--f-label);
	font-weight: 700;
	border: 2px solid var(--iron);
	background: rgba(0,0,0,.4);
	color: var(--bone);
}
.z-pager span.current { background: var(--blood); color: var(--bone); }
.z-pager a:hover { color: var(--brass-hi); }

#changelogTable td:first-child { white-space: nowrap; color: var(--ash); width: 1%; font-family: var(--f-label); }
.youtube .aspectratio { position: relative; padding-top: 56.25%; }
.youtube iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* --------------------------------------------------------------------------
   Alertas
   -------------------------------------------------------------------------- */
.alert-box {
	max-width: 560px;
	margin: 0 auto 16px;
	padding: 10px 16px;
	border: 2px solid var(--iron);
	border-left: 6px solid var(--brass-dk);
	background: rgba(0,0,0,.45);
	color: var(--bone);
	font-size: 1rem;
	text-align: left;
}
.alert-info    { border-left-color: var(--frost); }
.alert-success { border-left-color: #6aa55c; }
.alert-warning { border-left-color: var(--ember); }
.alert-danger  { border-left-color: var(--blood-hi); background: rgba(142,28,28,.15); }
.alert-collapse { display: inline-block; }

/* --------------------------------------------------------------------------
   Páginas específicas
   -------------------------------------------------------------------------- */
.page_characterprofile #characterProfileTable thead th:first-of-type { position: relative; width: 28%; }
.page_characterprofile #characterProfileTable thead th:last-of-type { text-align: left; padding-left: 16px; }
.page_characterprofile .outfit { position: absolute; top: 0; left: 0; }
.page_characterprofile .flag { position: absolute; top: 16px; right: 16px; }
.postHolder iframe { display: block; margin: auto; }
.page-pergaminho { background: var(--parch) url('../img/pergaminho.jpg') center / 512px repeat !important; }

/* --------------------------------------------------------------------------
   Rodapé
   -------------------------------------------------------------------------- */
.z-footer {
	margin-top: 64px;
	background: linear-gradient(rgba(8,5,3,.72), rgba(8,5,3,.9)), var(--tx-plank) 0 0 / 512px;
	border-top: 4px solid var(--iron);
	position: relative;
}
.z-footer > .z-embroidery { position: relative; top: -2px; }
.z-footer-inner {
	max-width: var(--max);
	margin: 0 auto;
	padding: 36px 20px 22px;
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 30px;
}
.z-footer h4 { font-family: var(--f-label); font-weight: 700; font-size: 1.05rem; color: var(--brass); margin-bottom: 10px; }
.z-footer li { padding: 2px 0; }
.z-footer a { color: var(--ash); }
.z-footer a:hover { color: var(--brass-hi); }
.z-footer .z-brand { margin-bottom: 12px; }
.z-footer p { color: var(--ash); font-size: .98rem; }
.z-social { display: flex; gap: 10px; }
.z-social a {
	width: 40px; height: 40px;
	display: grid; place-items: center;
	background: rgba(0,0,0,.45);
	border: 2px solid var(--iron);
	color: var(--brass);
	font-size: 1.15rem;
}
.z-social a:hover { color: var(--brass-hi); border-color: var(--brass-dk); }
.z-social svg { width: 20px; height: 20px; fill: currentColor; }
.z-footer-runes { text-align: center; padding: 8px 0 4px; font-size: 1.1rem; opacity: .7; }
.z-footer-bottom {
	max-width: var(--max);
	margin: 0 auto;
	padding: 12px 20px 26px;
	display: flex;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	font-size: .85rem;
	color: #7d6f5e;
	border-top: 1px solid rgba(0,0,0,.6);
	box-shadow: 0 -1px 0 rgba(255,220,170,.04);
}
.z-footer-bottom a { color: #9a8a74; }

/* --------------------------------------------------------------------------
   Modal pergaminho
   -------------------------------------------------------------------------- */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 9999; backdrop-filter: blur(4px); }
.modal-pergaminho {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%) !important;
	width: 92%; max-width: 640px; max-height: 85vh; overflow-y: auto;
}
.modal-pergaminho h2 { color: #2a1806; text-shadow: none; text-align: center; border-bottom: 1px solid rgba(90,60,30,.4); padding-bottom: 10px; }
.modal-close { position: absolute; top: 8px; right: 16px; font-size: 30px; font-weight: 700; color: #5a3c1e; z-index: 3; }
.modal-close:hover { color: var(--blood); }

@media (prefers-reduced-motion: reduce) {
	.z-faixa-track, .z-hero-logo, #zIntro * { animation: none !important; transition: none !important; }
}

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
	.feedContainer { grid-template-columns: 1fr; }
	.rightPane { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
	.z-footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
	.z-burger { display: block; }
	.z-topbar-inner { height: 62px; gap: 12px; }
	.z-brand img { width: 42px; height: 42px; }
	.z-nav {
		display: none;
		position: absolute;
		top: 62px; left: 0; right: 0;
		max-height: calc(100vh - 62px);
		overflow-y: auto;
		flex-direction: column;
		align-items: stretch;
		background: linear-gradient(rgba(10,6,3,.6), rgba(10,6,3,.8)), var(--tx-plank) 0 0 / 512px;
		border-bottom: 4px solid var(--iron);
		box-shadow: 0 14px 30px rgba(0,0,0,.8);
		padding: 6px 0 16px;
	}
	.z-topbar.open .z-nav { display: flex; }
	.z-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
	.z-nav > ul > li > a { height: auto; padding: 13px 20px; border-bottom: 1px solid rgba(0,0,0,.6); }
	.z-nav > ul > li > a::after { display: none; }
	.z-nav li > ul { position: static; opacity: 1; visibility: visible; transform: none; display: none; box-shadow: none; border: 0; outline: 0; background: rgba(0,0,0,.35); }
	.z-nav li.open > ul { display: block; }
	.z-nav li > ul a { padding: 9px 36px; }
	.z-nav-right { flex-direction: row !important; flex-wrap: wrap; justify-content: center; padding: 14px 20px 0; }
	.z-faixa { --faixa-h: 260px !important; }
	.z-hero-logo { width: 84px; height: 84px; }
	.z-stat { flex-basis: 50%; border-bottom: 2px solid rgba(0,0,0,.5); }
	.leftPane { padding: 26px 18px; }
	.z-sign { padding: 12px 34px 10px; }
	.z-sign h1 { font-size: 1.6rem; }
}
@media (max-width: 600px) {
	body { font-size: 16px; }
	.leftPane table { display: block; overflow-x: auto; white-space: nowrap; }
	.z-scroll { padding: 24px 20px 22px; }
	.z-scroll-body { padding-right: 0; }
	.z-seal { width: 40px; height: 40px; right: 14px; bottom: 10px; }
	.rightPane { grid-template-columns: 1fr; }
	.z-footer-inner { grid-template-columns: 1fr; }
	#zIntro .zi-logo { width: 110px; height: 110px; }
}

/* Ajustes v2 */
.z-home-ctas { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin: -26px auto 0; position: relative; z-index: 3; padding: 0 20px; }
.z-home-ctas .z-btn { padding: 12px 28px; font-size: 1.1rem; }
.z-scroll-pin { filter: drop-shadow(0 12px 16px rgba(0,0,0,.7)); }
.z-news .z-scroll-pin:nth-child(even) .z-scroll { transform: rotate(.35deg); }

/* ==========================================================================
   TEMAS ELEMENTAIS — cada um acompanha um logotipo
   ========================================================================== */
@property --brass    { syntax: '<color>'; inherits: true; initial-value: #c9a24a; }
@property --brass-hi { syntax: '<color>'; inherits: true; initial-value: #ecd08a; }
@property --brass-dk { syntax: '<color>'; inherits: true; initial-value: #7d6125; }
@property --ember    { syntax: '<color>'; inherits: true; initial-value: #d9732b; }
@property --blood    { syntax: '<color>'; inherits: true; initial-value: #8e1c1c; }
@property --blood-hi { syntax: '<color>'; inherits: true; initial-value: #b8322b; }
@property --bone     { syntax: '<color>'; inherits: true; initial-value: #eadfc4; }
@property --ash      { syntax: '<color>'; inherits: true; initial-value: #a89880; }
@property --bg-base  { syntax: '<color>'; inherits: true; initial-value: #0d0906; }

html { transition: --brass .9s, --brass-hi .9s, --brass-dk .9s, --ember .9s, --blood .9s, --blood-hi .9s, --bone .9s, --ash .9s, --bg-base .9s; }

/* Natureza — carvalho, musgo e sol dourado */
html[data-theme="natureza"], html:not([data-theme]) {
	--brass: #d9b44a; --brass-hi: #f3dc8a; --brass-dk: #7c6524; --brass-rgb: 217,180,74;
	--ember: #a6d84a; --ember-rgb: 166,216,74;
	--blood: #3f6e22; --blood-hi: #5a9431;
	--bone: #efe5c8; --ash: #aaa086;
	--bg-base: #0a0f07;
	--bg-img: url('../img/temas/fundo-natureza.jpg');
	--tx-plank: url('../img/temas/madeira-natureza.jpg');
	--tx-beam: url('../img/temas/viga-natureza.jpg');
	--faixa-tint: rgba(90,150,40,.18);
	--glow: rgba(190,230,90,.55);
}
/* Oceano — madeira à deriva, abismo azul */
html[data-theme="oceano"] {
	--brass: #4fc6d8; --brass-hi: #a6f0f7; --brass-dk: #22707e; --brass-rgb: 79,198,216;
	--ember: #5ad1e6; --ember-rgb: 90,209,230;
	--blood: #155a74; --blood-hi: #1f7f9e;
	--bone: #e3f1f1; --ash: #8fb0b4;
	--bg-base: #030d16;
	--bg-img: url('../img/temas/fundo-oceano.jpg');
	--tx-plank: url('../img/temas/madeira-oceano.jpg');
	--tx-beam: url('../img/temas/viga-oceano.jpg');
	--faixa-tint: rgba(20,110,170,.38);
	--glow: rgba(90,220,240,.55);
}
/* Fogo — carvão em brasa, lava */
html[data-theme="fogo"] {
	--brass: #f09a3a; --brass-hi: #ffd27a; --brass-dk: #8a4a14; --brass-rgb: 240,154,58;
	--ember: #ff6a1a; --ember-rgb: 255,106,26;
	--blood: #a3221a; --blood-hi: #cf3a22;
	--bone: #f5e4cc; --ash: #b39a86;
	--bg-base: #0d0504;
	--bg-img: url('../img/temas/fundo-fogo.jpg');
	--tx-plank: url('../img/temas/madeira-fogo.jpg');
	--tx-beam: url('../img/temas/viga-fogo.jpg');
	--faixa-tint: rgba(200,60,10,.35);
	--glow: rgba(255,120,30,.6);
}
/* Espíritos — freixo escuro, crepúsculo e luzes ciano */
html[data-theme="espiritos"] {
	--brass: #9fe7ea; --brass-hi: #e0fbff; --brass-dk: #4d7f9a; --brass-rgb: 159,231,234;
	--ember: #6fe3ff; --ember-rgb: 111,227,255;
	--blood: #4b3a8c; --blood-hi: #6a54c0;
	--bone: #ece9f5; --ash: #a39cb8;
	--bg-base: #0a0818;
	--bg-img: url('../img/temas/fundo-espiritos.jpg');
	--tx-plank: url('../img/temas/madeira-espiritos.jpg');
	--tx-beam: url('../img/temas/viga-espiritos.jpg');
	--faixa-tint: rgba(80,60,170,.3);
	--glow: rgba(120,230,255,.55);
}

/* Gelo — madeira congelada, neve caindo */
html[data-theme="gelo"] {
	--brass: #bfe6ff; --brass-hi: #ffffff; --brass-dk: #5b88a8; --brass-rgb: 191,230,255;
	--ember: #9fdcff; --ember-rgb: 159,220,255;
	--blood: #2d5f8a; --blood-hi: #3f7fb5;
	--bone: #eef6fc; --ash: #a5b8c6;
	--bg-base: #07111d;
	--bg-img: url('../img/temas/fundo-gelo.jpg');
	--tx-plank: url('../img/temas/madeira-gelo.jpg');
	--tx-beam: url('../img/temas/viga-gelo.jpg');
	--faixa-tint: rgba(120,180,230,.35);
	--glow: rgba(190,235,255,.6);
}

/* Conteúdo acima das partículas */
.main, .z-footer, .z-status, .z-sign-wrap, .z-home-ctas { position: relative; z-index: 1; }

/* Faixa recebe a cor do tema */
.z-faixa::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--faixa-tint); mix-blend-mode: color; transition: background .9s; }

/* --------------------------------------------------------------------------
   LOGO OFICIAL FLUTUANTE NO CENTRO DO CABEÇALHO
   -------------------------------------------------------------------------- */
.z-faixa-content { z-index: 3; }
.z-logo-float {
	position: relative;
	height: calc(var(--faixa-h) - 30px);
	max-width: 92vw;
	aspect-ratio: 900 / 627;
	display: grid;
	place-items: center;
	animation: z-float 6s ease-in-out infinite;
	view-transition-name: z-logo;
}
.z-logo-float img {
	grid-area: 1 / 1;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 0 18px var(--glow)) drop-shadow(0 12px 18px rgba(0,0,0,.75));
	transition: filter .9s;
}
.z-logo-float::before {   /* halo pulsante do elemento */
	content: '';
	position: absolute;
	inset: 18% 8%;
	border-radius: 50%;
	background: radial-gradient(ellipse, var(--glow), transparent 70%);
	filter: blur(18px);
	opacity: .55;
	animation: z-halo 4s ease-in-out infinite;
	z-index: -1;
}
@keyframes z-halo { 50% { opacity: .9; transform: scale(1.06); } }
@keyframes z-float { 0%,100% { transform: translateY(0) rotate(-.4deg); } 50% { transform: translateY(-8px) rotate(.4deg); } }

/* Morph do logo quando o tema muda (sem View Transitions) */
.z-logo-float img.z-old { animation: z-logo-out 1.1s ease forwards; }
.z-logo-float img.z-new { animation: z-logo-in 1.1s ease both; }
@keyframes z-logo-out { to { opacity: 0; filter: blur(10px) brightness(2) drop-shadow(0 0 30px var(--glow)); transform: scale(1.08); } }
@keyframes z-logo-in  { from { opacity: 0; filter: blur(12px) brightness(2.2); transform: scale(.92); } }

/* View Transitions: o site inteiro "se transforma" a partir do logo */
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: z-vt-reveal 1.1s cubic-bezier(.6,.05,.3,1) both; }
@keyframes z-vt-reveal {
	from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 20%)); }
	to   { clip-path: circle(150vmax at var(--vt-x, 50%) var(--vt-y, 20%)); }
}
::view-transition-old(z-logo) { animation: z-logo-out .9s ease both; }
::view-transition-new(z-logo) { animation: z-logo-in .9s ease .15s both; }

/* Ícone pequeno (pixel) em botões */
.z-px-icon { width: 22px; height: 22px; image-rendering: pixelated; vertical-align: -5px; border: 1px solid rgba(0,0,0,.6); }

/* Seletor manual de tema (rodapé) */
.z-theme-pick { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.z-theme-pick button {
	width: 34px; height: 34px;
	border: 2px solid var(--iron);
	cursor: pointer;
	background: #000 center / cover;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
	padding: 0;
}
.z-theme-pick button[aria-pressed="true"] { outline: 2px solid var(--brass); outline-offset: 2px; }
.z-theme-pick [data-pick="natureza"]  { background-color: #3f6e22; }
.z-theme-pick [data-pick="oceano"]    { background-color: #155a74; }
.z-theme-pick [data-pick="fogo"]      { background-color: #a3221a; }
.z-theme-pick [data-pick="espiritos"] { background-color: #4b3a8c; }
.z-theme-pick [data-pick="gelo"]      { background-color: #2d5f8a; }
.z-theme-pick button::after { font-family: var(--f-rune); color: #fff; font-size: 1rem; }
.z-theme-pick [data-pick="natureza"]::after  { content: 'ᛒ'; }
.z-theme-pick [data-pick="oceano"]::after    { content: 'ᛚ'; }
.z-theme-pick [data-pick="fogo"]::after      { content: 'ᚲ'; }
.z-theme-pick [data-pick="espiritos"]::after { content: 'ᚨ'; }
.z-theme-pick [data-pick="gelo"]::after      { content: 'ᛁ'; }

/* Ajuste: títulos com Macondo ficam melhores sem caixa-alta forçada */
.z-sign small, .z-hero-tagline { text-transform: none; letter-spacing: .12em; }
.z-hero-tagline { margin-top: -6px; }

/* ==========================================================================
   INTRO — MORDIDA COM A PRÓPRIA ARTE DO DRAGÃO
   ========================================================================== */
#zIntro { display: none; }
html.z-intro-on, html.z-intro-on body { overflow: hidden; }
html.z-intro-on #zIntro { display: block; position: fixed; inset: 0; z-index: 20000; background: #000; overflow: hidden; color: var(--bone); contain: strict; }
/* enquanto a intro roda, o site por trás fica parado (mais FPS) */
html.z-intro-on #zFx { display: none; }
html.z-intro-on .z-faixa-track, html.z-intro-on .z-logo-float, html.z-intro-on .z-logo-float::before,
html.z-intro-on .rightPane > .well::before, html.z-intro-on .z-status::before, html.z-intro-on .z-sign-holder::before, html.z-intro-on .z-footer::before { animation-play-state: paused; }

/* "Rig": caixa com a proporção da arte, cobrindo a tela */
#zIntro .zi-rig {
	position: absolute;
	left: 50%; top: 50%;
	width: max(100vw, calc(100vh * 1.8333));
	aspect-ratio: 2816 / 1536;
	transform: translate(-50%, -55.5%) scale(1.02);
	transform-origin: 50.5% 55.5%;
	transition: transform 1s cubic-bezier(.45,0,.7,.2);
	will-change: transform;
	backface-visibility: hidden;
}
#zIntro .zi-layer { position: absolute; inset: 0; background: url('../img/temas/dragao-fogo.jpg') center / 100% 100% no-repeat; }
#zIntro .zi-jaw {
	-webkit-mask-size: 100% 100%; mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	will-change: transform;
	backface-visibility: hidden;
	transition: transform .5s cubic-bezier(.3,0,.2,1);
}
#zIntro .zi-jaw.top    { -webkit-mask-image: url('../img/jaw-top-mask.png');    mask-image: url('../img/jaw-top-mask.png'); }
#zIntro .zi-jaw.bottom { -webkit-mask-image: none; mask-image: none; }
#zIntro.p-shut .zi-jaw.bottom, #zIntro.p-open .zi-jaw.bottom { -webkit-mask-image: url('../img/jaw-bottom-mask.png'); mask-image: url('../img/jaw-bottom-mask.png'); }
#zIntro .zi-dark { position: absolute; inset: 0; z-index: 1; background: #000; opacity: .74; transition: opacity 1s ease; pointer-events: none; }
#zIntro .zi-eye {
	position: absolute; top: 24.2%; width: 4.6%; aspect-ratio: 1.7; border-radius: 50%;
	background: radial-gradient(ellipse, var(--zi-eye1, rgba(255,225,130,1)), var(--zi-eye2, rgba(255,140,30,.6)) 38%, transparent 70%);
	opacity: .5;
	animation: zi-eyes 3.2s ease-in-out infinite;
}
#zIntro .zi-eye.l { left: 42.9%; }
#zIntro .zi-eye.r { left: 54.1%; }
@keyframes zi-eyes { 50% { opacity: .9; } }
#zIntro .zi-seam {   /* brilho entre as mandíbulas fechadas */
	position: absolute; left: 30%; right: 30%; top: 55.5%; height: 3%; margin-top: -1.5%;
	background: radial-gradient(ellipse at center, var(--zi-eye1, rgba(255,214,120,1)), var(--zi-eye2, rgba(240,120,30,.8)) 40%, transparent 72%);
	opacity: 0;
}
#zIntro canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
#zIntro .zi-vignette { position: absolute; inset: 0; z-index: 2; background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,.9) 100%); pointer-events: none; }
#zIntro .zi-flash { position: absolute; inset: 0; z-index: 6; background: var(--zi-flash, #ffb060); opacity: 0; pointer-events: none; }

#zIntro .zi-center {
	position: absolute; inset: 0; z-index: 5;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 10px; text-align: center; padding: 20px;
	transition: transform .2s cubic-bezier(.6,0,1,.4), opacity .2s, filter .2s;
}
#zIntro .zi-logo { width: min(560px, 86vw); filter: drop-shadow(0 0 22px var(--glow)); animation: z-float 5s ease-in-out infinite; will-change: transform; }
#zIntro .zi-sub { font-family: var(--f-label); font-size: 1.15rem; letter-spacing: .14em; color: var(--brass-hi); text-shadow: 0 2px 4px #000; }
#zIntro .zi-btn { margin-top: 10px; font-size: 1.35rem; padding: 13px 40px; }
#zIntro .zi-btn[disabled] { filter: grayscale(.6) brightness(.7); cursor: wait; }
#zIntro .zi-ctrl {
	position: absolute; bottom: 20px; z-index: 7;
	font-family: var(--f-label); font-size: 1rem; color: var(--ash);
	background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.12);
	padding: 6px 14px; cursor: pointer;
}
#zIntro .zi-ctrl:hover { color: var(--brass-hi); }
#zIntro .zi-skip  { right: 22px; }
#zIntro .zi-sound { left: 22px; }

/* Fases */
#zIntro.p-wake .zi-rig { transform: translate(-50%, -55.5%) scale(1.28); }
#zIntro.p-wake .zi-dark { opacity: .04; }
#zIntro.p-wake .zi-jaw.top    { transform: translateY(-2.5%); }   /* abre mais a boca: inspira */
#zIntro.p-wake .zi-jaw.bottom { transform: translateY(3%); }
#zIntro.p-wake .zi-eye { opacity: 1; animation: none; }
#zIntro.p-wake .zi-center { animation: zi-tremble .1s linear infinite; }
#zIntro.p-wake .zi-btn, #zIntro.p-wake .zi-sub { opacity: 0; transition: opacity .2s; }
@keyframes zi-tremble { 25% { translate: -2px 1px; } 50% { translate: 1px -2px; } 75% { translate: 2px 2px; } }

#zIntro.p-bite .zi-rig { transform: translate(-50%, -55.5%) scale(1.85); transition: transform .2s cubic-bezier(.7,0,1,.5); }
#zIntro.p-bite .zi-dark { opacity: 0; transition: opacity .2s; }
#zIntro.p-bite .zi-jaw.top    { transform: translateY(13.6%); transition: transform .17s cubic-bezier(.75,0,1,.55); }
#zIntro.p-bite .zi-jaw.bottom { transform: translateY(-13.2%); transition: transform .17s cubic-bezier(.75,0,1,.55); }
#zIntro.p-bite .zi-center { transform: scale(.55, .02); opacity: 0; }

#zIntro.p-shut .zi-rig { transition: transform 1.2s ease-out; transform: translate(-50%, -55.5%) scale(1.95); }
#zIntro.p-shut .zi-dark { opacity: .4; transition: opacity .9s; }
#zIntro.p-shut .zi-seam { opacity: 1; transition: opacity .5s; animation: zi-seam 1s ease-in-out infinite; }
@keyframes zi-seam { 50% { opacity: .5; } }

html.z-intro-on #zIntro.p-open { background: transparent; transition: none; }
#zIntro.p-open .zi-seam, #zIntro.p-open .zi-vignette, #zIntro.p-open canvas, #zIntro.p-open .zi-eye { opacity: 0; transition: opacity .08s; }
#zIntro.p-open .zi-dark { opacity: .25; transition: opacity .2s; }
#zIntro.p-open .zi-jaw.top    { transform: translateY(-75%); transition: transform 1s cubic-bezier(.4,0,.2,1); }
#zIntro.p-open .zi-jaw.bottom { transform: translateY(75%);  transition: transform 1s cubic-bezier(.4,0,.2,1); }
#zIntro.p-open .zi-ctrl { opacity: 0; }

.zi-shake { animation: zi-shake .5s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes zi-shake {
	10%, 90% { transform: translate(-3px, 2px); }
	20%, 80% { transform: translate(6px, -4px) rotate(.4deg); }
	30%, 50%, 70% { transform: translate(-12px, 7px) rotate(-.7deg); }
	40%, 60% { transform: translate(12px, -7px) rotate(.7deg); }
}
html.z-intro-reveal .z-faixa, html.z-intro-reveal .main, html.z-intro-reveal .z-status { animation: zi-reveal 1.2s cubic-bezier(.2,.7,.2,1) both; }
@keyframes zi-reveal { from { transform: scale(1.06); opacity: .15; } to { transform: none; opacity: 1; } }

@media (max-width: 900px) {
	.z-faixa { --faixa-h: 240px !important; }
}
@media (max-width: 600px) {

}

/* ==========================================================================
   ACABAMENTOS DAS PLACAS POR TEMA (v4)
   Bordas irregulares (máscara) + decorações: musgo/raízes, cracas/algas,
   chamas/brasas, luzes espirituais, neve/pingentes.
   ========================================================================== */
html[data-theme="natureza"], html:not([data-theme]) { --d: natureza; }
html[data-theme="natureza"], html:not([data-theme]) {
	--m-top: url('../img/deco/mask-top-natureza.png'); --m-bot: url('../img/deco/mask-bot-natureza.png');
	--m-left: url('../img/deco/mask-left-natureza.png'); --m-right: url('../img/deco/mask-right-natureza.png');
	--d-top: url('../img/deco/deco-top-natureza.png'); --d-bot: url('../img/deco/deco-bot-natureza.png');
}
html[data-theme="oceano"] {
	--m-top: url('../img/deco/mask-top-oceano.png'); --m-bot: url('../img/deco/mask-bot-oceano.png');
	--m-left: url('../img/deco/mask-left-oceano.png'); --m-right: url('../img/deco/mask-right-oceano.png');
	--d-top: url('../img/deco/deco-top-oceano.png'); --d-bot: url('../img/deco/deco-bot-oceano.png');
}
html[data-theme="fogo"] {
	--m-top: url('../img/deco/mask-top-fogo.png'); --m-bot: url('../img/deco/mask-bot-fogo.png');
	--m-left: url('../img/deco/mask-left-fogo.png'); --m-right: url('../img/deco/mask-right-fogo.png');
	--d-top: url('../img/deco/deco-top-fogo.png'); --d-bot: url('../img/deco/deco-bot-fogo.png');
}
html[data-theme="espiritos"] {
	--m-top: url('../img/deco/mask-top-espiritos.png'); --m-bot: url('../img/deco/mask-bot-espiritos.png');
	--m-left: url('../img/deco/mask-left-espiritos.png'); --m-right: url('../img/deco/mask-right-espiritos.png');
	--d-top: url('../img/deco/deco-top-espiritos.png'); --d-bot: url('../img/deco/deco-bot-espiritos.png');
}
html[data-theme="gelo"] {
	--m-top: url('../img/deco/mask-top-gelo.png'); --m-bot: url('../img/deco/mask-bot-gelo.png');
	--m-left: url('../img/deco/mask-left-gelo.png'); --m-right: url('../img/deco/mask-right-gelo.png');
	--d-top: url('../img/deco/deco-top-gelo.png'); --d-bot: url('../img/deco/deco-bot-gelo.png');
}

/* Bordas irregulares: placas, placa da página, faixa de status e botões */
.rightPane .well > .header, .z-sign, .z-status-inner {
	-webkit-mask:
		var(--m-top) left top / 256px 12px repeat-x,
		var(--m-bot) left bottom / 256px 12px repeat-x,
		var(--m-left) left top / 12px 256px repeat-y,
		var(--m-right) right top / 12px 256px repeat-y,
		linear-gradient(#000 0 0) center / calc(100% - 22px) calc(100% - 22px) no-repeat;
	mask:
		var(--m-top) left top / 256px 12px repeat-x,
		var(--m-bot) left bottom / 256px 12px repeat-x,
		var(--m-left) left top / 12px 256px repeat-y,
		var(--m-right) right top / 12px 256px repeat-y,
		linear-gradient(#000 0 0) center / calc(100% - 22px) calc(100% - 22px) no-repeat;
}
.z-btn, input[type="submit"], button[type="submit"], .btn, .z-nav > ul.z-nav-right > li > a.z-btn-nav, ul.linkbuttons li a, .z-pager a, .z-pager span {
	-webkit-mask:
		var(--m-top) left top / 128px 6px repeat-x,
		var(--m-bot) left bottom / 128px 6px repeat-x,
		var(--m-left) left top / 6px 128px repeat-y,
		var(--m-right) right top / 6px 128px repeat-y,
		linear-gradient(#000 0 0) center / calc(100% - 10px) calc(100% - 10px) no-repeat;
	mask:
		var(--m-top) left top / 128px 6px repeat-x,
		var(--m-bot) left bottom / 128px 6px repeat-x,
		var(--m-left) left top / 6px 128px repeat-y,
		var(--m-right) right top / 6px 128px repeat-y,
		linear-gradient(#000 0 0) center / calc(100% - 10px) calc(100% - 10px) no-repeat;
}

/* Pregos das placas viram camada de fundo (os pseudo-elementos ficam livres p/ decoração) */
.rightPane .well > .header {
	height: 46px;
	padding-top: 0; padding-bottom: 0;
	display: flex; align-items: center; justify-content: center;
	background:
		var(--nail) left 12px center / 12px 12px no-repeat,
		var(--nail) right 12px center / 12px 12px no-repeat,
		linear-gradient(180deg, rgba(255,220,170,.1), rgba(0,0,0,.3)),
		var(--tx-beam) center / 520px 100%;
}
.rightPane .well > .header::before, .rightPane .well > .header::after { display: none; }

/* Decoração em cima e pendurada embaixo das placas */
.rightPane > .well::before, .rightPane > .well::after,
.z-sign-holder::before, .z-sign-holder::after,
.z-status::before, .z-status::after,
.z-footer::before {
	content: '';
	position: absolute;
	z-index: 4;
	pointer-events: none;
	background-repeat: repeat-x;
}
.rightPane > .well::before { left: -3px; right: -3px; top: -17px; height: 28px; background-image: var(--d-top); background-size: 256px 28px; }
.rightPane > .well::after  { left: -3px; right: -3px; top: 31px;  height: 48px; background-image: var(--d-bot); background-size: 256px 48px; }
.rightPane .well > .body { padding-top: 24px; }

.z-sign-holder { position: relative; display: inline-block; }
.z-sign-holder::before { left: 0; right: 0; top: -14px; height: 28px; background-image: var(--d-top); background-size: 256px 28px; background-position: center top; }
.z-sign-holder::after  { left: 0; right: 0; bottom: -36px; height: 48px; background-image: var(--d-bot); background-size: 256px 48px; background-position: center top; }

.z-status { position: relative; }
.z-status::before { left: 20px; right: 20px; top: -14px; height: 28px; background-image: var(--d-top); background-size: 256px 28px; }
.z-status::after  { left: 20px; right: 20px; bottom: -36px; height: 48px; background-image: var(--d-bot); background-size: 256px 48px; }

.z-footer::before { left: 0; right: 0; top: -16px; height: 28px; background-image: var(--d-top); background-size: 256px 28px; z-index: 2; }

/* Viga do topo: decoração pendurada sobre a faixa (pingentes, raízes, algas...) */
.z-topbar-hang {
	position: absolute; left: 0; right: 0; bottom: -46px; height: 48px;
	background: var(--d-bot) left top / 256px 48px repeat-x;
	pointer-events: none; z-index: 2;
}

/* Detalhes animados leves (só opacidade/transform = fluido) */
html[data-theme="fogo"] .rightPane > .well::before,
html[data-theme="fogo"] .z-sign-holder::before,
html[data-theme="fogo"] .z-status::before,
html[data-theme="fogo"] .z-footer::before { animation: z-flicker 1.6s ease-in-out infinite; transform-origin: bottom; }
@keyframes z-flicker { 0%,100% { opacity: .85; transform: scaleY(1); } 30% { opacity: 1; transform: scaleY(1.12); } 60% { opacity: .75; transform: scaleY(.92); } }
html[data-theme="espiritos"] .rightPane > .well::before,
html[data-theme="espiritos"] .z-status::before,
html[data-theme="espiritos"] .rightPane > .well::after { animation: z-spirit 3.5s ease-in-out infinite; }
@keyframes z-spirit { 50% { opacity: .55; } }
html[data-theme="fogo"] .rightPane .well > .header, html[data-theme="fogo"] .z-sign { box-shadow: inset 0 0 14px rgba(255,90,20,.45), inset 0 0 0 2px rgba(0,0,0,.6), 0 10px 22px rgba(0,0,0,.7); }
html[data-theme="gelo"] .rightPane .well > .header, html[data-theme="gelo"] .z-sign { box-shadow: inset 0 0 16px rgba(210,240,255,.35), 0 10px 22px rgba(0,0,0,.6); }
html[data-theme="oceano"] .rightPane .well > .header, html[data-theme="oceano"] .z-sign { box-shadow: inset 0 -8px 14px rgba(20,60,70,.55), 0 10px 22px rgba(0,0,0,.6); }

@media (prefers-reduced-motion: reduce) { .rightPane > .well::before, .rightPane > .well::after, .z-status::before, .z-sign-holder::before, .z-footer::before { animation: none !important; } }

/* Cores da intro por elemento (olhos, brilho entre os dentes, clarão) */
html[data-theme="natureza"] #zIntro { --zi-eye1: rgba(225,255,120,1); --zi-eye2: rgba(120,210,40,.6); --zi-flash: #b8ff6a; }
html[data-theme="oceano"]   #zIntro { --zi-eye1: rgba(170,250,255,1); --zi-eye2: rgba(40,190,230,.6); --zi-flash: #7fe8ff; }
html[data-theme="espiritos"] #zIntro { --zi-eye1: rgba(190,250,255,1); --zi-eye2: rgba(80,210,255,.6); --zi-flash: #a99cff; }
html[data-theme="gelo"]     #zIntro { --zi-eye1: rgba(235,250,255,1); --zi-eye2: rgba(130,200,255,.6); --zi-flash: #e6f6ff; }

/* ==========================================================================
   VIGA RÚNICA (v6) — substitui a faixa bordada abaixo do banner e no rodapé
   Madeira do tema + bordas irregulares + runas entalhadas que brilham
   na cor do elemento + pregos de ferro.
   ========================================================================== */
.z-embroidery {
	position: relative;
	z-index: 3;
	height: 34px;
	overflow: hidden;
	background:
		linear-gradient(180deg, rgba(255,220,170,.10), rgba(0,0,0,.15) 45%, rgba(0,0,0,.45)),
		var(--tx-beam) left center / 2048px 100% repeat-x;
	box-shadow: inset 0 2px 0 rgba(255,220,170,.10), inset 0 -3px 6px rgba(0,0,0,.55), 0 6px 14px rgba(0,0,0,.6);
	-webkit-mask:
		var(--m-top) left top / 256px 10px repeat-x,
		var(--m-bot) left bottom / 256px 10px repeat-x,
		linear-gradient(#000 0 0) center / 100% calc(100% - 18px) no-repeat;
	mask:
		var(--m-top) left top / 256px 10px repeat-x,
		var(--m-bot) left bottom / 256px 10px repeat-x,
		linear-gradient(#000 0 0) center / 100% calc(100% - 18px) no-repeat;
}
/* runas entalhadas */
.z-embroidery::before {
	content: 'ᛚᚨᚾᛞᛋ ᛟᚠ ᛉᛖᛗᛚᛃᚨ  ᛫  ᚠᚢᚦᚨᚱᚲ ᚷᚹᚺᚾᛁᛃ  ᛫  ᛚᚨᚾᛞᛋ ᛟᚠ ᛉᛖᛗᛚᛃᚨ  ᛫  ᛇᛈᛉᛊᛏᛒ ᛖᛗᛚᛜᛞᛟ  ᛫  ᛚᚨᚾᛞᛋ ᛟᚠ ᛉᛖᛗᛚᛃᚨ  ᛫  ᚠᚢᚦᚨᚱᚲ ᚷᚹᚺᚾᛁᛃ  ᛫  ᛚᚨᚾᛞᛋ ᛟᚠ ᛉᛖᛗᛚᛃᚨ  ᛫  ᛇᛈᛉᛊᛏᛒ ᛖᛗᛚᛜᛞᛟ  ᛫  ᛚᚨᚾᛞᛋ ᛟᚠ ᛉᛖᛗᛚᛃᚨ  ᛫  ᚠᚢᚦᚨᚱᚲ ᚷᚹᚺᚾᛁᛃ  ᛫';
	position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%, -52%);
	white-space: pre;
	font-family: var(--f-rune);
	font-size: 17px;
	letter-spacing: .42em;
	line-height: 1;
	/* sulco escuro + brilho do elemento dentro do entalhe */
	color: color-mix(in srgb, var(--ember) 55%, #120a05);
	text-shadow:
		0 1px 0 rgba(255,225,180,.22),
		0 -1px 0 rgba(0,0,0,.85),
		0 0 7px rgba(var(--ember-rgb), .65),
		0 0 16px rgba(var(--ember-rgb), .35);
	pointer-events: none;
}
/* tons por elemento */
html[data-theme="fogo"] .z-embroidery::before { color: #ffb15a; text-shadow: 0 1px 0 rgba(0,0,0,.6), 0 0 6px rgba(255,120,30,.9), 0 0 16px rgba(255,80,10,.55); }
html[data-theme="gelo"] .z-embroidery::before { color: #eaf8ff; text-shadow: 0 1px 0 rgba(0,40,80,.5), 0 0 8px rgba(190,235,255,.8); }
html[data-theme="natureza"] .z-embroidery::before { color: #b9e36b; }
html[data-theme="oceano"] .z-embroidery::before { color: #8eecf6; }
html[data-theme="espiritos"] .z-embroidery::before { color: #b7f3ff; }

/* encaixe: abaixo do banner e no rodapé */
.z-faixa + .z-embroidery { margin-top: -4px; }
.z-footer > .z-embroidery { top: 0; margin-top: -6px; }
.z-home-ctas { margin-top: 16px; }
@media (max-width: 600px) { .z-embroidery { height: 28px; } .z-embroidery::before { font-size: 14px; } }

/* ==========================================================================
   v7 — DIA/NOITE · CLIMA · CURSOR · CARREGAMENTO · 404
   ========================================================================== */

/* ---------- Dia / noite na faixa e no fundo ---------- */
.z-tod { position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: background 2s, opacity 2s; }
html[data-tod="dia"]        .z-tod { background: linear-gradient(180deg, rgba(255,240,200,.34), rgba(255,215,150,.16) 60%, rgba(255,200,120,.04)); }
html[data-tod="amanhecer"]  .z-tod { background: linear-gradient(180deg, rgba(255,170,190,.20), rgba(255,200,120,.16) 55%, rgba(80,40,60,.10)); }
html[data-tod="entardecer"] .z-tod { background: linear-gradient(180deg, rgba(120,60,140,.22), rgba(255,120,60,.22) 65%, rgba(60,20,20,.20)); }
html[data-tod="noite"]      .z-tod { background: linear-gradient(180deg, rgba(4,8,36,.55), rgba(4,6,28,.32) 60%, rgba(0,0,10,.40)); }
html[data-tod="noite"] .z-tod::before {          /* estrelas cintilando */
	content: ''; position: absolute; inset: 0 0 35% 0;
	background-image:
		radial-gradient(1.5px 1.5px at 12% 22%, #fff, transparent), radial-gradient(1px 1px at 27% 12%, #fff, transparent),
		radial-gradient(1.5px 1.5px at 41% 30%, #fff, transparent), radial-gradient(1px 1px at 58% 16%, #fff, transparent),
		radial-gradient(2px 2px at 69% 28%, #fff, transparent),   radial-gradient(1px 1px at 83% 10%, #fff, transparent),
		radial-gradient(1.5px 1.5px at 92% 34%, #fff, transparent), radial-gradient(1px 1px at 6% 40%, #fff, transparent);
	background-size: 520px 100%;
	animation: z-twinkle 4s ease-in-out infinite alternate;
}
@keyframes z-twinkle { from { opacity: .35; } to { opacity: 1; } }
html[data-tod="dia"]        .z-bg::after { background: radial-gradient(ellipse at 50% 30%, transparent 25%, rgba(0,0,0,.28) 85%), linear-gradient(rgba(255,240,200,.06), rgba(0,0,0,.35)); }
html[data-tod="noite"]      .z-bg::after { background: radial-gradient(ellipse at 50% 30%, transparent 15%, rgba(0,0,10,.5) 80%), linear-gradient(rgba(0,0,30,.30), rgba(0,0,0,.6)); }
html[data-tod="entardecer"] .z-bg::after { background: radial-gradient(ellipse at 50% 30%, transparent 20%, rgba(20,0,10,.4) 80%), linear-gradient(rgba(255,120,60,.08), rgba(0,0,0,.5)); }
.z-stat-tod .fa { color: var(--brass-hi); }
html[data-tod="noite"] .z-stat-tod .fa { color: #cfe0ff; }

/* ---------- Clima ocasional ---------- */
.z-weather-flash { position: fixed; inset: 0; z-index: 900; pointer-events: none; background: rgba(255,225,190,.9); opacity: 0; }
.z-weather-flash.bolt { animation: z-bolt .9s ease-out; }
@keyframes z-bolt { 0% { opacity: 0; } 6% { opacity: .55; } 12% { opacity: .05; } 18% { opacity: .35; } 40% { opacity: 0; } 100% { opacity: 0; } }
.z-weather-fog { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.4s;
	background: linear-gradient(100deg, rgba(235,245,255,.0), rgba(235,245,255,.28) 40%, rgba(235,245,255,.08) 70%, rgba(235,245,255,0)); }
.z-weather-fog.on { opacity: 1; animation: z-fog-drift 6s ease-in-out infinite alternate; }
@keyframes z-fog-drift { from { transform: translateX(-4vw); } to { transform: translateX(4vw); } }
.z-creature {
	position: fixed; left: 0; top: 45vh; z-index: -1; pointer-events: none;
	width: 62vw; max-width: 1100px; aspect-ratio: 700 / 260;
	background: center / contain no-repeat; opacity: 0;
	transform: translate3d(-60vw, 0, 0);
}
.z-creature.go { animation: z-swim var(--dur, 26s) linear forwards; }
.z-creature.rtl.go { animation-name: z-swim-rtl; }
.z-creature.glow { --op: .95; filter: drop-shadow(0 0 10px rgba(140,230,255,.45)); }
@keyframes z-swim { 0% { opacity: 0; transform: translate3d(-60vw, 0, 0); } 10% { opacity: var(--op, .55); } 50% { transform: translate3d(50vw, -3vh, 0); } 90% { opacity: var(--op, .55); } 100% { opacity: 0; transform: translate3d(130vw, 1vh, 0); } }
@keyframes z-swim-rtl { 0% { opacity: 0; transform: translate3d(130vw, 0, 0) scaleX(-1); } 10% { opacity: var(--op, .55); } 50% { transform: translate3d(50vw, -3vh, 0) scaleX(-1); } 90% { opacity: var(--op, .55); } 100% { opacity: 0; transform: translate3d(-60vw, 1vh, 0) scaleX(-1); } }

/* ---------- Cursor temático (espada com gema do elemento) ---------- */
@media (pointer: fine) {
	html[data-theme="natureza"], html:not([data-theme]) { --cur: url('../img/fx/cursor-natureza.png'); --cur-h: url('../img/fx/cursor-natureza-hover.png'); }
	html[data-theme="oceano"]    { --cur: url('../img/fx/cursor-oceano.png');    --cur-h: url('../img/fx/cursor-oceano-hover.png'); }
	html[data-theme="fogo"]      { --cur: url('../img/fx/cursor-fogo.png');      --cur-h: url('../img/fx/cursor-fogo-hover.png'); }
	html[data-theme="espiritos"] { --cur: url('../img/fx/cursor-espiritos.png'); --cur-h: url('../img/fx/cursor-espiritos-hover.png'); }
	html[data-theme="gelo"]      { --cur: url('../img/fx/cursor-gelo.png');      --cur-h: url('../img/fx/cursor-gelo-hover.png'); }
	html, body { cursor: var(--cur) 1 1, auto; }
	a, button, input[type="submit"], select, label[for], .z-btn, [role="button"], summary { cursor: var(--cur-h) 1 1, pointer; }
	input[type="text"], input[type="password"], input[type="email"], textarea { cursor: text; }
}

/* ---------- Carregamento entre páginas ---------- */
.z-loader {
	position: fixed; inset: 0; z-index: 15000;
	display: grid; place-items: center;
	background: radial-gradient(ellipse at center, rgba(0,0,0,.55), rgba(0,0,0,.88));
	opacity: 0; visibility: hidden;
	transition: opacity .22s ease, visibility .22s;
	pointer-events: none;
}
html.z-leaving .z-loader, html.z-arriving .z-loader { opacity: 1; visibility: visible; }
html.z-arriving .z-loader { transition: none; }
html.z-intro-on .z-loader { display: none; }
.z-loader-ring, .z-loader-rune { grid-area: 1 / 1; }
.z-loader-ring { width: 150px; height: 150px; animation: z-spin 3.2s linear infinite; filter: drop-shadow(0 0 10px var(--glow)); }
.z-loader-ring text { font-family: var(--f-rune); font-size: 15px; letter-spacing: 3px; fill: var(--brass-hi); }
.z-ring-line { fill: none; stroke: var(--brass-dk); stroke-width: 1.5; opacity: .8; }
.z-loader-rune {
	font-family: var(--f-rune); font-size: 52px; color: var(--brass-hi);
	text-shadow: 0 0 14px var(--glow), 0 0 30px var(--glow);
	animation: z-rune-pulse 1.2s ease-in-out infinite;
}
@keyframes z-spin { to { transform: rotate(360deg); } }
@keyframes z-rune-pulse { 50% { transform: scale(1.12); opacity: .75; } }
@media (prefers-reduced-motion: reduce) { .z-loader-ring, .z-loader-rune { animation: none; } }

/* ---------- Página 404 ---------- */
.z-404 { position: relative; text-align: center; padding: 10px 0 0; overflow: hidden; }
.z-404 .z-scroll { max-width: 620px; margin: 0 auto; text-align: center; position: relative; z-index: 2; }
.z-404 h2 { font-size: 3.4rem; margin: 0; color: #2a1806; text-shadow: none; }
.z-404 h3 { margin: 2px 0 14px; color: #5a3a18; text-shadow: none; }
.z-404-btns { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.z-404-dragon {   /* o dragão espiando por baixo do pergaminho */
	position: relative; z-index: 1;
	width: min(760px, 100%); aspect-ratio: 2.4; margin: -40px auto 0;
	background: var(--dragon-404) center 22% / 140% auto no-repeat;
	-webkit-mask: radial-gradient(ellipse 60% 75% at 50% 40%, #000 45%, transparent 75%);
	mask: radial-gradient(ellipse 60% 75% at 50% 40%, #000 45%, transparent 75%);
	animation: z-peek 6s ease-in-out infinite;
	filter: brightness(.9);
}
@keyframes z-peek { 0%,100% { transform: translateY(14px); } 45%,60% { transform: translateY(-6px); } }
.z-404-eyes { position: absolute; left: 0; right: 0; top: 24.5%; height: 20%; pointer-events: none; }
.z-404-eyes::before, .z-404-eyes::after {
	content: ''; position: absolute; top: 0; width: 7%; aspect-ratio: 1.8; border-radius: 50%;
	background: radial-gradient(ellipse, var(--zi-eye1, rgba(255,225,130,1)), var(--zi-eye2, rgba(255,140,30,.6)) 40%, transparent 70%);
	animation: z-blink-eyes 5s infinite;
}
.z-404-eyes::before { left: 39.9%; } .z-404-eyes::after { left: 56.2%; }
@keyframes z-blink-eyes { 0%,92%,100% { opacity: 1; transform: scaleY(1); } 95% { opacity: .2; transform: scaleY(.1); } }
html[data-theme="fogo"]      .z-404-dragon { --dragon-404: url('../img/temas/dragao-fogo.jpg'); }
html[data-theme="natureza"], html:not([data-theme]) { --dragon-404: url('../img/temas/dragao-natureza.jpg'); }
html[data-theme="oceano"]    { --dragon-404: url('../img/temas/dragao-oceano.jpg'); }
html[data-theme="espiritos"] { --dragon-404: url('../img/temas/dragao-espiritos.jpg'); }
html[data-theme="gelo"]      { --dragon-404: url('../img/temas/dragao-gelo.jpg'); }
html[data-theme="fogo"]      { --dragon-404: url('../img/temas/dragao-fogo.jpg'); }
html[data-theme="natureza"]  .z-404 { --zi-eye1: rgba(225,255,120,1); --zi-eye2: rgba(120,210,40,.6); }
html[data-theme="oceano"]    .z-404 { --zi-eye1: rgba(170,250,255,1); --zi-eye2: rgba(40,190,230,.6); }
html[data-theme="espiritos"] .z-404 { --zi-eye1: rgba(190,250,255,1); --zi-eye2: rgba(80,210,255,.6); }
html[data-theme="gelo"]      .z-404 { --zi-eye1: rgba(235,250,255,1); --zi-eye2: rgba(130,200,255,.6); }

.z-trail { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 14000; pointer-events: none; }

/* ==========================================================================
   v10 — roda de pedra, correções
   ========================================================================== */
/* Roda de pedra com runas acesas na cor do elemento */
.z-wheel { grid-area: 1 / 1; width: 170px; height: 170px; position: relative; animation: z-spin 4.5s linear infinite; filter: drop-shadow(0 10px 18px rgba(0,0,0,.8)); }
.z-wheel::before { content: ''; position: absolute; inset: 0; background: url('../img/fx/roda-pedra.png') center / contain no-repeat; }
.z-wheel::after {
	content: ''; position: absolute; inset: 0;
	background: var(--ember);
	-webkit-mask: url('../img/fx/roda-runas.png') center / contain no-repeat;
	mask: url('../img/fx/roda-runas.png') center / contain no-repeat;
	filter: drop-shadow(0 0 4px var(--glow)) drop-shadow(0 0 10px var(--glow));
	animation: z-wheel-glow 1.6s ease-in-out infinite;
}
@keyframes z-wheel-glow { 50% { opacity: .65; } }
.z-loader .z-loader-ring { display: none; }
.z-loader-rune { font-size: 40px; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .z-wheel, .z-wheel::after { animation: none; } }

/* Bolinha de status: cores fixas (não seguem o tema) */
.z-dot { background: #c0392b !important; box-shadow: 0 0 8px #c0392b !important; }
.z-dot.on { background: #5fd36f !important; box-shadow: 0 0 8px #5fd36f !important; }

/* Celular: logo da intro não pode ser espremido */
#zIntro .zi-logo { flex-shrink: 0; height: auto; max-height: 42vh; width: auto; max-width: min(560px, 86vw); object-fit: contain; }
#zIntro .zi-center { overflow: hidden; }

/* ==========================================================================
   PERFIL DO PERSONAGEM — ficha do herói com arte e tema da vocação
   ========================================================================== */
.voc-knight   { --vc: #b8322b; --vc2: #cfd3da; --vc-rgb: 184,50,43; }
.voc-templar  { --vc: #e3c25a; --vc2: #f5edd6; --vc-rgb: 227,194,90; }
.voc-sorcerer { --vc: #9a5cf0; --vc2: #ff8a3a; --vc-rgb: 154,92,240; }
.voc-druid    { --vc: #3fae6e; --vc2: #d6f0e0; --vc-rgb: 63,174,110; }
.voc-ranger   { --vc: #d0913c; --vc2: #9cc36a; --vc-rgb: 208,145,60; }
.voc-none     { --vc: var(--brass); --vc2: var(--bone); --vc-rgb: var(--brass-rgb); }

.z-hero-char {
	position: relative; overflow: hidden;
	min-height: 270px; margin: 0 0 24px;
	display: flex; align-items: flex-end; gap: 18px;
	padding: 22px 26px 22px 120px;
	border: 3px solid var(--iron); outline: 1px solid var(--iron-dk);
	background:
		radial-gradient(ellipse at 80% 30%, rgba(var(--vc-rgb), .28), transparent 60%),
		linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.65)),
		var(--tx-plank) 0 0 / 512px;
	box-shadow: inset 0 0 50px rgba(0,0,0,.8), 0 12px 26px rgba(0,0,0,.6);
}
/* arte da vocação, fundindo com a madeira */
.z-hc-art {
	position: absolute; top: 0; right: 0; bottom: 0; width: 68%;
	/* pergaminho atrás da arte: artes com fundo transparente ficam iguais às outras */
	background:
		radial-gradient(ellipse at 60% 45%, rgba(255,245,220,.35), transparent 65%),
		radial-gradient(ellipse at 100% 50%, rgba(90,60,25,.35), transparent 60%),
		#e2d3b0 url('../img/pergaminho.jpg') center / 520px repeat;
	box-shadow: inset 0 0 60px rgba(110,70,25,.45);
	-webkit-mask: linear-gradient(90deg, transparent 0%, #000 45%); mask: linear-gradient(90deg, transparent 0%, #000 45%);
}
.z-hc-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right 20%; opacity: .97; }
.z-hero-char::after {   /* vinheta embaixo para o texto */
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(0deg, rgba(0,0,0,.78), transparent 55%), linear-gradient(90deg, rgba(0,0,0,.55), transparent 40%);
}
/* estandarte pendurado com o brasão da classe */
.z-hc-banner {
	position: absolute; left: 26px; top: -4px; z-index: 2;
	width: 70px; height: 132px;
	background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.25)), var(--vc);
	clip-path: polygon(0 0, 100% 0, 100% 84%, 50% 100%, 0 84%);
	box-shadow: inset 0 0 0 3px rgba(0,0,0,.35);
	display: grid; place-items: center; padding-bottom: 18px;
	color: var(--vc2); font-size: 2rem;
	text-shadow: 0 2px 0 rgba(0,0,0,.6), 0 0 14px rgba(var(--vc-rgb), .8);
	animation: z-banner-sway 6s ease-in-out infinite; transform-origin: top center;
}
.z-hc-banner::before { content: ''; position: absolute; top: 4px; left: -6px; right: -6px; height: 8px; background: var(--tx-beam) center / 300px 100%; border: 1px solid #000; }
@keyframes z-banner-sway { 50% { transform: rotate(1.5deg); } }
.z-hc-outfit { position: relative; z-index: 2; flex-shrink: 0; width: 128px; height: 128px; }
.z-hc-outfit img { width: 128px; height: 128px; image-rendering: pixelated; filter: drop-shadow(0 6px 8px rgba(0,0,0,.8)); }
.z-hc-info { position: relative; z-index: 2; min-width: 0; }
.z-hc-info small { font-family: var(--f-label); color: var(--vc2); letter-spacing: .08em; font-size: 1rem; text-shadow: 0 2px 4px #000; }
.z-hc-info h2 { margin: 2px 0 6px; font-size: 2.6rem; color: #fff; text-shadow: 0 3px 0 #000, 0 0 24px rgba(var(--vc-rgb), .55); border: 0 !important; padding: 0 !important; background: none !important; }
.z-hc-info h2::after { display: none !important; }
.z-hc-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-family: var(--f-label); color: var(--bone); text-shadow: 0 2px 3px #000; }
.z-hc-meta .fa { color: var(--vc); }
.z-hc-motto { margin: 8px 0 0; font-style: italic; color: rgba(var(--vc-rgb), 1); filter: brightness(1.35); text-shadow: 0 2px 3px #000; }
/* a ficha substitui o gif pequeno do canto da tabela */
.z-hero-char ~ #characterProfileTable .outfit { display: none; }
.page_characterprofile .outfit img { width: 128px; height: 128px; image-rendering: pixelated; }
/* cabeçalhos das tabelas do perfil ganham a cor da classe */
.page_characterprofile .leftPane tr.yellow td { box-shadow: inset 0 -3px 0 var(--z-pvc, transparent); }
@media (max-width: 700px) {
	.z-hero-char { padding: 140px 16px 16px; flex-direction: column; align-items: flex-start; min-height: 0; }
	.z-hc-art { width: 100%; height: 190px; bottom: auto; -webkit-mask: linear-gradient(180deg, #000 50%, transparent); mask: linear-gradient(180deg, #000 50%, transparent); }
	.z-hc-info h2 { font-size: 2rem; }
	.z-hc-outfit { margin-top: -40px; }
}

/* ---------- Itens ---------- */
.z-item { position: relative; display: inline-block; line-height: 0; }
a.z-item:hover .z-item-img { filter: drop-shadow(0 0 4px var(--glow)) brightness(1.15); }
.z-item-img { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; }
.z-item-img.z-item-missing { opacity: .25; }
.z-item-count { position: absolute; right: -2px; bottom: -2px; font: 700 10px/1 Arial, sans-serif; color: #fff; text-shadow: 1px 1px 0 #000; }
.z-equip-lock {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5;
	display: flex; flex-direction: column; align-items: center; gap: 4px;
	padding: 10px 14px; background: rgba(0,0,0,.72); border: 2px solid var(--iron);
	font-family: var(--f-label); font-size: .9rem; color: var(--bone); white-space: nowrap;
}
.z-equip-lock .fa { font-size: 1.6rem; color: var(--brass); }
.z-equip-note { font-size: .8rem; color: var(--ash); text-align: center; margin-top: 6px; }

/* sem arte: pergaminho com o brasão da classe "desenhado a tinta" */
.z-hc-noart { display: grid; place-items: center; }
.z-hc-noart .fa { font-size: 13rem; color: rgba(60,40,20,.28); text-shadow: 2px 2px 0 rgba(255,245,220,.35); transform: rotate(-8deg); margin-left: 30%; }

/* Placa com o nome da página: pendurada logo abaixo da viga rúnica, sempre na frente dela */
.z-sign-wrap { position: relative; z-index: 6; margin-top: -6px; }
.z-sign-holder { margin-top: 0; }
.z-sign-holder::before { z-index: 7; }
.z-sign-wrap + .z-status { margin-top: 40px; }

/* ==========================================================================
   ESTÁBULO DE ZEMLYA — catálogo e loja de montarias (montarias.php)
   ========================================================================== */
.z-stable { --r-comum: #b9ab90; --r-rara: #5fa8d3; --r-epica: #b072e0; --r-lendaria: #f0b43c; }
.r-comum    { --rc: var(--r-comum,    #b9ab90); }
.r-rara     { --rc: var(--r-rara,     #5fa8d3); }
.r-epica    { --rc: var(--r-epica,    #b072e0); }
.r-lendaria { --rc: var(--r-lendaria, #f0b43c); }
.z-mt-modal.r-comum { --rc: #b9ab90; } .z-mt-modal.r-rara { --rc: #5fa8d3; } .z-mt-modal.r-epica { --rc: #b072e0; } .z-mt-modal.r-lendaria { --rc: #f0b43c; }

.z-coin { display: inline-block; width: 1em; height: 1em; border-radius: 50%; vertical-align: -.12em; margin-right: .3em;
	background: radial-gradient(circle at 35% 30%, #fff3c4 0 12%, #e6b94a 30%, #9a6a17 75%, #5a3b0a 100%);
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.5), 0 1px 0 #000; }

.z-stable-head { text-align: center; padding: 6px 10px 18px; }
.z-stable-kicker { font-family: var(--f-label); letter-spacing: .35em; text-transform: uppercase; font-size: .8rem; color: var(--brass); }
.z-stable-head h1 { margin: 4px 0 6px; font-size: clamp(2rem, 4.6vw, 3rem); color: var(--brass-hi); text-shadow: 0 3px 0 #000, 0 0 26px rgba(var(--ember-rgb), .35); }
.z-stable-head p { margin: 0 auto 14px; max-width: 640px; color: var(--ash); }
.z-stable-purse { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 8px 16px;
	background: rgba(0,0,0,.45); border: 1px solid var(--brass-dk); box-shadow: inset 0 0 0 1px rgba(0,0,0,.6); font-family: var(--f-label); font-size: 1.1rem; }
.z-stable-purse b { color: var(--brass-hi); font-size: 1.35rem; }
.z-stable-purse .z-btn { padding: 5px 14px; font-size: .9rem; }
.z-stable-pend { color: var(--frost); font-size: .95rem; }

.z-stable-msg { margin: 0 0 16px; padding: 12px 16px; font-family: var(--f-label); font-size: 1.05rem; border: 1px solid; background: rgba(0,0,0,.5); }
.z-stable-msg.ok { border-color: #5f8f43; color: #cfe8b5; box-shadow: inset 4px 0 0 #5f8f43; }
.z-stable-msg.erro { border-color: var(--blood-hi); color: #f1c0b5; box-shadow: inset 4px 0 0 var(--blood-hi); }
.z-stable-msg.aviso { border-color: var(--brass-dk); color: var(--brass-hi); box-shadow: inset 4px 0 0 var(--brass); }

.z-stable-bar { position: relative; z-index: 2; margin: 0 -4px 18px; padding: 10px 10px 8px;
	background: linear-gradient(180deg, rgba(255,220,170,.06), rgba(0,0,0,.4)), var(--tx-beam) center / 900px 100%;
	border: 2px solid var(--iron-dk); box-shadow: inset 0 0 0 1px rgba(var(--brass-rgb), .3), 0 8px 18px rgba(0,0,0,.6); }
.z-stable-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.z-stable-tabs button, .z-gem-btn { font-family: var(--f-label); font-size: .95rem; color: var(--bone); background: rgba(0,0,0,.45);
	border: 1px solid var(--iron-dk); box-shadow: inset 0 0 0 1px rgba(var(--brass-rgb), .18); padding: 5px 11px; cursor: pointer; transition: .15s; }
.z-stable-tabs button em { font-style: normal; font-size: .8em; color: var(--ash); margin-left: 2px; }
.z-stable-tabs button:hover, .z-gem-btn:hover { color: var(--brass-hi); }
.z-stable-tabs button.on { color: #fff; background: linear-gradient(180deg, var(--blood-hi), var(--blood) 60%, #4f0d0d); box-shadow: inset 0 0 0 1px var(--brass-dk); }
.z-stable-tabs button.on em { color: var(--brass-hi); }
.z-stable-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.z-stable-tools input[type=search] { flex: 1 1 200px; min-width: 160px; padding: 6px 10px; }
.z-stable-tools select { padding: 6px 8px; }
.z-stable-rar { display: flex; flex-wrap: wrap; gap: 5px; }
.z-gem-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; }
.z-gem-btn i, .z-mount-gem { width: 11px; height: 11px; transform: rotate(45deg); background: var(--rc); box-shadow: 0 0 0 1px #000, 0 0 8px var(--rc); flex: none; }
.z-gem-btn.on { color: #fff; border-color: var(--rc); box-shadow: inset 0 0 0 1px var(--rc), 0 0 10px rgba(0,0,0,.5); }

.z-stable-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(134px, 1fr)); gap: 10px; }
.z-mount { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px 10px; text-decoration: none; color: var(--bone);
	background: radial-gradient(ellipse at 50% 38%, color-mix(in srgb, var(--rc) 22%, transparent) 0, transparent 62%), linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.6)), var(--tx-plank) center / 420px;
	border: 2px solid var(--iron-dk); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 45%, transparent), inset 0 -18px 24px rgba(0,0,0,.5), 0 4px 10px rgba(0,0,0,.55);
	transition: transform .16s, box-shadow .16s; }
.z-mount:hover, .z-mount:focus-visible { transform: translateY(-3px); color: #fff; text-shadow: none;
	box-shadow: inset 0 0 0 1px var(--rc), inset 0 -18px 24px rgba(0,0,0,.4), 0 0 18px color-mix(in srgb, var(--rc) 55%, transparent), 0 8px 16px rgba(0,0,0,.6); }
.z-mount[hidden] { display: none; }
.z-mount-gem { position: absolute; top: 9px; left: 9px; }
.z-mount-prem { position: absolute; top: 5px; right: 8px; color: var(--brass-hi); font-size: .8rem; text-shadow: 0 1px 0 #000; }
.z-mount-img { width: 104px; height: 100px; display: flex; align-items: flex-end; justify-content: center; }
.z-mount-img img { width: 128px; height: 128px; margin-bottom: -10px; image-rendering: pixelated; filter: drop-shadow(0 4px 3px rgba(0,0,0,.7)); transition: transform .2s; }
.z-mount:hover .z-mount-img img { transform: scale(1.08); }
.z-mount-nome { font-family: var(--f-label); font-size: 1rem; line-height: 1.15; text-align: center; min-height: 2.3em; display: flex; align-items: center; }
.z-mount-tag { font-family: var(--f-label); font-size: .82rem; padding: 2px 9px; background: rgba(0,0,0,.6); border: 1px solid var(--iron-dk); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.z-mount-tag.preco { color: var(--brass-hi); font-size: .95rem; border-color: var(--brass-dk); }
.z-mount-tag.origem { color: var(--ash); }
.z-mount-tag.pend { color: var(--frost); }
.z-stable-vazio { text-align: center; padding: 40px 0; color: var(--ash); font-size: 1.15rem; }

/* ficha */
html.z-mt-aberto { overflow: hidden; }
.z-mt-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.z-mt-modal[hidden] { display: none; }
.z-mt-back { position: absolute; inset: 0; background: rgba(5,3,2,.84); animation: zmtFade .2s; }
.z-mt-card { position: relative; display: grid; grid-template-columns: 300px 1fr; width: min(860px, 100%); max-height: calc(100vh - 32px); overflow: auto;
	background: var(--parch) url('../img/pergaminho.jpg') center / 512px repeat; color: var(--ink);
	box-shadow: inset 0 0 60px rgba(110,62,18,.45), 0 0 0 3px var(--iron-dk), 0 0 0 5px color-mix(in srgb, var(--rc) 70%, #000), 0 20px 50px rgba(0,0,0,.8);
	animation: zmtIn .28s cubic-bezier(.2,.9,.3,1.2); }
@keyframes zmtFade { from { opacity: 0; } }
@keyframes zmtIn { from { opacity: 0; transform: translateY(18px) scale(.96); } }
.z-mt-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 320px;
	background: radial-gradient(ellipse at 50% 70%, color-mix(in srgb, var(--rc) 35%, transparent) 0, transparent 60%), linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.55)), var(--tx-plank) center / 500px;
	border-right: 3px solid var(--iron-dk); box-shadow: inset 0 0 40px rgba(0,0,0,.7); overflow: hidden; }
.z-mt-halo { position: absolute; left: 50%; bottom: 52px; width: 210px; height: 46px; transform: translateX(-50%); border-radius: 50%;
	background: radial-gradient(ellipse, color-mix(in srgb, var(--rc) 70%, transparent), transparent 70%); filter: blur(4px); animation: zmtHalo 3s ease-in-out infinite; }
@keyframes zmtHalo { 50% { opacity: .55; transform: translateX(-50%) scaleX(.85); } }
.z-mt-stage img { position: relative; width: 256px; height: 256px; image-rendering: pixelated; filter: drop-shadow(0 10px 6px rgba(0,0,0,.7)); }
.z-mt-info { padding: 26px 30px 24px; }
.z-mt-rar { font-family: var(--f-label); text-transform: uppercase; letter-spacing: .25em; font-size: .78rem; font-weight: 700;
	color: color-mix(in srgb, var(--rc) 60%, #2b1c0d); }
.z-mt-rar::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 8px; transform: rotate(45deg); background: var(--rc); box-shadow: 0 0 0 1px #000; }
.z-mt-info h2 { margin: 2px 0 10px; font-size: 2rem; color: #2a1806; text-shadow: none; line-height: 1.1; }
.z-mt-desc { font-size: 1.07rem; line-height: 1.6; margin: 0 0 14px; }
.z-mt-stats { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-family: var(--f-label); color: var(--ink-soft); }
.z-mt-stats b { color: var(--ink); }
.z-mt-stats [hidden] { display: none; }
.z-mt-info h4 { margin: 0 0 6px; font-size: 1.1rem; color: var(--blood); border-bottom: 1px solid rgba(90,60,30,.35); padding-bottom: 4px; }
.z-mt-orig { list-style: none; margin: 0 0 18px; padding: 0; }
.z-mt-orig li { position: relative; padding: 3px 0 3px 26px; font-size: 1.03rem; }
.z-mt-orig li::before { font-family: FontAwesome; position: absolute; left: 2px; top: 3px; color: var(--blood); content: '\f124'; }
.z-mt-orig li.t-loja::before { content: '\f219'; } .z-mt-orig li.t-domavel::before { content: '\f1b0'; } .z-mt-orig li.t-missao::before { content: '\f278'; }
.z-mt-orig li.t-npc::before { content: '\f24e'; } .z-mt-orig li.t-evento::before { content: '\f005'; } .z-mt-orig li.t-divina::before { content: '\f185'; }
.z-mt-orig li.t-regiao::before { content: '\f0ac'; } .z-mt-orig li.t-breve::before { content: '\f128'; }
.z-mt-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.z-mt-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.z-mt-price { font-family: var(--f-label); font-size: 1.7rem; font-weight: 700; color: #6b4410; }
.z-mt-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; background: rgba(142,28,28,.12); border: 1px dashed var(--blood); }
.z-mt-confirm[hidden], .z-mt-form [hidden] { display: none; }
.z-mt-confirm span { font-family: var(--f-label); flex: 1 1 100%; }
.z-mt-pend, .z-mt-nota { font-family: var(--f-label); color: var(--ink-soft); padding: 8px 12px; background: rgba(90,60,30,.12); border-left: 3px solid var(--brass-dk); }
.z-mt-link { display: inline-block; margin-top: 16px; font-size: .9rem; color: var(--ink-soft) !important; }
.z-mt-link.ok::after { content: ' ✓'; color: #3d6b2a; }
.z-mt-x { position: absolute; top: 6px; right: 12px; z-index: 3; background: none; border: 0; font-size: 34px; line-height: 1; color: #5a3c1e; cursor: pointer; }
.z-mt-x:hover { color: var(--blood); }
.z-mt-nav { position: absolute; top: 150px; z-index: 3; width: 34px; height: 44px; border: 1px solid var(--iron-dk); background: rgba(0,0,0,.55); color: var(--brass-hi); cursor: pointer; }
.z-mt-nav.prev { left: 6px; } .z-mt-nav.next { left: 260px; }
.z-mt-nav:hover { background: rgba(0,0,0,.8); color: #fff; }
@media (max-width: 720px) {
	.z-stable-bar { position: static; }
	.z-stable-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
	.z-mount-img { width: 96px; height: 88px; } .z-mount-img img { width: 96px; height: 96px; }
	.z-mt-card { grid-template-columns: 1fr; }
	.z-mt-stage { min-height: 220px; border-right: 0; border-bottom: 3px solid var(--iron-dk); }
	.z-mt-stage img { width: 192px; height: 192px; }
	.z-mt-nav { top: 88px; } .z-mt-nav.next { left: auto; right: 6px; }
	.z-mt-info { padding: 18px 18px 20px; }
}

/* ---------- Estábulo v2: coleção, semana, presentes, ranking, mago ---------- */
.z-stable-views { display: inline-flex; gap: 4px; margin: 0 0 14px; padding: 3px; background: rgba(0,0,0,.45); border: 1px solid var(--iron-dk); }
.z-stable-views a { font-family: var(--f-label); padding: 6px 16px; color: var(--ash); }
.z-stable-views a.on { color: #fff; background: linear-gradient(180deg, rgba(255,220,170,.1), rgba(0,0,0,.3)), var(--tx-beam) center / 400px; box-shadow: inset 0 0 0 1px var(--brass-dk); }
.z-stable-head .z-stable-purse { margin-top: 0; }
.z-mago-toggle { font-family: var(--f-label); font-size: .9rem; background: none; border: 1px solid var(--iron-dk); color: var(--brass-hi); padding: 4px 10px; cursor: pointer; }
.z-mago-toggle.off { color: var(--ash); opacity: .7; }

.z-week { position: relative; display: flex; align-items: center; gap: 18px; margin: 0 0 16px; padding: 12px 18px; cursor: pointer;
	background: radial-gradient(ellipse at 12% 50%, color-mix(in srgb, var(--rc) 40%, transparent), transparent 55%), linear-gradient(90deg, rgba(0,0,0,.2), rgba(0,0,0,.65)), var(--tx-plank) center / 500px;
	border: 2px solid var(--iron-dk); box-shadow: inset 0 0 0 1px var(--brass-dk), 0 0 24px rgba(var(--ember-rgb), .18), 0 6px 16px rgba(0,0,0,.6); }
.z-week:hover { box-shadow: inset 0 0 0 1px var(--brass), 0 0 30px rgba(var(--ember-rgb), .35), 0 6px 16px rgba(0,0,0,.6); }
.z-week-img img { width: 128px; height: 128px; image-rendering: pixelated; margin: -18px 0 -14px; filter: drop-shadow(0 6px 4px rgba(0,0,0,.7)); animation: z-float 4s ease-in-out infinite; }
.z-week-txt { flex: 1; min-width: 0; }
.z-week-kicker { font-family: var(--f-label); color: var(--brass); letter-spacing: .12em; text-transform: uppercase; font-size: .82rem; }
.z-week h3 { margin: 2px 0 4px; font-size: 1.7rem; color: var(--brass-hi); }
.z-week-wish { margin: 0 0 4px; color: #f08c8c; font-family: var(--f-label); }
.z-week-price { margin: 0; font-family: var(--f-label); font-size: 1.15rem; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.z-week-price s, .z-mount-tag s, .z-mt-price s { color: var(--ash); opacity: .75; font-size: .85em; }
.z-week-price b { color: var(--brass-hi); font-size: 1.4rem; }
.z-week-clock { margin-left: 10px; color: var(--frost); font-size: .95rem; }

.z-stable-gift { position: relative; display: flex; align-items: center; gap: 14px; margin: 0 0 14px; padding: 10px 44px 10px 14px; background: rgba(0,0,0,.55);
	border: 1px solid var(--brass-dk); box-shadow: inset 4px 0 0 var(--brass), 0 0 18px rgba(var(--brass-rgb), .2); font-family: var(--f-label); }
.z-stable-gift img { image-rendering: pixelated; }
.z-stable-gift b { color: var(--brass-hi); }
.z-stable-gift q { display: block; color: var(--bone); font-style: italic; margin: 2px 0; }
.z-stable-gift small { display: block; color: var(--ash); }
.z-stable-gift .z-mt-x { color: var(--ash); top: 4px; right: 8px; font-size: 26px; }

.z-collection { margin: 0 0 16px; padding: 12px 16px 10px; background: rgba(0,0,0,.45); border: 1px solid var(--iron-dk); box-shadow: inset 0 0 0 1px rgba(var(--brass-rgb), .2); }
.z-collection-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; font-family: var(--f-label); font-size: 1.1rem; }
.z-collection-top label { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--brass-hi); }
.z-collection-top select { padding: 4px 8px; font-size: .95rem; }
.z-collection-num b { color: var(--brass-hi); font-size: 1.4rem; }
.z-collection-num span { color: var(--frost); }
.z-collection-bar { height: 12px; margin: 8px 0 6px; background: rgba(0,0,0,.6); border: 1px solid var(--iron-dk); box-shadow: inset 0 2px 4px rgba(0,0,0,.8); }
.z-collection-bar i { display: block; height: 100%; width: 0; background: linear-gradient(180deg, var(--brass-hi), var(--brass) 50%, var(--brass-dk)); box-shadow: 0 0 10px rgba(var(--brass-rgb), .5); transition: width .6s cubic-bezier(.2,.8,.3,1); }
.z-collection-note { color: var(--ash); font-size: .82rem; }
.z-stable-own { margin-top: 6px; }
.z-stable-own button.on { background: linear-gradient(180deg, #3d5a2a, #2a4019 60%, #18260e); }

.z-ribbon { position: absolute; top: 10px; right: -6px; z-index: 2; padding: 2px 10px 2px 12px; font-family: var(--f-label); font-size: .78rem; font-weight: 700; color: #fff; text-shadow: 0 1px 0 #000;
	clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%); box-shadow: 0 2px 4px rgba(0,0,0,.5); }
.z-ribbon.nova { background: linear-gradient(180deg, #4f9a3c, #2e6421); }
.z-ribbon.week { background: linear-gradient(180deg, var(--blood-hi), var(--blood)); }
.z-mt-stage .z-ribbon { top: 18px; right: 0; font-size: .95rem; padding: 4px 14px 4px 16px; }
.z-mount-flags { position: absolute; top: 5px; right: 8px; display: flex; gap: 5px; font-size: .82rem; text-shadow: 0 1px 0 #000; }
.z-mount .z-ribbon ~ .z-mount-flags { top: 32px; }
.z-mount-flags .fa-star { color: var(--brass-hi); }
.z-mount-flags .z-flag-wish { color: #e86a6a; }
.z-mount-flags .z-flag-tem { color: #8fd27a; }
.z-mount-flags [hidden] { display: none; }
.z-mount.is-tem { box-shadow: inset 0 0 0 1px rgba(143,210,122,.6), inset 0 -18px 24px rgba(0,0,0,.5), 0 4px 10px rgba(0,0,0,.55); }
.z-mount.is-week { box-shadow: inset 0 0 0 1px var(--brass), inset 0 -18px 24px rgba(0,0,0,.4), 0 0 14px rgba(var(--ember-rgb), .35); }

/* ficha v2 */
.z-mt-top { display: flex; justify-content: space-between; align-items: center; padding-right: 30px; }
.z-mt-heart { background: none; border: 0; font-size: 1.5rem; color: #8e5a4a; cursor: pointer; padding: 0 4px; transition: transform .15s; }
.z-mt-heart:hover { transform: scale(1.15); }
.z-mt-heart.on { color: #c0302a; }
.z-mt-heart.pulse { animation: zmtPulse .4s; }
@keyframes zmtPulse { 40% { transform: scale(1.45); } }
.z-mt-heart[hidden] { display: none; }
.z-mt-realm, .z-mt-mine { margin: 0 0 14px; font-family: var(--f-label); color: var(--ink-soft); }
.z-mt-realm p, .z-mt-mine p { margin: 2px 0; }
.z-mt-realm .fa, .z-mt-mine .fa { width: 18px; color: var(--blood); }
.z-mt-first a { color: var(--blood); font-weight: 700; }
.z-mt-first.none { font-style: italic; }
.z-mt-mine { padding: 6px 10px; background: rgba(61,107,42,.12); border-left: 3px solid #5f8f43; }
.z-mt-mine .fa { color: #3d6b2a; }
.z-mt-mine[hidden] { display: none; }
.z-mt-tame, .z-mt-npc { list-style: none; margin: 0 0 16px; padding: 0; }
.z-mt-tame li { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.z-mt-tame-item { flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(60,35,10,.18); border: 1px solid rgba(90,60,30,.45); box-shadow: inset 0 0 6px rgba(0,0,0,.25); }
.z-mt-tame-item img { image-rendering: pixelated; }
.z-mt-tame em { margin-left: auto; font-style: normal; font-family: var(--f-label); font-weight: 700; color: var(--blood); background: rgba(142,28,28,.1); padding: 1px 8px; }
.z-mt-npc li { padding: 2px 0; }
.z-mt-npc .fa { color: var(--blood); width: 16px; }
.z-mt-giftbtn { background: none; border: 0; padding: 4px 0; font-family: var(--f-label); color: var(--blood); cursor: pointer; text-decoration: underline dotted; }
.z-mt-giftbtn.on { font-weight: 700; }
.z-mt-giftbox { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; width: 100%; padding: 10px; background: rgba(90,60,30,.12); border: 1px dashed rgba(90,60,30,.5); }
.z-mt-giftbox[hidden] { display: none; }
.z-mt-giftbox label { display: flex; flex-direction: column; gap: 3px; margin: 0; font-family: var(--f-label); font-size: .92rem; color: var(--ink-soft); }
.z-mt-giftbox label.full { grid-column: 1 / -1; }
.z-mt-giftbox input, .z-mt-giftbox select, .z-mt-giftbox textarea { min-height: 0; padding: 6px 8px; font-size: .95rem; }
.z-mt-giftbox input.erro { border-color: var(--blood-hi); box-shadow: 0 0 0 2px rgba(184,50,43,.35); }

/* Mestres do Estábulo */
.z-masters { display: grid; grid-template-columns: 1fr 260px; gap: 18px; }
.z-masters h3 { margin: 0 0 12px; font-size: 1.3rem; color: var(--brass-hi); }
.z-masters-rank, .z-masters-first { padding: 14px 16px; background: rgba(0,0,0,.45); border: 1px solid var(--iron-dk); box-shadow: inset 0 0 0 1px rgba(var(--brass-rgb), .2); }
.z-masters-list { list-style: none; margin: 0; padding: 0; }
.z-masters-list li { display: grid; grid-template-columns: 36px 1fr 120px 44px; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 8px 4px; border-bottom: 1px solid rgba(255,255,255,.05); }
.z-masters-list li > a { font-family: var(--f-label); font-size: 1.1rem; }
.z-masters-list small { grid-column: 2; color: var(--ash); }
.z-masters-n { grid-row: 1 / 3; font-family: var(--f-label); font-size: 1.3rem; color: var(--ash); text-align: center; }
.z-masters-bar { grid-row: 1 / 3; grid-column: 3; height: 8px; background: rgba(0,0,0,.6); border: 1px solid var(--iron-dk); }
.z-masters-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--brass-dk), var(--brass-hi)); }
.z-masters-list b { grid-row: 1 / 3; grid-column: 4; text-align: right; font-family: var(--f-label); font-size: 1.2rem; color: var(--brass-hi); }
.z-masters-list li.pos-1 .z-masters-n { color: #f0c45a; text-shadow: 0 0 10px rgba(240,196,90,.6); font-size: 1.6rem; }
.z-masters-list li.pos-2 .z-masters-n { color: #d4d8dc; font-size: 1.45rem; }
.z-masters-list li.pos-3 .z-masters-n { color: #cd8a4a; font-size: 1.35rem; }
.z-masters-first p { color: var(--ash); font-style: italic; }
.z-masters-first ul { list-style: none; margin: 0; padding: 0; }
.z-masters-first li { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.z-masters-first img { image-rendering: pixelated; }
.z-masters-first small { display: block; color: var(--ash); }

/* título no cartão do herói */
.z-hc-estabulo { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 3px 12px; font-family: var(--f-label); font-size: .95rem; color: var(--bone) !important;
	background: rgba(0,0,0,.45); border: 1px solid var(--brass-dk); }
.z-hc-estabulo b { color: var(--brass-hi); }

/* widget Montaria da Semana */
.z-wk-widget { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.z-wk-widget img { width: 64px; height: 64px; image-rendering: pixelated; flex: none; filter: drop-shadow(0 4px 3px rgba(0,0,0,.6)); }
.z-wk-widget b { display: block; font-family: var(--f-label); font-size: 1.05rem; color: var(--brass-hi); }
.z-wk-widget span { color: var(--bone); }
.z-wk-widget s { color: var(--ash); }

/* o velho mago */
.z-mago { position: fixed; left: 18px; bottom: 18px; z-index: 100001; display: flex; align-items: flex-end; gap: 10px; max-width: min(440px, calc(100vw - 36px)); pointer-events: none; }
.z-mago[hidden] { display: none; }
.z-mago.entra { animation: zMagoIn .45s cubic-bezier(.2,.9,.3,1.2) both; }
.z-mago.sai { animation: zMagoOut .4s ease both; }
@keyframes zMagoIn { from { opacity: 0; transform: translateY(24px); } }
@keyframes zMagoOut { to { opacity: 0; transform: translateY(16px); } }
.z-mago-face { flex: none; width: 74px; height: 74px; border-radius: 50%; border: 3px solid var(--iron-dk); box-shadow: 0 0 0 2px var(--brass-dk), 0 6px 14px rgba(0,0,0,.7);
	background: radial-gradient(circle at 50% 120%, rgba(var(--ember-rgb), .45), transparent 60%), #1b1430 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 3 18 30h28z' fill='%233b2f6b'/%3E%3Cpath d='M32 3 25 17l9-2z' fill='%23574aa0'/%3E%3Cellipse cx='32' cy='30' rx='20' ry='4' fill='%232a2150'/%3E%3Ccircle cx='27' cy='14' r='1.6' fill='%23f0d27a'/%3E%3Ccircle cx='36' cy='22' r='1.2' fill='%23f0d27a'/%3E%3Cpath d='M22 32h20v9c0 4-4 7-10 7s-10-3-10-7z' fill='%23e8c9a8'/%3E%3Cpath d='M22 33h20v3H22z' fill='%23d8d4cc'/%3E%3Ccircle cx='27.5' cy='38' r='1.4' fill='%23222'/%3E%3Ccircle cx='36.5' cy='38' r='1.4' fill='%23222'/%3E%3Cpath d='M20 41c2 14 7 21 12 21s10-7 12-21c-3 3-7 4-12 4s-9-1-12-4z' fill='%23ece8e0'/%3E%3Cpath d='M28 44q4 3 8 0' stroke='%23b0a898' stroke-width='1.2' fill='none'/%3E%3C/svg%3E") center / 92% no-repeat; }
.z-mago-fala { position: relative; margin: 0 0 18px; padding: 10px 16px; background: var(--parch) url('../img/pergaminho.jpg') center / 400px; color: var(--ink); font-family: var(--f-body); font-size: 1.05rem; line-height: 1.4;
	box-shadow: inset 0 0 20px rgba(110,62,18,.4), 0 6px 18px rgba(0,0,0,.7); border-radius: 2px; }
.z-mago-fala::before { content: ''; position: absolute; left: -9px; bottom: 12px; border: 9px solid transparent; border-left: 0; border-right-color: #d9c597; }
@media (max-width: 720px) {
	.z-week { flex-wrap: wrap; } .z-week-img img { width: 96px; height: 96px; }
	.z-masters { grid-template-columns: 1fr; }
	.z-masters-list li { grid-template-columns: 30px 1fr 60px 36px; }
	.z-mt-giftbox { grid-template-columns: 1fr; }
	.z-mago { left: 10px; bottom: 10px; } .z-mago-face { width: 56px; height: 56px; }
}

/* ==========================================================================
   GRIMÓRIO DE ZEMLYA — criaturas por descoberta (criaturas.php)
   ========================================================================== */
.z-grim .z-stable-head { padding-bottom: 10px; }
.z-grim-sum { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 22px; margin: 0 auto 14px; padding: 10px 18px; max-width: 640px;
	background: rgba(0,0,0,.45); border: 1px solid var(--brass-dk); font-family: var(--f-label); }
.z-grim-sum > div { text-align: center; }
.z-grim-sum b { font-size: 1.5rem; color: var(--brass-hi); }
.z-grim-sum small { display: block; color: var(--ash); font-size: .8rem; letter-spacing: .08em; }
.z-grim-sumbar { flex: 1 1 100%; height: 8px; background: rgba(0,0,0,.6); border: 1px solid var(--iron-dk); }
.z-grim-sumbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--brass-dk), var(--brass-hi)); box-shadow: 0 0 8px rgba(var(--brass-rgb), .5); }
.z-grim-god { color: #f0c45a; font-size: .9rem; }

.z-grim-convite { margin: 6px auto 26px; max-width: 760px; text-align: center; }
.z-grim-convite h2 { color: #2a1806; text-shadow: none; margin-top: 0; }
.z-grim-convite .z-404-btns { justify-content: center; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* cartões de categoria: pergaminho com silhueta */
.z-grim-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 14px 12px; }
.z-grim-cats[hidden] { display: none; }
.z-grim-cat { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; background: none; border: 0; cursor: pointer; color: var(--bone); font-family: var(--f-label); transition: transform .15s; }
.z-grim-cat:disabled { cursor: default; }
.z-grim-cat:not(:disabled):hover { transform: translateY(-3px); }
.z-grim-cat-art { position: relative; width: 92px; height: 92px; display: flex; align-items: center; justify-content: center;
	background: var(--parch) url('../img/pergaminho.jpg') center / 260px; box-shadow: inset 0 0 18px rgba(110,62,18,.6), 0 0 0 2px #3a2a1a, 0 0 0 4px rgba(var(--brass-rgb), .35), 0 6px 12px rgba(0,0,0,.6);
	clip-path: polygon(2% 4%, 18% 0, 40% 3%, 62% 0, 84% 3%, 100% 1%, 97% 24%, 100% 50%, 97% 76%, 100% 98%, 78% 100%, 55% 97%, 30% 100%, 6% 97%, 0 72%, 3% 46%, 0 20%); }
.z-grim-cat-art::before { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(70,40,15,.35); border-radius: 50%; }
.z-grim-cat-art img { width: 80px; height: 80px; image-rendering: pixelated; opacity: .82; position: relative; }
.z-grim-cat-art .fa { font-size: 2.6rem; color: #3b2a1a; opacity: .8; }
.z-grim-cat:not(:disabled):hover .z-grim-cat-art { box-shadow: inset 0 0 18px rgba(110,62,18,.6), 0 0 0 2px #3a2a1a, 0 0 0 4px var(--brass), 0 0 18px rgba(var(--ember-rgb), .45); }
.z-grim-cat-nome { font-size: 1.02rem; line-height: 1.15; text-align: center; color: var(--brass-hi); }
.z-grim-cat-n { font-size: .85rem; color: var(--ash); }
.z-grim-cat-n b { color: var(--bone); }
.is-fora .z-grim-cat-art { filter: grayscale(.6) brightness(.8); }

.z-grim-lista[hidden], .z-grim-letais[hidden], .z-grim-comp[hidden] { display: none; }
.z-grim-listhead { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.z-grim-listhead h3 { margin: 0; color: var(--brass-hi); font-size: 1.4rem; }
.z-grim-listhead .z-btn { padding: 4px 12px; font-size: .9rem; }
.z-grim-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.z-grim-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 8px; cursor: pointer; color: var(--bone); font-family: var(--f-label);
	background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.6)), var(--tx-plank) center / 420px; border: 2px solid var(--iron-dk);
	box-shadow: inset 0 0 0 1px rgba(var(--brass-rgb), .2), 0 4px 10px rgba(0,0,0,.55); transition: transform .15s, box-shadow .15s; }
.z-grim-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--brass), 0 0 14px rgba(var(--ember-rgb), .35), 0 6px 14px rgba(0,0,0,.6); }
.z-grim-card-img { width: 88px; height: 80px; display: flex; align-items: flex-end; justify-content: center; }
.z-grim-card-img img { width: 96px; height: 96px; image-rendering: pixelated; margin-bottom: -8px; filter: drop-shadow(0 4px 3px rgba(0,0,0,.7)); }
.z-grim-card-n { font-size: .95rem; line-height: 1.15; text-align: center; min-height: 2.3em; display: flex; align-items: center; }
.z-grim-card-st { font-size: .78rem; color: var(--ash); }
.z-grim-card.nv-1 .z-grim-card-st { color: #9fb6c9; } .z-grim-card.nv-2 .z-grim-card-st { color: #e0a05a; } .z-grim-card.nv-3 .z-grim-card-st, .z-grim-card.nv-4 .z-grim-card-st, .z-grim-card.nv-5 .z-grim-card-st, .z-grim-card.nv-6 .z-grim-card-st { color: #e08a8a; }
.z-grim-card.nv-1 .z-grim-card-img img { filter: grayscale(.55) brightness(.85) drop-shadow(0 4px 3px rgba(0,0,0,.7)); }
.z-grim-card.is-boss { box-shadow: inset 0 0 0 1px #b8322b, 0 4px 10px rgba(0,0,0,.55); }
.z-grim-card.is-nao { cursor: help; background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.75)), var(--tx-plank) center / 420px; }
.z-grim-card.is-nao .z-grim-card-img img { filter: drop-shadow(0 0 6px rgba(var(--ember-rgb), .25)); opacity: .9; }
.z-grim-card.treme { animation: zGrimTreme .35s; }
@keyframes zGrimTreme { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.z-grim-q { font-family: var(--f-label); font-size: 1.15rem; letter-spacing: .3em; color: var(--ash); padding-left: .3em; }
.z-grim-medal { position: absolute; top: 6px; right: 8px; color: #f0c45a; text-shadow: 0 0 8px rgba(240,196,90,.7); }

/* página da criatura */
.z-grim-modal .z-mt-card { grid-template-columns: 280px 1fr; }
.z-grim-modal.is-boss .z-mt-card { box-shadow: inset 0 0 60px rgba(110,62,18,.45), 0 0 0 3px var(--iron-dk), 0 0 0 5px #8e1c1c, 0 20px 50px rgba(0,0,0,.8); }
.z-grim-modal .z-mt-stage { --rc: var(--brass); align-items: flex-start; padding-top: 70px; }
.z-grim-modal .z-mt-halo { bottom: auto; top: 285px; }
.z-grim-modal.nv-1 .z-mt-stage img { filter: grayscale(.5) brightness(.85); }
.z-grim-stage-tag { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); font-family: var(--f-label); font-size: .85rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brass-hi);
	padding: 3px 12px; background: rgba(0,0,0,.6); border: 1px solid var(--brass-dk); white-space: nowrap; }
.z-grim-modal .z-mt-info h4 { margin-top: 16px; }
.z-grim-prog { margin: -4px 0 12px; }
.z-grim-steps { display: flex; gap: 4px; margin-bottom: 4px; }
.z-grim-steps span { flex: 1; height: 7px; background: rgba(60,35,10,.2); border: 1px solid rgba(70,40,15,.4); }
.z-grim-steps span.on { background: linear-gradient(90deg, #8e1c1c, #c0302a); border-color: #5a0f0f; }
.z-grim-prog small { font-family: var(--f-label); color: var(--ink-soft); }
.z-grim-falas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.z-grim-falas q { font-style: italic; font-size: .92rem; padding: 3px 10px; background: rgba(255,255,255,.35); border: 1px solid rgba(90,60,30,.35); border-radius: 12px 12px 12px 2px; }
.z-grim-lock { margin: 4px 0 6px; padding: 7px 12px; font-family: var(--f-label); font-size: .92rem; color: var(--ink-soft); background: repeating-linear-gradient(45deg, rgba(60,35,10,.08) 0 8px, rgba(60,35,10,.15) 8px 16px); border: 1px dashed rgba(90,60,30,.45); }
.z-grim-lock .fa { color: var(--blood); margin-right: 4px; }
.z-grim-vazio { font-style: italic; color: var(--ink-soft); margin: 4px 0 8px; }
.z-grim-loc li small { color: var(--ink-soft); margin-left: 6px; }
.z-grim-link a { color: var(--blood); font-weight: 700; }
.z-grim-morte { color: #8e1c1c !important; }
.z-el { display: inline-block; padding: 1px 8px; font-family: var(--f-label); font-size: .85rem; border-radius: 2px; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.5); background: #6b6157; }
.z-el.el-fire { background: #c2461b; } .z-el.el-ice { background: #3d8bb8; } .z-el.el-energy { background: #8a4fc4; } .z-el.el-earth { background: #4f8a2c; }
.z-el.el-holy { background: #c9a227; } .z-el.el-death { background: #3e2a4a; } .z-el.el-physical { background: #7a5a3a; } .z-el.el-lifedrain { background: #a01e50; }
.z-el.el-manadrain { background: #2d4fa0; } .z-el.el-drown { background: #2b7f86; }
.z-grim-danos { margin: 0 0 6px; }
.z-grim-atq, .z-grim-bh { list-style: none; margin: 0 0 6px; padding: 0; }
.z-grim-atq li, .z-grim-bh li { padding: 3px 0; border-bottom: 1px dotted rgba(90,60,30,.3); }
.z-grim-bh li::before { content: '◆ '; color: var(--blood); font-size: .7em; vertical-align: 2px; }
.z-grim-el { display: grid; gap: 4px; }
.z-grim-el-l { display: grid; grid-template-columns: 96px 1fr 62px; align-items: center; gap: 8px; }
.z-grim-el-l .z-el { text-align: center; }
.z-grim-el-l i { position: relative; height: 10px; background: rgba(60,35,10,.15); border: 1px solid rgba(70,40,15,.35); }
.z-grim-el-l i::after { content: ''; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: rgba(70,40,15,.6); }
.z-grim-el-l i b { position: absolute; top: 0; bottom: 0; }
.z-grim-el-l.fraco i b { background: linear-gradient(90deg, #c0302a, #8e1c1c); }
.z-grim-el-l.forte i b, .z-grim-el-l.imune i b { background: linear-gradient(90deg, #3d6b2a, #5f8f43); }
.z-grim-el-l em { font-style: normal; font-family: var(--f-label); text-align: right; }
.z-grim-el-l.fraco em { color: #8e1c1c; font-weight: 700; } .z-grim-el-l.imune em, .z-grim-el-l.forte em { color: #3d6b2a; font-weight: 700; }
.z-grim-legenda { color: var(--ink-soft); }
.z-grim-imu { margin: 8px 0 0; font-family: var(--f-label); }
.z-loot-r { margin-left: auto; font-style: normal; font-family: var(--f-label); font-size: .82rem; padding: 1px 8px; white-space: nowrap; background: rgba(60,35,10,.12); }
.z-loot-r.r-sempre, .z-loot-r.r-comum { color: #4a4036; } .z-loot-r.r-incomum { color: #3d6b2a; } .z-loot-r.r-semi { color: #2d6fa0; }
.z-loot-r.r-raro { color: #7a3fb0; font-weight: 700; } .z-loot-r.r-mraro { color: #b8322b; font-weight: 700; }
.z-grim-loot em { margin-left: auto; font-style: normal; color: var(--ink-soft); font-family: var(--f-label); }

.z-grim-letais h3 { color: var(--brass-hi); }
.z-grim-letais .z-masters-list li { grid-template-columns: 36px 1fr 160px 50px; }
.z-grim-let-n { grid-row: 1 / 3; display: flex; align-items: center; gap: 10px; font-family: var(--f-label); font-size: 1.1rem; }
.z-grim-let-n img { image-rendering: pixelated; }

.z-grim-comp-sel { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 14px; font-family: var(--f-label); font-size: 1.4rem; color: var(--brass); }
.z-grim-comp-sel select { min-width: 200px; }
.z-grim-ct { max-width: 640px; margin: 0 auto; }
.z-grim-ct td { text-align: center; width: 40%; font-family: var(--f-label); }
.z-grim-ct th { text-align: center; width: 20%; color: var(--ash); font-weight: 400; background: none; font-size: .9rem; }
.z-grim-ct tr:first-child td { vertical-align: bottom; }
.z-grim-ct img { display: block; margin: 0 auto 4px; width: 96px; height: 96px; image-rendering: pixelated; }
.z-grim-ct td.melhor { color: #8fd27a; font-weight: 700; }
.z-grim-ct .fa-lock { color: var(--ash); opacity: .6; }

/* o velho caçador */
.z-cacador .z-mago-face { background: radial-gradient(circle at 50% 120%, rgba(120,90,40,.5), transparent 60%), #1f2418 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M10 40 Q12 8 32 6 Q52 8 54 40 L46 34 Q32 22 18 34z' fill='%233d3a22'/%3E%3Cpath d='M32 6 Q44 8 50 22 L42 18z' fill='%23544f30'/%3E%3Cpath d='M20 30h24v12c0 5-5 8-12 8s-12-3-12-8z' fill='%23d4a882'/%3E%3Cpath d='M22 33h8v2h-8zM34 33h8v2h-8z' fill='%235a3c22'/%3E%3Ccircle cx='26' cy='37' r='1.5' fill='%23222'/%3E%3Ccircle cx='38' cy='37' r='1.5' fill='%23222'/%3E%3Cpath d='M30 34 L44 44' stroke='%238a5a3a' stroke-width='1.4'/%3E%3Cpath d='M20 43c1 11 6 17 12 17s11-6 12-17c-3 3-7 4-12 4s-9-1-12-4z' fill='%238a6a4a'/%3E%3Cpath d='M28 46q4 2 8 0' stroke='%235a3c22' stroke-width='1.2' fill='none'/%3E%3Cpath d='M50 12 L60 54' stroke='%237a5530' stroke-width='2.4'/%3E%3Cpath d='M50 12 Q64 33 60 54' stroke='%23c9b48a' stroke-width='.8' fill='none'/%3E%3C/svg%3E") center / 92% no-repeat; }
@media (max-width: 720px) {
	.z-grim-cats { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
	.z-grim-cat-art { width: 76px; height: 76px; } .z-grim-cat-art img { width: 64px; height: 64px; }
	.z-grim-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
	.z-grim-modal .z-mt-card { grid-template-columns: 1fr; }
	.z-grim-modal .z-mt-stage { padding-top: 50px; min-height: 240px; }
	.z-grim-modal .z-mt-halo { top: 200px; }
	.z-grim-letais .z-masters-list li { grid-template-columns: 30px 1fr 60px 40px; }
	.z-grim-el-l { grid-template-columns: 80px 1fr 52px; }
}
.z-grim-convite .z-scroll a.z-btn { color: #f3e3bf !important; text-shadow: 0 2px 0 #000; }
.z-grim-card.is-nao .z-grim-card-img img { filter: drop-shadow(1px 0 0 rgba(255,225,180,.35)) drop-shadow(-1px 0 0 rgba(255,225,180,.35)) drop-shadow(0 1px 0 rgba(255,225,180,.35)) drop-shadow(0 -1px 0 rgba(255,225,180,.35)) drop-shadow(0 0 8px rgba(var(--ember-rgb), .35)); opacity: 1; }
.z-grim-card.is-nao:hover .z-grim-card-img img { filter: drop-shadow(1px 0 0 rgba(255,225,180,.6)) drop-shadow(-1px 0 0 rgba(255,225,180,.6)) drop-shadow(0 1px 0 rgba(255,225,180,.6)) drop-shadow(0 -1px 0 rgba(255,225,180,.6)) drop-shadow(0 0 12px rgba(var(--ember-rgb), .6)); }

/* ---------- Grimório v3 ---------- */
.z-grim-sum .z-grim-ouro b { color: #f0c45a; text-shadow: 0 0 10px rgba(240,196,90,.6); }
/* página dourada (maestria) */
.z-grim-card.is-ouro { background: radial-gradient(ellipse at 50% 35%, rgba(240,196,90,.28), transparent 65%), linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.55)), var(--tx-plank) center / 420px;
	box-shadow: inset 0 0 0 2px #c9a227, inset 0 0 18px rgba(240,196,90,.35), 0 0 16px rgba(240,196,90,.35), 0 4px 10px rgba(0,0,0,.55); }
.z-grim-card.is-ouro::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255,240,190,.35) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat; animation: zGrimBrilho 4.5s ease-in-out infinite; }
@keyframes zGrimBrilho { 0%, 60% { background-position: -150% 0; } 100% { background-position: 150% 0; } }
.z-grim-card.is-ouro .z-grim-card-n { color: #f6dc8a; }
.z-grim-modal.is-ouro .z-mt-card { box-shadow: inset 0 0 60px rgba(110,62,18,.45), 0 0 0 3px var(--iron-dk), 0 0 0 5px #c9a227, 0 0 40px rgba(240,196,90,.45), 0 20px 50px rgba(0,0,0,.8); }
.z-grim-modal.is-ouro .z-grim-stage-tag { color: #fff3c4; border-color: #c9a227; background: linear-gradient(180deg, #8a6a18, #4a3608); }
/* páginas envelhecem com os abates */
.z-grim-modal .z-mt-info { position: relative; }
.z-grim-modal.idade-1 .z-mt-info { background-image: radial-gradient(circle at 88% 12%, rgba(110,60,20,.16) 0 34px, transparent 36px); }
.z-grim-modal.idade-2 .z-mt-info { background-image: radial-gradient(circle at 88% 12%, rgba(110,60,20,.2) 0 40px, transparent 42px), radial-gradient(ellipse at 10% 90%, rgba(90,50,15,.18) 0 60px, transparent 64px); }
.z-grim-modal.idade-3 .z-mt-info, .z-grim-modal.idade-4 .z-mt-info { background-image:
	url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='120'%3E%3Cg stroke='%235a2a10' stroke-opacity='.28' stroke-width='3' stroke-linecap='round' fill='none'%3E%3Cpath d='M20 10 Q60 50 90 110'/%3E%3Cpath d='M42 6 Q80 48 110 104'/%3E%3Cpath d='M64 4 Q98 44 128 96'/%3E%3C/g%3E%3C/svg%3E"),
	radial-gradient(circle at 88% 12%, rgba(110,60,20,.22) 0 44px, transparent 46px), radial-gradient(ellipse at 10% 90%, rgba(90,50,15,.2) 0 70px, transparent 74px);
	background-repeat: no-repeat; background-position: right 14px top 60px, 0 0, 0 0; }
.z-grim-modal.idade-4 .z-mt-info { box-shadow: inset 0 0 70px rgba(80,40,10,.45); }
.z-grim-modal.idade-4 .z-mt-info::before { content: 'Anotações de campo'; position: absolute; top: 40%; right: -6px; transform: rotate(90deg); transform-origin: right top; font-family: var(--f-label); font-size: .8rem; letter-spacing: .3em; color: rgba(90,50,15,.45); }
.z-grim-falas small { flex-basis: 100%; font-family: var(--f-label); color: var(--ink-soft); }
.z-grim-falas q.nao { color: rgba(90,60,30,.5); letter-spacing: .3em; }
.z-grim-el-l.travado em { color: var(--ink-soft); opacity: .6; }
.z-grim-el-l.travado .z-el { opacity: .45; }
.z-grim-var a { font-weight: 700; }

/* regiões */
.z-grim-regs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.z-grim-regs[hidden], .z-grim-des[hidden], .z-grim-est[hidden] { display: none; }
.z-grim-reg { display: grid; grid-template-columns: 40px 1fr auto; grid-template-rows: auto auto auto; column-gap: 10px; align-items: center; text-align: left; padding: 12px 14px; cursor: pointer; color: var(--bone);
	background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.6)), var(--tx-plank) center / 420px; border: 2px solid var(--iron-dk); box-shadow: inset 0 0 0 1px rgba(var(--brass-rgb), .25), 0 4px 10px rgba(0,0,0,.5); font-family: var(--f-label); }
.z-grim-reg:hover { box-shadow: inset 0 0 0 1px var(--brass), 0 0 14px rgba(var(--ember-rgb), .35); }
.z-grim-reg > .fa { grid-row: 1 / 4; font-size: 1.8rem; color: var(--brass); }
.z-grim-reg b { font-size: 1.15rem; color: var(--brass-hi); }
.z-grim-reg small { grid-column: 2 / 4; color: var(--ash); font-size: .8rem; }
.z-grim-reg em { grid-row: 1; grid-column: 3; font-style: normal; color: var(--bone); }
.z-grim-reg .z-grim-reg-bar { grid-column: 2 / 4; }
.z-grim-reg-bar { display: block; height: 7px; margin-top: 4px; background: rgba(0,0,0,.55); border: 1px solid var(--iron-dk); }
.z-grim-reg-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--brass-dk), var(--brass-hi)); }

/* desafios */
.z-grim-des h3 { color: var(--brass-hi); font-size: 1.3rem; margin: 22px 0 10px; }
.z-grim-des h3 small { font-size: .8rem; color: var(--ash); margin-left: 6px; }
.z-grim-cacada { display: flex; gap: 22px; align-items: center; padding: 16px 20px; background: radial-gradient(ellipse at 15% 50%, rgba(var(--ember-rgb), .22), transparent 55%), linear-gradient(90deg, rgba(0,0,0,.3), rgba(0,0,0,.65)), var(--tx-plank) center / 500px;
	border: 2px solid var(--iron-dk); box-shadow: inset 0 0 0 1px var(--brass-dk), 0 0 24px rgba(var(--ember-rgb), .2); }
.z-grim-cacada[hidden] { display: none; }
.z-grim-cac-img { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.z-grim-cac-img img { width: 128px; height: 128px; image-rendering: pixelated; animation: z-float 4s ease-in-out infinite; }
.z-grim-cac-img img.sombra { filter: drop-shadow(0 0 1px rgba(255,225,180,.6)) drop-shadow(0 0 14px rgba(var(--ember-rgb), .6)); }
.z-grim-cac-txt h3 { margin: 4px 0 8px !important; font-size: 1.6rem !important; }
.z-grim-cac-txt ul { margin: 0 0 8px; padding-left: 18px; color: var(--bone); }
.z-grim-cac-txt li { margin: 2px 0; font-style: italic; }
.z-grim-cac-premio { margin: 0; color: var(--brass-hi); font-family: var(--f-label); }
.z-grim-cac-quem { margin: 6px 0 0; color: var(--ash); font-size: .92rem; }
.z-grim-contratos ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.z-grim-contratos li { display: grid; grid-template-columns: 34px 1fr auto auto; gap: 12px; align-items: center; padding: 10px 14px; background: rgba(0,0,0,.45); border: 1px solid var(--iron-dk); font-family: var(--f-label); }
.z-grim-contratos li > .fa { font-size: 1.4rem; color: var(--brass); text-align: center; }
.z-grim-contratos li.ok { box-shadow: inset 3px 0 0 #5f8f43; }
.z-grim-contratos em { font-style: normal; color: var(--brass-hi); }
.z-grim-contratos .z-btn, .z-grim-selo .z-btn { padding: 4px 12px; font-size: .88rem; }
.z-grim-pego { color: #8fd27a; font-family: var(--f-label); font-size: .9rem; }
#grSel { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.z-grim-selo { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 10px; text-align: center; background: rgba(0,0,0,.45); border: 1px solid var(--iron-dk); font-family: var(--f-label); }
.z-grim-selo-ic { width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 1.8rem; color: #6b6157; background: rgba(0,0,0,.5); box-shadow: inset 0 0 0 2px #3a3633; }
.z-grim-selo.ok .z-grim-selo-ic { color: #fff3c4; background: radial-gradient(circle at 40% 35%, #f0c45a, #8a6a18); box-shadow: inset 0 0 0 2px #c9a227, 0 0 16px rgba(240,196,90,.5); }
.z-grim-selo b { color: var(--brass-hi); }
.z-grim-selo small { color: var(--ash); font-size: .8rem; }
.z-grim-selo .z-grim-reg-bar { width: 100%; }
.z-grim-selo-p { font-size: .76rem !important; }

/* estrelas do mês */
.z-grim-est { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.z-grim-est-col { padding: 12px 14px; background: rgba(0,0,0,.45); border: 1px solid var(--iron-dk); }
.z-grim-est-col h3 { margin: 0 0 8px; font-size: 1.15rem; color: var(--brass-hi); }
.z-grim-est-col ol { list-style: none; margin: 0; padding: 0; }
.z-grim-est-col li { display: grid; grid-template-columns: 24px 1fr auto auto; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-family: var(--f-label); }
.z-grim-est-col li small { color: var(--ash); }
.z-grim-est-col li b { color: var(--brass-hi); }
.z-grim-est-col li.z-grim-estrela { color: #f0c45a; }
.z-grim-est-col li.z-grim-estrela .fa { text-shadow: 0 0 8px rgba(240,196,90,.8); }
.z-grim-est-nota { grid-column: 1 / -1; color: var(--ash); font-size: .88rem; text-align: center; }

/* selos no perfil */
.z-hc-selos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.z-selo { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; font-family: var(--f-label); font-size: .85rem; color: #fff3c4 !important;
	background: linear-gradient(180deg, #8a6a18, #4a3608); border: 1px solid #c9a227; box-shadow: 0 0 8px rgba(240,196,90,.3); }
@media (max-width: 720px) {
	.z-grim-est { grid-template-columns: 1fr; }
	.z-grim-cacada { flex-direction: column; text-align: center; }
	.z-grim-contratos li { grid-template-columns: 28px 1fr auto; } .z-grim-contratos li .z-btn, .z-grim-contratos li .z-grim-pego { grid-column: 2 / 4; justify-self: start; }
}

/* ---------- Grimório: elementos em ícones + loot em cartas ---------- */
.z-grim-elic { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 4px 0 6px; }
.z-elic { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 2px 6px; background: rgba(60,35,10,.1); border: 1px solid rgba(90,60,30,.25); cursor: help; }
.z-elic svg { width: 34px; height: 34px; color: #5a4632; filter: drop-shadow(0 1px 0 rgba(255,255,255,.4)); }
.z-elic b { font-family: var(--f-label); font-size: .95rem; color: var(--ink-soft); }
.z-elic.el-physical svg { color: #6e5236; } .z-elic.el-fire svg { color: #c2461b; } .z-elic.el-ice svg { color: #2f7fae; } .z-elic.el-earth svg { color: #3f7a24; }
.z-elic.el-energy svg { color: #7a3fb8; } .z-elic.el-holy svg { color: #b08a12; } .z-elic.el-death svg { color: #3e2a4a; }
.z-elic.fraco { background: rgba(184,50,43,.12); border-color: rgba(184,50,43,.4); } .z-elic.fraco b { color: #a3241d; }
.z-elic.forte { background: rgba(61,107,42,.1); border-color: rgba(61,107,42,.35); } .z-elic.forte b { color: #2f5f1e; }
.z-elic.imune { background: rgba(61,107,42,.2); border-color: #3d6b2a; } .z-elic.imune b { color: #1f4a12; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; }
.z-elic.travado svg { opacity: .25; } .z-elic.travado b { opacity: .55; }

.z-loot-grid { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.z-loot-card { position: relative; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; text-decoration: none !important;
	background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.35), rgba(60,35,10,.12) 70%); border: 2px solid rgba(90,60,30,.45);
	box-shadow: inset 0 0 6px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.25); transition: transform .12s, box-shadow .12s; }
.z-loot-card img { width: 32px; height: 32px; image-rendering: pixelated; }
.z-loot-card:hover { transform: translateY(-2px) scale(1.06); z-index: 3; box-shadow: inset 0 0 6px rgba(0,0,0,.2), 0 0 0 1px var(--blood), 0 4px 8px rgba(0,0,0,.35); }
.z-loot-q { position: absolute; right: 2px; bottom: 0; font-family: var(--f-label); font-size: .72rem; font-weight: 700; color: #fff; text-shadow: 0 0 2px #000, 0 1px 0 #000; }
.z-loot-card.r-sempre, .z-loot-card.r-comum { border-color: #8a7a62; }
.z-loot-card.r-incomum { border-color: #4f8a2c; }
.z-loot-card.r-semi { border-color: #2d6fa0; }
.z-loot-card.r-raro { border-color: #7a3fb0; box-shadow: inset 0 0 8px rgba(122,63,176,.35), 0 0 6px rgba(122,63,176,.35); }
.z-loot-card.r-mraro { border-color: #c0302a; box-shadow: inset 0 0 8px rgba(192,48,42,.35), 0 0 8px rgba(240,160,60,.45); animation: zLootBrilha 2.4s ease-in-out infinite; }
@keyframes zLootBrilha { 50% { box-shadow: inset 0 0 10px rgba(192,48,42,.45), 0 0 14px rgba(240,180,60,.7); } }
.z-loot-card.r-visto { border-color: #8a6a3a; }
.z-loot-leg { display: flex; flex-wrap: wrap; gap: 4px 12px; font-family: var(--f-label); font-size: .78rem; margin-bottom: 6px; }
.z-loot-leg span::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 4px; vertical-align: -1px; border: 2px solid currentColor; }
.z-loot-leg .r-sempre, .z-loot-leg .r-comum { color: #8a7a62; } .z-loot-leg .r-incomum { color: #4f8a2c; } .z-loot-leg .r-semi { color: #2d6fa0; }
.z-loot-leg .r-raro { color: #7a3fb0; } .z-loot-leg .r-mraro { color: #c0302a; }

/* dica ao passar o mouse (nome do item, detalhes do elemento) */
.z-grim-modal [data-tip] { position: relative; }
.z-grim-modal [data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) translateY(4px); z-index: 20;
	padding: 5px 10px; white-space: nowrap; font-family: var(--f-label); font-size: .85rem; color: #f3e3bf; background: rgba(20,12,6,.95); border: 1px solid var(--brass-dk);
	box-shadow: 0 4px 10px rgba(0,0,0,.6); opacity: 0; pointer-events: none; transition: opacity .12s, transform .12s; }
.z-grim-modal [data-tip]::before { content: ''; position: absolute; left: 50%; bottom: calc(100% + 2px); transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--brass-dk); opacity: 0; transition: opacity .12s; z-index: 20; }
.z-grim-modal [data-tip]:hover::after, .z-grim-modal [data-tip]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.z-grim-modal [data-tip]:hover::before, .z-grim-modal [data-tip]:focus-visible::before { opacity: 1; }
@media (max-width: 720px) {
	.z-grim-elic { grid-template-columns: repeat(4, 1fr); }
	.z-elic svg { width: 28px; height: 28px; }
}
/* listas grandes: o navegador só desenha as cartas que estão na tela */
.z-mount, .z-grim-card { content-visibility: auto; contain-intrinsic-size: auto 170px; }
.z-mount-img img, .z-grim-card-img img, .z-mt-stage img, .z-loot-card img { -webkit-user-drag: none; user-select: none; }
.z-grim-cat-art img { opacity: 1 !important; filter: drop-shadow(0 3px 2px rgba(40,20,5,.55)); }
.is-fora .z-grim-cat-art { filter: none; }
.is-fora .z-grim-cat-art img { filter: grayscale(.35) drop-shadow(0 3px 2px rgba(40,20,5,.55)); }

/* ==========================================================================
   TESOURO DE ZEMLYA — compra de moedas (moedas.php)
   ========================================================================== */
.z-tz { --tz-c: var(--brass); }
.z-tz-grade { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: stretch; margin: 6px 0 14px; }
.z-tz-pac { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 22px 12px 16px;
	background: linear-gradient(180deg, rgba(42,27,16,.92), rgba(16,10,6,.95)); border: 1px solid var(--brass-dk);
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.7), 0 6px 18px rgba(0,0,0,.45); transition: transform .18s, box-shadow .18s, border-color .18s; }
.z-tz-pac:hover { transform: translateY(-3px); border-color: var(--tz-c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.7), 0 10px 26px rgba(0,0,0,.55), 0 0 22px rgba(201,162,74,.18); }
.z-tz-pac.t3 { --tz-c: #d9b35a; } .z-tz-pac.t4 { --tz-c: #e8c46a; } .z-tz-pac.t5 { --tz-c: #f3d27a; }
.z-tz-pac.t5 { border-color: var(--brass); background: radial-gradient(120% 70% at 50% 0%, rgba(240,180,60,.16), transparent 60%), linear-gradient(180deg, rgba(48,31,16,.95), rgba(16,10,6,.97)); }
.z-tz-pac h3 { margin: 0; font-family: var(--f-title); font-size: 1.15rem; color: var(--brass-hi); letter-spacing: .04em; }
.z-tz-fita { position: absolute; top: 10px; right: -6px; padding: 3px 10px 3px 12px; font-family: var(--f-label); font-size: .95rem; color: #1a1006;
	background: linear-gradient(180deg, #f3d27a, #c9a24a); box-shadow: 0 2px 0 #000; clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%); }
.z-tz-pilha { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 74px; margin: 4px 0 2px; }
.z-tz-pilha i { display: block; width: 22px; border-radius: 50% / 5px; height: calc(14px + var(--h, 0px));
	background: repeating-linear-gradient(180deg, #f1cf6e 0 2px, #b8862a 2px 4px, #7a5313 4px 5px);
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.55), 0 2px 0 rgba(0,0,0,.6); position: relative; }
.z-tz-pilha i::before { content: ""; position: absolute; left: 0; right: 0; top: -4px; height: 8px; border-radius: 50%;
	background: radial-gradient(circle at 40% 40%, #fff3c4 0 18%, #e6b94a 45%, #9a6a17 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.45); }
.z-tz-pilha.t1 i { --h: 6px; }
.z-tz-pilha.t2 i:nth-child(1) { --h: 10px; } .z-tz-pilha.t2 i:nth-child(2) { --h: 20px; }
.z-tz-pilha.t3 i:nth-child(1) { --h: 12px; } .z-tz-pilha.t3 i:nth-child(2) { --h: 30px; } .z-tz-pilha.t3 i:nth-child(3) { --h: 18px; }
.z-tz-pilha.t4 i:nth-child(1) { --h: 16px; } .z-tz-pilha.t4 i:nth-child(2) { --h: 38px; } .z-tz-pilha.t4 i:nth-child(3) { --h: 46px; } .z-tz-pilha.t4 i:nth-child(4) { --h: 24px; }
.z-tz-pilha.t5 i:nth-child(1) { --h: 22px; } .z-tz-pilha.t5 i:nth-child(2) { --h: 44px; } .z-tz-pilha.t5 i:nth-child(3) { --h: 56px; } .z-tz-pilha.t5 i:nth-child(4) { --h: 40px; } .z-tz-pilha.t5 i:nth-child(5) { --h: 26px; }
.z-tz-pac.t5 .z-tz-pilha { filter: drop-shadow(0 0 10px rgba(240,180,60,.35)); }
.z-tz-total { font-family: var(--f-label); color: var(--bone); line-height: 1; }
.z-tz-total b { display: block; font-family: var(--f-display); font-size: clamp(1.6rem, 2.6vw, 2.2rem); color: var(--tz-c); text-shadow: 0 2px 0 #000; }
.z-tz-conta { min-height: 1.4em; font-size: .92rem; color: var(--ash); }
.z-tz-conta em { font-style: normal; color: #cfe8b5; }
.z-tz-preco { margin-top: auto; padding-top: 8px; font-family: var(--f-label); font-size: 1.35rem; color: var(--bone); border-top: 1px solid rgba(125,97,37,.45); width: 100%; }
.z-tz-pac .z-btn { width: 100%; justify-content: center; }
.z-tz-pac .z-btn.is-off { opacity: .5; cursor: default; }
.z-tz-aceite { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 22px; color: var(--ash); cursor: pointer; }
.z-tz-aceite input { width: 18px; height: 18px; accent-color: var(--brass); }
.z-tz-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.z-tz-info > div { padding: 12px 14px; background: rgba(0,0,0,.4); border: 1px solid rgba(125,97,37,.5); }
.z-tz-info h4 { margin: 0 0 4px; font-family: var(--f-label); color: var(--brass-hi); font-size: 1.05rem; }
.z-tz-info p { margin: 0; color: var(--ash); font-size: .95rem; }
.z-tz-termos { margin: 0 0 18px; padding: 10px 14px; background: rgba(0,0,0,.35); border: 1px solid rgba(125,97,37,.4); color: var(--ash); }
.z-tz-termos summary { cursor: pointer; font-family: var(--f-label); color: var(--brass); }
.z-tz-termos ul { margin: 8px 0 0; padding-left: 18px; } .z-tz-termos li { margin: 4px 0; }
.z-tz-hist h3 { font-family: var(--f-title); color: var(--brass-hi); margin: 0 0 8px; }
.z-tz-hist table { width: 100%; border-collapse: collapse; background: rgba(0,0,0,.4); }
.z-tz-hist th, .z-tz-hist td { padding: 7px 10px; text-align: left; border-bottom: 1px solid rgba(125,97,37,.3); }
.z-tz-hist th { font-family: var(--f-label); color: var(--brass); font-weight: normal; }
.z-tz-st { display: inline-block; padding: 1px 8px; font-size: .88rem; border: 1px solid; }
.z-tz-st.st-pago { color: #cfe8b5; border-color: #5f8f43; } .z-tz-st.st-pendente { color: var(--brass-hi); border-color: var(--brass-dk); }
.z-tz-st.st-cancelado { color: var(--ash); border-color: var(--iron-hi); } .z-tz-st.st-estornado { color: #f1c0b5; border-color: var(--blood-hi); }
.z-tz-indo { text-align: center; padding: 30px 16px; background: rgba(0,0,0,.45); border: 1px solid var(--brass-dk); }
.z-tz-indo h2 { font-family: var(--f-title); color: var(--brass-hi); margin: 8px 0; }
.z-tz-indo form { margin: 14px 0 8px; } .z-tz-indo small { color: var(--ash); }
@media (max-width: 1080px) { .z-tz-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .z-tz-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } .z-tz-info { grid-template-columns: 1fr; } .z-tz-hist th:nth-child(2), .z-tz-hist td:nth-child(2) { display: none; } }
@media (max-width: 420px) { .z-tz-grade { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .z-tz-pac { transition: none; } .z-tz-pac:hover { transform: none; } }

/* Tesouro — balcão com slider */
.z-tz-balcao { position: relative; max-width: 860px; margin: 6px auto 14px; padding: 26px 28px 18px;
	background: radial-gradient(110% 80% at 50% 0%, rgba(240,180,60,.10), transparent 60%), linear-gradient(180deg, rgba(42,27,16,.94), rgba(14,9,5,.97));
	border: 1px solid var(--brass-dk); box-shadow: inset 0 0 0 1px rgba(0,0,0,.7), 0 10px 30px rgba(0,0,0,.5); transition: border-color .3s; }
.z-tz-balcao[data-faixa="5"] { border-color: #b8933f; } .z-tz-balcao[data-faixa="10"] { border-color: #d9b35a; }
.z-tz-balcao[data-faixa="15"] { border-color: var(--brass-hi); box-shadow: inset 0 0 0 1px rgba(0,0,0,.7), 0 10px 30px rgba(0,0,0,.5), 0 0 28px rgba(240,180,60,.18); }
.z-tz-balcao .z-tz-fita { top: 16px; font-size: 1.15rem; padding: 4px 14px 4px 16px; }
.z-tz-fita.pulsa { animation: zTzPulsa .45s ease-out; }
@keyframes zTzPulsa { 0% { transform: scale(1.35); filter: brightness(1.5); } 100% { transform: scale(1); filter: none; } }
.z-tz-vitrine { display: flex; align-items: flex-end; justify-content: center; gap: 28px; min-height: 120px; }
.z-tz-pilha.grande { height: 96px; gap: 4px; margin: 0; }
.z-tz-pilha.grande i { width: 30px; transition: height .22s ease-out; }
.z-tz-balcao[data-faixa="15"] .z-tz-pilha { filter: drop-shadow(0 0 12px rgba(240,180,60,.4)); }
.z-tz-leitura { text-align: left; min-width: 260px; }
.z-tz-leitura .z-tz-total b { display: inline; font-size: clamp(2.4rem, 5vw, 3.4rem); color: var(--brass-hi); font-variant-numeric: tabular-nums; }
.z-tz-leitura .z-tz-total { font-size: 1.2rem; }
.z-tz-leitura .z-tz-conta { font-size: 1.05rem; margin-top: 4px; }
.z-tz-dica { min-height: 1.3em; margin-top: 4px; font-size: .92rem; color: var(--ember); }
.z-tz-regua { display: flex; align-items: flex-start; gap: 12px; margin: 22px 0 6px; }
.z-tz-mm { flex: 0 0 auto; width: 38px; height: 38px; margin-top: 0; font-size: 1.4rem; line-height: 1; color: var(--brass-hi); cursor: pointer;
	background: rgba(0,0,0,.5); border: 1px solid var(--brass-dk); }
.z-tz-mm:hover { border-color: var(--brass); color: #fff; }
.z-tz-trilho { position: relative; flex: 1; padding-bottom: 38px; }
.z-tz-trilho input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 38px; margin: 0; background: transparent; cursor: pointer; }
.z-tz-trilho input[type=range]::-webkit-slider-runnable-track { height: 10px; border: 1px solid #000;
	background: linear-gradient(90deg, #9a6a17, #f1cf6e var(--p), rgba(0,0,0,.6) var(--p)); box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }
.z-tz-trilho input[type=range]::-moz-range-track { height: 10px; border: 1px solid #000; background: rgba(0,0,0,.6); }
.z-tz-trilho input[type=range]::-moz-range-progress { height: 10px; background: linear-gradient(90deg, #9a6a17, #f1cf6e); }
.z-tz-trilho input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%; border: 2px solid #1a1006;
	background: radial-gradient(circle at 38% 32%, #fff3c4 0 14%, #e6b94a 40%, #9a6a17 100%); box-shadow: 0 2px 0 #000, 0 0 12px rgba(240,180,60,.45); }
.z-tz-trilho input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #1a1006;
	background: radial-gradient(circle at 38% 32%, #fff3c4 0 14%, #e6b94a 40%, #9a6a17 100%); box-shadow: 0 2px 0 #000, 0 0 12px rgba(240,180,60,.45); }
.z-tz-trilho input[type=range]:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 4px; }
.z-tz-marcas { position: absolute; left: 14px; right: 14px; top: 30px; height: 34px; }
.z-tz-marcas span { position: absolute; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; font-size: .82rem; color: var(--ash); cursor: pointer; white-space: nowrap; }
.z-tz-marcas span::before { content: ""; width: 2px; height: 7px; background: var(--brass-dk); margin-bottom: 2px; }
.z-tz-marcas span b { font-weight: normal; } .z-tz-marcas span em { font-style: normal; color: var(--brass); }
.z-tz-marcas span.on { color: var(--bone); } .z-tz-marcas span.on em { color: #cfe8b5; } .z-tz-marcas span.on::before { background: var(--brass-hi); }
.z-tz-marcas span.fim { transform: translateX(-100%); align-items: flex-end; cursor: default; }
.z-tz-caixa { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid rgba(125,97,37,.45); }
.z-tz-valor { display: flex; align-items: center; gap: 12px; margin: 0; font-family: var(--f-label); color: var(--ash); font-size: 1.05rem; }
.z-tz-campo { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 1.5rem; color: var(--bone); background: rgba(0,0,0,.55); border: 1px solid var(--brass-dk); }
.z-tz-campo input { width: 5.2ch; font: inherit; color: inherit; background: transparent; border: 0; outline: 0; text-align: right; -moz-appearance: textfield; }
.z-tz-campo input::-webkit-outer-spin-button, .z-tz-campo input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.z-tz-campo:focus-within { border-color: var(--brass-hi); }
.z-tz-caixa .z-btn { font-size: 1.1rem; padding: 10px 22px; }
.z-tz-regra { margin: 10px 0 0; text-align: center; font-size: .85rem; color: var(--ash); opacity: .8; }
@media (max-width: 720px) {
	.z-tz-balcao { padding: 22px 14px 14px; }
	.z-tz-vitrine { flex-direction: column; align-items: center; gap: 10px; }
	.z-tz-leitura { text-align: center; min-width: 0; }
	.z-tz-marcas span b, .z-tz-marcas span em { display: none; }
	.z-tz-marcas span.fim { display: none; }
	.z-tz-caixa { justify-content: center; } .z-tz-caixa .z-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .z-tz-pilha.grande i { transition: none; } .z-tz-fita.pulsa { animation: none; } }
.z-tz-trilho input[type=range] { border: 0 !important; box-shadow: none !important; padding: 0 !important; background: transparent !important; border-radius: 0; }
.z-tz-campo input[type=number] { width: 4.6ch !important; min-width: 0; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; height: auto; }

/* Tesouro — Grizzik, o Cambista */
.z-tz-topo { display: grid; grid-template-columns: 210px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 22px; row-gap: 10px; align-items: end; }
.z-tz-topo .z-gob { display: contents; }
.z-gob-rosto { grid-row: 1 / 3; position: relative; width: 210px; height: 262px; align-self: end; margin-bottom: -18px; }
.z-gob-rosto img { position: absolute; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: 100%; object-fit: contain; object-position: bottom center;
	opacity: 0; transition: opacity .22s ease, transform .22s ease; transform: translateY(4px); user-select: none; -webkit-user-drag: none;
	filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
.z-gob-rosto img.on { opacity: 1; transform: none; }
.z-gob[data-exp="5"] .z-gob-rosto img.on { animation: zGobPula .5s ease-out; }
@keyframes zGobPula { 0% { transform: translateY(6px) scale(.97); } 60% { transform: translateY(-6px) scale(1.02); } 100% { transform: none; } }
.z-gob-balao { grid-column: 2; position: relative; align-self: start; max-width: 520px; padding: 10px 16px 12px;
	background: var(--parch) url('../img/pergaminho.jpg') center / 400px; color: var(--ink); border: 1px solid #000;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 6px 14px rgba(0,0,0,.55); }
.z-gob-balao::before { content: ''; position: absolute; left: -10px; bottom: 14px; border: 10px solid transparent; border-left: 0; border-right-color: #d9c597; filter: drop-shadow(-1px 0 0 #000); }
.z-gob-nome { display: block; font-family: var(--f-label); font-weight: normal; color: var(--blood); font-size: .95rem; letter-spacing: .03em; }
.z-gob-nome small { color: var(--ink-soft); font-size: .85em; }
.z-gob-balao p { margin: 2px 0 0; font-family: var(--f-body); font-size: 1.08rem; line-height: 1.35; min-height: 2.7em; }
.z-gob.fala .z-gob-balao p { animation: zGobFala .3s ease-out; }
@keyframes zGobFala { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.z-tz-topo .z-tz-vitrine { grid-column: 2; justify-content: flex-start; min-height: 110px; }
.z-tz-balcao.alem .z-tz-pilha { filter: drop-shadow(0 0 16px rgba(240,180,60,.6)); }
.z-tz-balcao.alem .z-tz-trilho input[type=range]::-webkit-slider-thumb { box-shadow: 0 2px 0 #000, 0 0 18px rgba(255,210,90,.9); }
.z-tz-valor-bloco { display: flex; flex-direction: column; gap: 6px; max-width: 460px; }
.z-tz-alem { color: var(--ash); font-size: .85rem; line-height: 1.35; }
.z-tz-balcao.alem .z-tz-alem { color: var(--brass-hi); }
.z-gob.no-indo { display: flex; align-items: flex-end; justify-content: center; gap: 16px; margin: 0 auto 10px; max-width: 640px; text-align: left; }
.z-gob.no-indo .z-gob-rosto { width: 160px; height: 200px; margin: 0; flex: none; }
.z-gob.no-indo .z-gob-balao { margin-bottom: 30px; }
@media (max-width: 720px) {
	.z-tz-topo { grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; }
	.z-tz-topo .z-tz-vitrine { min-height: 0; margin-top: 2px; }
	.z-tz-pilha.grande { height: 66px; }
	.z-tz-regua { margin-top: 14px; } .z-tz-trilho { padding-bottom: 14px; }
	.z-gob-rosto { grid-row: 1; width: 112px; height: 140px; margin-bottom: 0; }
	.z-gob-balao { padding: 8px 12px; } .z-gob-balao p { font-size: .98rem; min-height: 0; }
	.z-tz-topo .z-tz-vitrine { grid-column: 1 / -1; justify-content: center; }
	.z-gob.no-indo .z-gob-rosto { width: 112px; height: 140px; }
}
@media (prefers-reduced-motion: reduce) { .z-gob-rosto img { transition: none; } .z-gob[data-exp="5"] .z-gob-rosto img.on, .z-gob.fala .z-gob-balao p { animation: none; } }
/* balão do Grizzik não cobre a etiqueta de bônus */
.z-tz-balcao .z-tz-fita { z-index: 3; }
.z-tz-balcao .z-gob-balao { margin-right: 78px; }
@media (max-width: 720px) { .z-tz-balcao .z-gob-balao { margin-right: 0; margin-top: 34px; } }

/* Estábulo — o tratador (7 expressões) */
.z-mago.tratador { gap: 6px; max-width: min(520px, calc(100vw - 36px)); }
.z-mago-rosto { position: relative; flex: none; width: 150px; height: 168px; }
.z-mago-rosto img { position: absolute; left: 0; bottom: 0; width: auto; height: 100%; max-width: none;
	opacity: 0; transform: translateY(4px); transition: opacity .2s ease, transform .2s ease; filter: drop-shadow(0 6px 10px rgba(0,0,0,.7)); user-select: none; -webkit-user-drag: none; }
.z-mago-rosto img.on { opacity: 1; transform: none; }
.z-mago.tratador[data-exp="5"] .z-mago-rosto img.on, .z-mago.tratador[data-exp="6"] .z-mago-rosto img.on { animation: zTratPula .5s ease-out; }
@keyframes zTratPula { 0% { transform: translateY(6px) scale(.97); } 60% { transform: translateY(-5px) scale(1.02); } 100% { transform: none; } }
.z-mago.tratador .z-mago-fala { margin-bottom: 40px; }
@media (max-width: 720px) { .z-mago-rosto { width: 104px; height: 116px; } .z-mago.tratador .z-mago-fala { margin-bottom: 24px; font-size: .98rem; } }
@media (prefers-reduced-motion: reduce) { .z-mago-rosto img { transition: none; } .z-mago.tratador .z-mago-rosto img.on { animation: none; } }
.z-mago-rosto { width: 124px; transition: width .2s ease; }
.z-mago.tratador[data-exp="5"] .z-mago-rosto { width: 186px; }
.z-mago.tratador[data-exp="6"] .z-mago-rosto { width: 156px; }
@media (max-width: 720px) { .z-mago-rosto { width: 86px; } .z-mago.tratador[data-exp="5"] .z-mago-rosto { width: 128px; } .z-mago.tratador[data-exp="6"] .z-mago-rosto { width: 108px; } }
/* tratador maior (mesma escala do Grizzik) */
.z-mago-rosto { height: 262px; width: 192px; }
.z-mago.tratador[data-exp="5"] .z-mago-rosto { width: 288px; }
.z-mago.tratador[data-exp="6"] .z-mago-rosto { width: 242px; }
.z-mago.tratador { max-width: min(640px, calc(100vw - 36px)); }
.z-mago.tratador .z-mago-fala { margin-bottom: 70px; }
@media (max-width: 720px) {
	.z-mago-rosto { height: 160px; width: 118px; }
	.z-mago.tratador[data-exp="5"] .z-mago-rosto { width: 176px; }
	.z-mago.tratador[data-exp="6"] .z-mago-rosto { width: 148px; }
	.z-mago.tratador .z-mago-fala { margin-bottom: 36px; }
}
/* nome do Winslow no balão */
.z-mago-nome { display: block; font-family: var(--f-label); font-weight: normal; color: var(--blood); font-size: .95rem; letter-spacing: .03em; margin-bottom: 2px; }
.z-mago-nome small { color: var(--ink-soft); font-size: .85em; }

/* ==========================================================================
   ARSENAL DE ZEMLYA — Wiki de Itens (itens.php)
   ========================================================================== */
.z-wiki { --rc: #b9ab90; }
.z-wiki .r-sempre, .z-wiki-pick .r-sempre, .z-itip .r-sempre, .z-wiki-modal.r-sempre { --rc: #b9ab90; } .z-wiki .r-comum, .z-wiki-pick .r-comum, .z-itip .r-comum, .z-wiki-modal.r-comum { --rc: #b9ab90; }
.z-wiki .r-incomum, .z-wiki-pick .r-incomum, .z-itip .r-incomum, .z-wiki-modal.r-incomum { --rc: #6fae47; } .z-wiki .r-semi, .z-wiki-pick .r-semi, .z-itip .r-semi, .z-wiki-modal.r-semi { --rc: #4a93cf; }
.z-wiki .r-raro, .z-wiki-pick .r-raro, .z-itip .r-raro, .z-wiki-modal.r-raro { --rc: #a560e0; } .z-wiki .r-mraro, .z-wiki-pick .r-mraro, .z-itip .r-mraro, .z-wiki-modal.r-mraro { --rc: #f0b43c; }
.z-wiki .r-nao, .z-wiki-pick .r-nao, .z-itip .r-nao, .z-wiki-modal.r-nao { --rc: #6b645d; }
.z-wiki-busca { position: relative; max-width: 560px; margin: 0 auto 14px; }
.z-wiki-busca > .fa { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--brass); }
.z-wiki-busca input { width: 100%; box-sizing: border-box; padding: 11px 14px 11px 40px !important; font: inherit; font-size: 1.05rem; color: var(--bone);
	background: rgba(0,0,0,.55) !important; border: 1px solid var(--brass-dk) !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,.6); }
.z-wiki-busca input:focus { border-color: var(--brass) !important; outline: none; }
.z-wiki-sug { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 50; margin: 0; padding: 4px; list-style: none; text-align: left;
	background: #170f09; border: 1px solid var(--brass-dk); box-shadow: 0 10px 30px rgba(0,0,0,.7); max-height: 420px; overflow: auto; }
.z-wiki-sug li { display: flex; align-items: center; gap: 10px; padding: 4px 8px; cursor: pointer; color: var(--bone); }
.z-wiki-sug li img { image-rendering: pixelated; flex: none; }
.z-wiki-sug li small { margin-left: auto; color: var(--ash); font-size: .82rem; }
.z-wiki-sug li:hover, .z-wiki-sug li.on { background: rgba(201,162,74,.16); }
.z-wiki-sug li.nada { color: var(--ash); cursor: default; }
.z-wiki-cmpn { color: var(--brass-hi); font-weight: normal; }

.z-wiki-grupo { margin: 0 0 26px; }
.z-wiki-grupo h2 { margin: 0 0 2px; font-family: var(--f-title); font-size: 1.6rem; color: var(--brass-hi); border-bottom: 1px solid rgba(125,97,37,.5); padding-bottom: 4px; }
.z-wiki-grupo > p { margin: 6px 0 12px; color: var(--ash); }
.z-wiki-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.z-wiki-cat { display: flex; align-items: center; gap: 10px; padding: 8px 12px; text-decoration: none !important; color: var(--bone) !important;
	background: rgba(0,0,0,.38); border: 1px solid rgba(125,97,37,.4); transition: border-color .15s, background .15s, transform .15s; }
.z-wiki-cat:hover { border-color: var(--brass); background: rgba(201,162,74,.1); transform: translateY(-1px); }
.z-wiki-cat small { margin-left: auto; color: var(--ash); font-size: .85rem; }
.z-wiki-ico, .z-wiki-slot { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 38px;
	background: radial-gradient(circle at 50% 60%, rgba(255,255,255,.07), rgba(0,0,0,.45)); border: 1px solid #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.z-wiki-ico img, .z-wiki-slot img, .z-wiki-titulo img { image-rendering: pixelated; }
.z-wiki-slot { border-color: color-mix(in srgb, var(--rc) 70%, #000); box-shadow: inset 0 0 8px color-mix(in srgb, var(--rc) 35%, transparent); }
.z-wiki-slot.r-mraro { box-shadow: inset 0 0 10px rgba(240,180,60,.45), 0 0 6px rgba(240,180,60,.35); }

.z-wiki-trilha { font-size: .92rem; color: var(--ash); margin-bottom: 4px; }
.z-wiki-titulo { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-family: var(--f-title); color: var(--brass-hi); }
.z-wiki-titulo small { font-size: .9rem; color: var(--ash); font-weight: normal; }
.z-wiki-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; padding: 10px 12px; background: rgba(0,0,0,.4); border: 1px solid rgba(125,97,37,.4); }
.z-wiki-f { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--ash); }
.z-wiki-f .fa { color: var(--brass); }
.z-wiki-filtros input, .z-wiki-filtros select, .z-wiki-eu input, .z-wiki-eu select, .z-wiki-pick-card input[type=search] {
	font: inherit; font-size: .95rem; color: var(--bone); background: rgba(0,0,0,.55) !important; border: 1px solid var(--iron-hi) !important; padding: 5px 8px !important; box-shadow: none !important; }
.z-wiki-filtros input[type=number], .z-wiki-eu input[type=number] { width: 72px; }
.z-wiki-eu { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.z-wiki-eu.solo { margin-bottom: 12px; padding: 10px 12px; background: rgba(0,0,0,.4); border: 1px solid rgba(125,97,37,.4); }
.z-wiki-eu-t { font-family: var(--f-label); color: var(--brass-hi); }
.z-wiki-lv, .z-wiki-chk { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--ash); cursor: pointer; }
.z-wiki-chk input { accent-color: var(--brass); width: 16px; height: 16px; }

.z-wiki-tabela-wrap { overflow-x: auto; border: 1px solid rgba(125,97,37,.45); background: rgba(0,0,0,.35); }
.z-wiki-tabela { width: 100%; border-collapse: collapse; font-size: .95rem; }
.z-wiki-tabela th { position: sticky; top: 0; z-index: 1; padding: 8px 8px; text-align: left; white-space: nowrap; font-family: var(--f-label); font-weight: normal; color: var(--brass);
	background: #1d130b; border-bottom: 1px solid var(--brass-dk); cursor: pointer; user-select: none; }
.z-wiki-tabela th.on { color: var(--brass-hi); }
.z-wiki-tabela th.on.asc::after { content: ' ▲'; font-size: .7em; } .z-wiki-tabela th.on.desc::after { content: ' ▼'; font-size: .7em; }
.z-wiki-tabela th.c-img, .z-wiki-tabela th.c-cmp { cursor: default; }
.z-wiki-tabela td { padding: 4px 8px; border-bottom: 1px solid rgba(125,97,37,.18); color: var(--bone); vertical-align: middle; }
.z-wiki-tabela tbody tr { cursor: pointer; content-visibility: auto; contain-intrinsic-size: 0 46px; }
.z-wiki-tabela tbody tr:hover td { background: rgba(201,162,74,.09); }
.z-wiki-tabela tbody tr.nao-usa td { opacity: .5; }
.z-wiki-tabela td.c-n a { color: var(--brass-hi) !important; font-family: var(--f-label); font-size: 1.02rem; }
.z-wiki-tabela td.c-n .fa-ban { color: var(--blood-hi); font-size: .85em; }
.z-wiki-tabela td.c-img { width: 46px; }
.z-wiki-tabela td.c-p, .z-wiki-tabela td.c-lv { white-space: nowrap; color: var(--ash); }
.z-wiki-tabela td.c-bon, .z-wiki-tabela td.c-voc { font-size: .88rem; color: var(--ash); }
.z-wiki-vazio { padding: 18px; text-align: center; color: var(--ash); }
.z-wiki-cmpb { background: rgba(0,0,0,.4); border: 1px solid var(--iron-hi); color: var(--ash); padding: 2px 8px; cursor: pointer; font-size: 1rem; line-height: 1.3; }
.z-wiki-cmpb:hover { color: var(--brass-hi); border-color: var(--brass-dk); }
.z-wiki-cmpb.on { color: #1a1006; background: var(--brass); border-color: var(--brass-hi); }
.z-wiki-rar { font-family: var(--f-label); font-size: .85rem; color: var(--rc); white-space: nowrap; }
.z-wiki-rar::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 5px; transform: rotate(45deg); background: var(--rc); vertical-align: 1px; }
.z-wiki-rar.r-nao { color: var(--iron-hi); } .z-wiki-rar.r-nao::before { display: none; }
.z-wiki-el { display: inline-block; padding: 0 5px; border-radius: 3px; font-size: .85em; white-space: nowrap; background: rgba(255,255,255,.07); }
.z-wiki-el.el-fire { color: #ff9a5c; } .z-wiki-el.el-ice { color: #9ad6ff; } .z-wiki-el.el-earth { color: #9fd36b; } .z-wiki-el.el-energy { color: #d59cff; }
.z-wiki-el.el-holy { color: #ffe58a; } .z-wiki-el.el-death { color: #c9a0a0; } .z-wiki-el.el-physical { color: #d9cbb0; } .z-wiki-el.el-lifedrain { color: #ff8f8f; }
.z-wiki-el.el-manadrain { color: #8fb5ff; } .z-wiki-el.el-drown { color: #7fd7d0; }

/* ficha */
.z-wiki-modal .z-mt-card { grid-template-columns: 260px 1fr; }
.z-wiki-stage { min-height: 260px; }
.z-wiki-stage img { width: 128px !important; height: 128px !important; image-rendering: pixelated; }
.z-wiki-stage .z-mt-halo { bottom: 64px; width: 150px; }
.z-mt-modal.z-wiki-modal .z-mt-card { box-shadow: inset 0 0 60px rgba(110,62,18,.45), 0 0 0 3px var(--iron-dk), 0 0 0 5px color-mix(in srgb, var(--rc) 70%, #000), 0 20px 50px rgba(0,0,0,.8); }
.z-wiki-modal .z-mt-rar { color: color-mix(in srgb, var(--rc) 55%, #2b1c0d); }
.z-wiki-modal .z-mt-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-right: 30px; }
.z-wiki-catlink { font-family: var(--f-label); font-size: .85rem; color: var(--ink-soft) !important; }
.z-wiki-stats { gap: 4px 16px; }
.z-wiki-stats li { color: var(--ink-soft); }
.z-wiki-stats .fa { color: var(--blood); width: 14px; text-align: center; }
.z-wiki-modal .z-wiki-el { background: rgba(43,28,13,.1); font-weight: 700; }
.z-wiki-modal .z-wiki-el.el-fire { color: #b0461a; } .z-wiki-modal .z-wiki-el.el-ice { color: #2a6e9e; } .z-wiki-modal .z-wiki-el.el-earth { color: #4b7a1f; }
.z-wiki-modal .z-wiki-el.el-energy { color: #7a3fb0; } .z-wiki-modal .z-wiki-el.el-holy { color: #9a7a10; } .z-wiki-modal .z-wiki-el.el-death { color: #5e2f2f; }
.z-wiki-modal .z-wiki-el.el-physical { color: #5e4528; }
.z-wiki-req { margin: 0 0 14px; padding: 7px 10px; font-family: var(--f-label); background: rgba(90,60,30,.12); border-left: 3px solid var(--brass-dk); }
.z-wiki-req.sim { border-left-color: #4f8a2c; } .z-wiki-req.sim .fa { color: #3d6b2a; }
.z-wiki-req.nao { border-left-color: var(--blood); background: rgba(142,28,28,.1); } .z-wiki-req.nao .fa { color: var(--blood); }
.z-wiki-drops { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; margin-bottom: 8px; }
.z-wiki-drop { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; text-align: center; text-decoration: none !important; color: var(--ink) !important;
	background: rgba(90,60,30,.1); border: 1px solid rgba(90,60,30,.3); transition: background .15s; }
a.z-wiki-drop:hover { background: rgba(90,60,30,.2); }
.z-wiki-drop-img { display: flex; align-items: flex-end; justify-content: center; width: 64px; height: 64px; }
.z-wiki-drop-img img { max-width: 64px; max-height: 64px; image-rendering: pixelated; }
.z-wiki-drop b { font-family: var(--f-label); font-size: .9rem; line-height: 1.15; }
.z-wiki-drop b .fa-star { color: #b8860b; font-size: .8em; }
.z-wiki-drop small { font-size: .78rem; }
.z-wiki-drop small.r-sempre, .z-wiki-drop small.r-comum { color: #6b5c45; } .z-wiki-drop small.r-incomum { color: #3d6b2a; } .z-wiki-drop small.r-semi { color: #2d6fa0; }
.z-wiki-drop small.r-raro { color: #7a3fb0; font-weight: 700; } .z-wiki-drop small.r-mraro { color: #b8322b; font-weight: 700; }
.z-wiki-drop.oculta { opacity: .75; } .z-wiki-drop.oculta b { color: var(--ink-soft); letter-spacing: .2em; }
.z-wiki-nota { margin: 4px 0 12px; font-size: .9rem; color: var(--ink-soft); }
.z-wiki-nada { margin: 0 0 12px; color: var(--ink-soft); font-style: italic; }
.z-wiki-npcs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.z-wiki-npc h5 { margin: 0 0 4px; font-family: var(--f-label); font-size: .95rem; color: var(--ink-soft); }
.z-wiki-npc ul { list-style: none; margin: 0; padding: 0; }
.z-wiki-npc li { display: flex; align-items: baseline; gap: 6px; padding: 2px 0; border-bottom: 1px dotted rgba(90,60,30,.3); }
.z-wiki-npc li small { color: var(--ink-soft); } .z-wiki-npc li span { margin-left: auto; font-family: var(--f-label); color: #6b4410; white-space: nowrap; }
.z-wiki-usado li::before { content: none !important; } .z-wiki-usado li { padding-left: 0 !important; }
.z-wiki-usado .fa { color: var(--blood); width: 18px; }
.z-wiki-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.z-wiki-acoes .z-btn { font-size: .95rem; }
.z-wiki-modal .z-wiki-cmpb.on { color: #1a1006; }

/* bandeja do comparador */
.z-wiki-bandeja { position: fixed; right: 18px; bottom: 18px; z-index: 9000; display: flex; align-items: center; gap: 10px; padding: 8px 40px 8px 12px;
	background: #1a110a; border: 1px solid var(--brass); box-shadow: 0 8px 26px rgba(0,0,0,.7); }
.z-wiki-bandeja[hidden] { display: none; }
.z-wiki-bandeja img { image-rendering: pixelated; cursor: pointer; background: rgba(0,0,0,.4); border: 1px solid #000; }
.z-wiki-bandeja .z-mt-x { top: 2px; right: 6px; font-size: 26px; color: var(--ash); }

/* comparador */
.z-wiki-cmptab th, .z-wiki-cmptab td { text-align: center; }
.z-wiki-cmptab tbody th { text-align: left; color: var(--ash); background: rgba(0,0,0,.25); position: static; cursor: default; }
.z-wiki-cmptab thead th { cursor: default; vertical-align: top; white-space: normal; min-width: 130px; }
.z-wiki-cmptab thead a { color: var(--brass-hi) !important; }
.z-wiki-cmptab td.ganha { color: #cfe8b5; background: rgba(95,143,67,.18); font-weight: 700; }
.z-wiki-cmptab td.vazio { color: var(--iron-hi); }
.z-wiki-cmptab .z-wiki-cmpb { padding: 0 6px; }
.z-wiki-cmp .z-wiki-nota { color: var(--ash); }

/* montador de set */
.z-wiki-set-grade { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; }
.z-wiki-inv { display: grid; grid-template-columns: repeat(3, 78px); gap: 8px; padding: 14px; background: linear-gradient(180deg, #2a1b10, #140d07); border: 1px solid var(--brass-dk);
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.7), 0 6px 18px rgba(0,0,0,.5); }
.z-wiki-inv-s { position: relative; width: 78px; height: 78px; display: flex; align-items: center; justify-content: center; padding: 4px; cursor: pointer;
	background: radial-gradient(circle at 50% 55%, rgba(255,255,255,.06), rgba(0,0,0,.6)); border: 1px solid #000; box-shadow: inset 0 0 0 1px rgba(201,162,74,.25); color: var(--ash);
	font-family: var(--f-label); font-size: .72rem; line-height: 1.1; text-align: center; }
.z-wiki-inv-s.vazio { visibility: hidden; cursor: default; }
.z-wiki-inv-s:hover { box-shadow: inset 0 0 0 1px var(--brass); color: var(--brass-hi); }
.z-wiki-inv-s.tem { box-shadow: inset 0 0 12px color-mix(in srgb, var(--rc) 45%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--rc) 70%, #000); }
.z-wiki-inv-s img { width: 64px; height: 64px; image-rendering: pixelated; }
.z-wiki-inv-s.nao-usa img { opacity: .45; } .z-wiki-inv-s.nao-usa::after { content: '\f05e'; font-family: FontAwesome; position: absolute; left: 4px; bottom: 2px; color: var(--blood-hi); font-size: 14px; }
.z-wiki-inv-x { position: absolute; top: 0; right: 3px; font-style: normal; font-size: 16px; color: var(--ash); }
.z-wiki-inv-x:hover { color: var(--blood-hi); }
.z-wiki-tot { padding: 14px 18px; background: rgba(0,0,0,.45); border: 1px solid rgba(125,97,37,.45); color: var(--bone); }
.z-wiki-tot h3 { margin: 0 0 8px; font-family: var(--f-title); color: var(--brass-hi); }
.z-wiki-tot h4 { margin: 12px 0 6px; font-family: var(--f-label); color: var(--brass); font-weight: normal; }
.z-wiki-tot ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px 18px; }
.z-wiki-tot li { display: flex; justify-content: space-between; border-bottom: 1px dotted rgba(125,97,37,.35); padding: 2px 0; }
.z-wiki-tot li span { color: var(--ash); } .z-wiki-tot li b { color: var(--brass-hi); }
.z-wiki-tot p { margin: 4px 0; color: var(--ash); } .z-wiki-tot p b { color: var(--bone); }
.z-wiki-resset { display: flex; flex-wrap: wrap; gap: 6px; }
.z-wiki-resset .z-wiki-el { font-size: .95em; padding: 2px 8px; }
.z-wiki-ruim { color: #f1a596 !important; } .z-wiki-bom { color: #cfe8b5 !important; }
.z-wiki-set-acoes { display: flex; gap: 8px; margin-top: 14px; }
.z-wiki-set-acoes .z-btn.ok::after { content: ' ✓'; }
.z-wiki-pick-card { position: relative; width: min(620px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; gap: 8px; padding: 18px 20px;
	background: #1a110a; border: 1px solid var(--brass); box-shadow: 0 20px 50px rgba(0,0,0,.8); color: var(--bone); }
.z-wiki-pick-card h3 { margin: 0; font-family: var(--f-title); color: var(--brass-hi); }
.z-wiki-pick-card .z-mt-x { color: var(--ash); }
.z-wiki-pick-card .z-wiki-f input { flex: 1; } .z-wiki-pick-card .z-wiki-f { display: flex; }
.z-wiki-pick-lista { list-style: none; margin: 0; padding: 0; overflow: auto; flex: 1; border-top: 1px solid rgba(125,97,37,.4); }
.z-wiki-pick-lista li { display: flex; align-items: center; gap: 10px; padding: 5px 4px; border-bottom: 1px solid rgba(125,97,37,.18); cursor: pointer; }
.z-wiki-pick-lista li:hover { background: rgba(201,162,74,.1); }
.z-wiki-pick-lista li > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.z-wiki-pick-lista li b { font-family: var(--f-label); font-weight: normal; color: var(--brass-hi); }
.z-wiki-pick-lista li small { color: var(--ash); font-size: .82rem; }
.z-wiki-pick-lista li em { margin-left: auto; font-style: normal; color: var(--ash); font-size: .85rem; white-space: nowrap; }
.z-wiki-pick-lista li.nada { color: var(--ash); cursor: default; }

/* dica flutuante de item (site inteiro) */
.z-itip { position: fixed; z-index: 100002; pointer-events: none; width: max-content; max-width: 280px; padding: 8px 10px; background: #160e08; border: 1px solid var(--brass-dk);
	box-shadow: 0 8px 24px rgba(0,0,0,.75); color: var(--bone); font-size: .88rem; line-height: 1.35; opacity: 0; transition: opacity .1s; }
.z-itip.on { opacity: 1; }
.z-itip-top { display: flex; align-items: center; gap: 8px; }
.z-itip-top img { image-rendering: pixelated; background: rgba(0,0,0,.4); border: 1px solid #000; }
.z-itip-top b { display: block; font-family: var(--f-label); font-weight: normal; color: var(--brass-hi); font-size: .98rem; }
.z-itip-top small { color: var(--ash); }
.z-itip-st { margin-top: 5px; color: var(--bone); }
.z-itip-extra { margin-top: 4px; color: var(--ash); font-size: .82rem; border-top: 1px solid rgba(125,97,37,.35); padding-top: 4px; }
.z-itip .z-wiki-rar { font-size: .8rem; }
.z-itip-on::after, .z-itip-on::before { display: none !important; }

@media (max-width: 860px) {
	.z-wiki-set-grade { grid-template-columns: 1fr; justify-items: center; }
	.z-wiki-tot { width: 100%; box-sizing: border-box; }
	.z-wiki-modal .z-mt-card { grid-template-columns: 1fr; }
	.z-wiki-stage { min-height: 170px; border-right: 0; border-bottom: 3px solid var(--iron-dk); }
	.z-wiki-npcs { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.z-wiki-inv { grid-template-columns: repeat(3, 64px); } .z-wiki-inv-s { width: 64px; height: 64px; } .z-wiki-inv-s img { width: 48px; height: 48px; }
	.z-wiki-bandeja { left: 10px; right: 10px; bottom: 10px; }
	.z-wiki-tabela td.c-voc, .z-wiki-tabela th.c-voc, .z-wiki-tabela td.c-bon, .z-wiki-tabela th.c-bon { display: none; }
}

/* Arsenal — Borin Barba-de-Brasa (busca conversada) */
.z-anao { position: relative; display: grid; grid-template-columns: 262px minmax(0, 1fr); column-gap: 22px; align-items: end; margin: 0 0 26px; padding: 22px 26px 0;
	background: radial-gradient(110% 80% at 30% 0%, rgba(240,140,60,.10), transparent 60%), linear-gradient(180deg, rgba(42,27,16,.94), rgba(14,9,5,.97));
	border: 1px solid var(--brass-dk); box-shadow: inset 0 0 0 1px rgba(0,0,0,.7), 0 10px 30px rgba(0,0,0,.5); }
.z-anao-rosto { position: relative; width: 262px; height: 326px; align-self: end; }
.z-anao-rosto img { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom center; opacity: 0; transform: translateY(4px);
	transition: opacity .2s ease, transform .2s ease; filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); user-select: none; -webkit-user-drag: none; }
.z-anao-rosto img.on { opacity: 1; transform: none; }
.z-anao[data-exp="5"] .z-anao-rosto img.on { animation: zAnaoPula .55s ease-out; }
.z-anao[data-exp="6"] .z-anao-rosto img.on { animation: zAnaoBalanca .5s ease-out; }
@keyframes zAnaoPula { 0% { transform: translateY(8px) scale(.97); } 55% { transform: translateY(-10px) scale(1.02); } 100% { transform: none; } }
@keyframes zAnaoBalanca { 0%, 100% { transform: none; } 30% { transform: rotate(-2deg); } 65% { transform: rotate(2deg); } }
.z-anao-conversa { align-self: center; padding-bottom: 22px; }
.z-anao-balao { position: relative; padding: 10px 46px 12px 16px; margin-bottom: 12px; background: var(--parch) url('../img/pergaminho.jpg') center / 400px; color: var(--ink);
	border: 1px solid #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 6px 14px rgba(0,0,0,.55); }
.z-anao-balao::before { content: ''; position: absolute; left: -10px; top: 26px; border: 10px solid transparent; border-left: 0; border-right-color: #d9c597; filter: drop-shadow(-1px 0 0 #000); }
.z-anao-nome { display: block; font-family: var(--f-label); font-weight: normal; color: var(--blood); font-size: .95rem; }
.z-anao-nome small { color: var(--ink-soft); font-size: .85em; }
.z-anao-balao p { margin: 2px 0 0; font-size: 1.08rem; line-height: 1.35; min-height: 2.7em; }
.z-anao.fala .z-anao-balao p { animation: zGobFala .3s ease-out; }
.z-anao-som { position: absolute; top: 8px; right: 8px; border-color: rgba(43,28,13,.35) !important; color: var(--ink-soft) !important; padding: 2px 7px !important; }
.z-anao-pergunta { display: flex; gap: 8px; }
.z-anao-pergunta input { flex: 1; min-width: 0; padding: 11px 14px !important; font: inherit; font-size: 1.05rem; color: var(--bone);
	background: rgba(0,0,0,.6) !important; border: 1px solid var(--brass-dk) !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,.6) !important; }
.z-anao-pergunta input:focus { border-color: var(--brass) !important; outline: none; }
.z-anao-entendi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: .88rem; color: var(--ash); }
.z-anao-entendi[hidden] { display: none; }
.z-anao-entendi em { font-style: normal; padding: 1px 8px; color: var(--brass-hi); background: rgba(201,162,74,.12); border: 1px solid rgba(201,162,74,.35); }
.z-anao-bau { grid-column: 1 / -1; margin: 0 -26px; padding: 12px 18px 16px; background: rgba(0,0,0,.45); border-top: 1px solid var(--brass-dk); animation: zAnaoBau .25s ease-out; }
.z-anao-bau[hidden] { display: none; }
@keyframes zAnaoBau { from { opacity: 0; transform: translateY(-6px); } }
.z-anao-bau-top { position: relative; display: flex; align-items: center; margin-bottom: 10px; }
.z-anao-bau-top b { font-family: var(--f-label); font-weight: normal; color: var(--brass-hi); }
.z-anao-bau-top .z-mt-x { top: -8px; right: -4px; color: var(--ash); font-size: 28px; }
.z-anao-res { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; max-height: 420px; overflow: auto; }
.z-anao-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; text-align: left; cursor: pointer; font: inherit; color: var(--bone);
	background: rgba(0,0,0,.35); border: 1px solid rgba(125,97,37,.35); animation: zAnaoItem .3s ease-out both; animation-delay: calc(var(--i) * 18ms); }
.z-anao-item:hover { border-color: var(--brass); background: rgba(201,162,74,.1); }
@keyframes zAnaoItem { from { opacity: 0; transform: translateY(6px); } }
.z-anao-item-t { display: flex; flex-direction: column; min-width: 0; }
.z-anao-item-t b { font-family: var(--f-label); font-weight: normal; color: var(--brass-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.z-anao-item-t small { color: var(--ash); font-size: .8rem; }
.z-anao-item-t .z-wiki-rar { font-size: .78rem; }
.z-anao-mais { grid-column: 1 / -1; margin: 6px 0 0; color: var(--ash); font-size: .9rem; }
.z-anao .r-sempre, .z-anao .r-comum { --rc: #b9ab90; } .z-anao .r-incomum { --rc: #6fae47; } .z-anao .r-semi { --rc: #4a93cf; } .z-anao .r-raro { --rc: #a560e0; } .z-anao .r-mraro { --rc: #f0b43c; } .z-anao .r-nao { --rc: #6b645d; }
@media (max-width: 720px) {
	.z-anao { grid-template-columns: 116px minmax(0, 1fr); column-gap: 10px; padding: 14px 12px 0; }
	.z-anao-rosto { width: 116px; height: 144px; align-self: start; }
	.z-anao-conversa { display: contents; }
	.z-anao-balao { grid-column: 2; align-self: center; margin-bottom: 10px; }
	.z-anao-pergunta, .z-anao-entendi { grid-column: 1 / -1; }
	.z-anao-entendi { margin: 0 0 12px; }
	.z-anao-pergunta { margin-bottom: 12px; }
	.z-anao-balao p { font-size: .98rem; min-height: 0; }
	.z-anao-balao::before { top: 18px; }
	.z-anao-pergunta { grid-column: 1 / -1; }
	.z-anao-pergunta .z-btn span { display: none; }
	.z-anao-bau { margin: 0 -12px; }
}
@media (prefers-reduced-motion: reduce) { .z-anao-rosto img, .z-anao-item { transition: none; animation: none !important; } }