/* Idlebra: estilos do site público (homepage, wiki, database, notícias e suporte).
   Mesmos tokens do jogo (src/idle/style.css): cores escuras, ouro da marca, Cinzel e IBM Plex. */

:root {
	--bg-abyss: #0b0d10;
	--bg-app: #0e1013;
	--bg-panel: #111418;
	--bg-window: #171a1f;
	--bg-hover: #1d2229;
	--border: #272c33;
	--divider: #1e232a;
	--focus: #ffdc70;
	--brand-gold: #e8b04a;
	--brand-parchment: #f5ebdd;
	--brand-ember: #a82e25;
	--gold: #f0c23a;
	--gold-hover: #ffdc70;
	--gold-dark: #a97a1c;
	--gold-wash: rgba(240, 194, 58, 0.1);
	--cta: linear-gradient(#f2cf62, #d9a52c);
	--cta-hover: linear-gradient(#ffdc70, #e6b23a);
	--cta-border: #8a6516;
	--cta-text: #2a1e05;
	--text: #d8dbe0;
	--text-bright: #eef1f5;
	--text-section: #97a0ab;
	--text-hint: #848d99;
	--green: #5fd18a;
	--red: #ff5347;
	--rar-0: #b4b4b4;
	--rar-1: #6fd16f;
	--rar-2: #6aa6ff;
	--rar-3: #bf85ff;
	--rar-4: #ffad4d;
	--rar-5: #ff6680;
	--el-physical: #c9b8a2;
	--el-fire: #ff7a3d;
	--el-ice: #7fd3ff;
	--el-earth: #78c25a;
	--el-energy: #c58bff;
	--el-holy: #ffe17a;
	--el-death: #9a8cff;
	--el-lifedrain: #ff6b6b;
	--el-manadrain: #6b9bff;
	--el-drown: #4fb3c9;
	--font-brand: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
	--font-title: 'Cinzel', Georgia, serif;
	--font-body: 'IBM Plex Sans', system-ui, sans-serif;
	--font-mono: 'IBM Plex Mono', ui-monospace, monospace;
	--radius: 4px;
	--measure: 72ch;
	color-scheme: dark;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	background: var(--bg-abyss);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--bg-abyss);
	color: var(--text);
	font: 15px/1.6 var(--font-body);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

a {
	color: var(--gold);
	text-underline-offset: 2px;
}
a:hover {
	color: var(--gold-hover);
}
:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}
img,
svg {
	max-width: 100%;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.skip {
	position: absolute;
	left: -999px;
	top: 8px;
	z-index: 50;
	background: var(--bg-window);
	padding: 8px 12px;
}
.skip:focus {
	left: 8px;
}

/* ------------------------------------------------------------ topo e rodapé */

.site-top {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 10px max(16px, calc((100vw - 1320px) / 2));
	background: linear-gradient(#161a1f, #111418);
	border-bottom: 1px solid var(--border);
}

.brand {
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	flex: none;
}
.brand-word {
	font-family: var(--font-brand);
	font-weight: 900;
	font-size: 22px;
	color: var(--brand-gold);
	letter-spacing: 0.02em;
}
.seal {
	display: inline-block;
	padding: 1px 10px;
	background: var(--brand-ember);
	color: var(--brand-parchment);
	font-family: var(--font-title);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.35em;
	text-indent: 0.35em;
	text-transform: uppercase;
	border-top: 2px solid var(--brand-gold);
	border-bottom: 2px solid var(--brand-gold);
}

.site-nav {
	display: flex;
	gap: 4px;
	margin-left: 12px;
	flex: 1;
}
.site-nav a {
	color: var(--text);
	text-decoration: none;
	padding: 6px 12px;
	border-radius: var(--radius);
	font-weight: 500;
}
.site-nav a:hover,
.site-nav a[aria-current] {
	color: var(--gold);
	background: var(--gold-wash);
}

.nav-toggle {
	display: none;
	margin-left: auto;
	background: none;
	border: 1px solid var(--border);
	color: var(--text);
	border-radius: var(--radius);
	padding: 6px;
	cursor: pointer;
}

.btn-play,
.cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 20px;
	background: var(--cta);
	border: 1px solid var(--cta-border);
	border-radius: var(--radius);
	color: var(--cta-text);
	font-family: var(--font-title);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn-play:hover,
.cta:hover {
	background: var(--cta-hover);
	color: var(--cta-text);
}
.cta.big {
	font-size: 18px;
	padding: 12px 32px;
}
.ghost {
	display: inline-flex;
	align-items: center;
	padding: 11px 24px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	color: var(--text-bright);
	text-decoration: none;
	font-family: var(--font-title);
	font-weight: 600;
	background: var(--bg-window);
}
.ghost:hover {
	border-color: var(--gold-dark);
	color: var(--gold);
}

.site-foot {
	margin-top: auto;
	padding: 24px max(16px, calc((100vw - 1320px) / 2));
	border-top: 1px solid var(--border);
	background: var(--bg-panel);
	color: var(--text-hint);
	font-size: 13px;
}
.site-foot nav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	margin-bottom: 8px;
}
.site-foot a {
	color: var(--text-section);
}
.site-foot p {
	margin: 0;
}

@media (max-width: 760px) {
	.nav-toggle {
		display: inline-flex;
	}
	.site-top {
		flex-wrap: wrap;
		gap: 10px;
	}
	.site-top .btn-play {
		order: 2;
		margin-left: auto;
		padding: 6px 14px;
	}
	.nav-toggle {
		order: 3;
		margin-left: 0;
	}
	.site-top .seal {
		padding: 0 5px;
		font-size: 9px;
		letter-spacing: 0.2em;
		text-indent: 0.2em;
		border-top-width: 1px;
		border-bottom-width: 1px;
	}
	.site-nav {
		display: none;
		order: 4;
		flex-basis: 100%;
		flex-direction: column;
		margin: 0;
	}
	.site-top.open .site-nav {
		display: flex;
	}
	.brand-word {
		font-size: 19px;
	}
}

/* ------------------------------------------------------------ wiki: moldura */

.wiki-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px max(16px, calc((100vw - 1320px) / 2));
	border-bottom: 1px solid var(--divider);
	background: var(--bg-app);
}
.embed-tools {
	display: none;
	gap: 8px;
	align-items: center;
}
.embed-tools button,
.embed-tools a {
	background: var(--bg-window);
	border: 1px solid var(--border);
	color: var(--text);
	padding: 6px 10px;
	border-radius: var(--radius);
	font: inherit;
	font-size: 13px;
	text-decoration: none;
	cursor: pointer;
}

.wiki-search {
	position: relative;
	flex: 1;
	max-width: 560px;
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--bg-window);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 0 10px;
	color: var(--text-hint);
}
.wiki-search:focus-within {
	border-color: var(--gold-dark);
}
.wiki-search input {
	flex: 1;
	min-width: 0;
	background: none;
	border: 0;
	color: var(--text-bright);
	font: inherit;
	padding: 9px 0;
	outline: none;
}
.search-pop {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 30;
	background: var(--bg-window);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
	max-height: 60vh;
	overflow: auto;
}
.search-pop a,
.search-results a {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 12px;
	color: var(--text-bright);
	text-decoration: none;
	border-bottom: 1px solid var(--divider);
}
.search-pop a:hover,
.search-pop a.sel,
.search-results a:hover {
	background: var(--bg-hover);
	color: var(--gold);
}
.search-pop small,
.search-results small {
	color: var(--text-hint);
	white-space: nowrap;
}
.search-results {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg-panel);
	max-width: var(--measure);
}
.search-results:empty {
	display: none;
}

.wiki-shell {
	display: grid;
	grid-template-columns: 230px minmax(0, 1fr) 210px;
	gap: 32px;
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
	padding: 24px 16px 48px;
	flex: 1;
}
body.wide .wiki-shell {
	grid-template-columns: 230px minmax(0, 1fr);
}

.wiki-nav {
	font-size: 14px;
}
.wiki-nav-box {
	position: sticky;
	top: 72px;
	max-height: calc(100vh - 90px);
	overflow: auto;
}
.wiki-nav summary {
	display: none;
}
.wiki-nav h2 {
	font-family: var(--font-title);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-section);
	margin: 18px 0 6px;
}
.wiki-nav h2:first-of-type {
	margin-top: 0;
}
.wiki-nav ul,
.wiki-toc ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.wiki-nav a {
	display: block;
	padding: 3px 8px;
	border-left: 2px solid transparent;
	color: var(--text);
	text-decoration: none;
}
.wiki-nav a:hover {
	color: var(--gold);
}
.wiki-nav a[aria-current] {
	border-left-color: var(--gold);
	color: var(--gold);
	background: var(--gold-wash);
}

.wiki-toc {
	font-size: 13px;
}
.wiki-toc > * {
	position: sticky;
}
.wiki-toc h2 {
	font-family: var(--font-title);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-section);
	margin: 0 0 8px;
	top: 72px;
}
.wiki-toc ul {
	top: 100px;
	border-left: 1px solid var(--border);
}
.wiki-toc a {
	display: block;
	padding: 2px 10px;
	color: var(--text-hint);
	text-decoration: none;
}
.wiki-toc .l3 a {
	padding-left: 22px;
}
.wiki-toc a:hover {
	color: var(--gold);
}

.crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 13px;
	color: var(--text-hint);
	margin-bottom: 8px;
}
.crumbs a {
	color: var(--text-section);
}

/* ------------------------------------------------------------ wiki: texto */

.wiki-main article {
	max-width: var(--measure);
}
body.wide .wiki-main article {
	max-width: none;
}
.wiki-main h1 {
	font-family: var(--font-title);
	font-weight: 700;
	color: var(--brand-gold);
	font-size: clamp(26px, 4vw, 34px);
	line-height: 1.2;
	margin: 0 0 16px;
}
.wiki-main h2 {
	font-family: var(--font-title);
	color: var(--text-bright);
	font-size: 22px;
	margin: 36px 0 10px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--divider);
	scroll-margin-top: 80px;
}
.wiki-main h3 {
	font-family: var(--font-title);
	color: var(--text-bright);
	font-size: 17px;
	margin: 26px 0 6px;
	scroll-margin-top: 80px;
}
.wiki-main h4 {
	font-size: 15px;
	margin: 18px 0 4px;
	color: var(--text-bright);
}
.wiki-main p,
.wiki-main li {
	max-width: var(--measure);
}
.wiki-main strong {
	color: var(--text-bright);
}
.wiki-main code {
	font-family: var(--font-mono);
	font-size: 0.9em;
	background: var(--bg-window);
	padding: 1px 5px;
	border-radius: 3px;
}
.wiki-main hr {
	border: 0;
	border-top: 1px solid var(--divider);
	margin: 28px 0;
}
.lead {
	font-size: 17px;
	color: var(--text-bright);
}
.note,
.muted {
	color: var(--text-hint);
	font-size: 14px;
}
.callout {
	border: 1px solid var(--gold-dark);
	border-left-width: 4px;
	background: var(--gold-wash);
	border-radius: var(--radius);
	padding: 4px 16px;
	margin: 16px 0;
	max-width: var(--measure);
}
.callout p {
	margin: 10px 0;
}
.wiki-stamp {
	margin-top: 40px;
	padding-top: 12px;
	border-top: 1px solid var(--divider);
	font-size: 13px;
	color: var(--text-hint);
}
.next-page {
	margin-top: 32px;
}
.next-page a {
	display: inline-block;
	padding: 10px 16px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg-window);
	text-decoration: none;
	font-weight: 600;
}

/* tabelas */
.table-wrap {
	overflow-x: auto;
	margin: 12px 0 18px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
}
table {
	border-collapse: collapse;
	width: 100%;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}
th,
td {
	text-align: left;
	padding: 7px 10px;
	border-bottom: 1px solid var(--divider);
	vertical-align: top;
}
th {
	background: var(--bg-window);
	color: var(--text-section);
	font-weight: 600;
	font-size: 13px;
	white-space: nowrap;
	position: sticky;
	top: 0;
}
tbody tr:hover {
	background: var(--bg-hover);
}
td small {
	color: var(--text-hint);
}
.a-right,
td.num {
	text-align: right;
}
.a-center {
	text-align: center;
}

/* cartões do início */
.cards {
	list-style: none;
	padding: 0;
	margin: 12px 0 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 10px;
	max-width: none !important;
}
.cards li {
	max-width: none;
}
.cards a {
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: 100%;
	padding: 12px 14px;
	background: var(--bg-window);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	text-decoration: none;
}
.cards a:hover {
	border-color: var(--gold-dark);
}
.cards strong {
	color: var(--gold);
	font-family: var(--font-title);
}
.cards span {
	color: var(--text-hint);
	font-size: 13px;
	line-height: 1.45;
}
.wiki-main article:has(.cards) {
	max-width: none;
}

/* ícones próprios */
.ic {
	display: inline-block;
	vertical-align: middle;
	flex: none;
	color: var(--text-section);
}
.thumb {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--s, 28px) + 6px);
	height: calc(var(--s, 28px) + 6px);
	background: var(--bg-app);
	border: 1px solid var(--border);
	border-radius: 3px;
	flex: none;
	vertical-align: middle;
}
.thumb img {
	width: var(--s);
	height: var(--s);
	image-rendering: pixelated;
}
.ref {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	vertical-align: middle;
}
.ref .thumb {
	--s: 18px;
}
.cat-sword, .cat-axe, .cat-club, .cat-fist, .cat-throw { color: #c9ced6; }
.cat-bow, .cat-crossbow { color: #c79a5c; }
.cat-wand, .cat-rod { color: #c58bff; }
.cat-shield, .cat-helmet, .cat-armor, .cat-legs, .cat-boots { color: #a9b4c2; }
.cat-spellbook { color: #8fb3ff; }
.cat-ring, .cat-amulet { color: var(--brand-gold); }
.cat-ammo { color: #c9a26b; }
.cat-potion { color: #ff6b6b; }
.cat-rune { color: #b9a37a; }
.cat-gem, .cat-shard { color: #63e0d0; }
.cat-token { color: var(--gold); }
.cat-material { color: #b58d6a; }
.cat-other { color: #8d97a3; }
.cat-creature { color: #b8a58c; }
.el-physical { color: var(--el-physical); }
.el-fire { color: var(--el-fire); }
.el-ice { color: var(--el-ice); }
.el-earth { color: var(--el-earth); }
.el-energy { color: var(--el-energy); }
.el-holy { color: var(--el-holy); }
.el-death { color: var(--el-death); }
.el-lifedrain { color: var(--el-lifedrain); }
.el-manadrain { color: var(--el-manadrain); }
.el-drown { color: var(--el-drown); }

.rar { font-weight: 600; }
.rar-0 { color: var(--rar-0); }
.rar-1 { color: var(--rar-1); }
.rar-2 { color: var(--rar-2); }
.rar-3 { color: var(--rar-3); }
.rar-4 { color: var(--rar-4); }
.rar-5 { color: var(--rar-5); }

/* páginas de item e criatura */
.item-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: -4px 0 12px;
}
.item-head .kicker {
	margin: 0;
	color: var(--text-section);
	font-size: 14px;
}
.item-head p {
	margin: 2px 0;
}
.stats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 8px;
	margin: 10px 0 16px;
}
.stat {
	background: var(--bg-window);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 8px 12px;
}
.stat dt {
	font-size: 12px;
	color: var(--text-hint);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.stat dd {
	margin: 2px 0 0;
	color: var(--text-bright);
	font-weight: 600;
}
.sources,
.uses {
	padding-left: 20px;
}
.el-bars {
	list-style: none;
	padding: 0;
	margin: 10px 0;
	display: grid;
	gap: 6px;
	max-width: 520px;
}
.el-bars li {
	display: grid;
	grid-template-columns: 120px 1fr 110px;
	gap: 10px;
	align-items: center;
	font-size: 14px;
}
.el-bars .bar {
	height: 8px;
	background: var(--bg-app);
	border: 1px solid var(--border);
	border-radius: 4px;
	overflow: hidden;
}
.el-bars .bar i {
	display: block;
	height: 100%;
}
.el-bars .weak i {
	background: var(--green);
}
.el-bars .res i {
	background: var(--red);
}
.el-bars .val {
	color: var(--text-hint);
}
.el-name {
	font-weight: 600;
}

/* listas da database */
.db-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
	align-items: flex-end;
	padding: 12px;
	margin: 12px 0;
	background: var(--bg-panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}
.db-filters label,
.db-filters fieldset {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 12px;
	color: var(--text-hint);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0;
}
.db-filters fieldset {
	border: 0;
	padding: 0;
	flex-direction: row;
	flex-wrap: wrap;
}
.db-filters legend {
	padding: 0;
	margin-bottom: 4px;
	width: 100%;
}
.db-filters label.check {
	flex-direction: row;
	align-items: center;
	text-transform: none;
	letter-spacing: 0;
	font-size: 14px;
	color: var(--text);
	padding-bottom: 8px;
}
.db-filters input,
.db-filters select,
.db-filters button {
	background: var(--bg-window);
	border: 1px solid var(--border);
	color: var(--text-bright);
	font: inherit;
	font-size: 14px;
	text-transform: none;
	letter-spacing: 0;
	padding: 6px 8px;
	border-radius: var(--radius);
	min-height: 34px;
}
.db-filters input[type='search'] {
	min-width: 200px;
}
.db-filters input[type='number'] {
	width: 72px;
}
.db-filters select {
	max-width: 260px;
}
.db-filters button {
	cursor: pointer;
	color: var(--text-section);
}
.db-filters button:hover {
	color: var(--gold);
}
.db-count {
	color: var(--text-hint);
	font-size: 14px;
	margin: 0 0 4px;
}
.db-table td:first-child {
	width: 40px;
}
.db-table tr[hidden] {
	display: none;
}

/* notícias */
.news-list {
	display: grid;
	gap: 12px;
}
.news-card {
	background: var(--bg-window);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 14px 16px;
}
.news-card.pinned {
	border-color: var(--gold-dark);
}
.news-card h3 {
	margin: 0 0 2px;
	font-family: var(--font-title);
	font-size: 17px;
}
.news-card h3 a {
	color: var(--text-bright);
	text-decoration: none;
}
.news-card time {
	font-size: 13px;
	color: var(--text-hint);
}
.news-card .news-body > :first-child {
	margin-top: 8px;
}

/* ------------------------------------------------------------ celular e telas médias */

@media (max-width: 1180px) {
	.wiki-shell {
		grid-template-columns: 210px minmax(0, 1fr);
	}
	.wiki-toc {
		display: none;
	}
}

@media (max-width: 860px) {
	.wiki-shell,
	body.wide .wiki-shell {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
		padding-top: 12px;
	}
	.wiki-nav-box {
		position: static;
		max-height: none;
		border: 1px solid var(--border);
		border-radius: var(--radius);
		background: var(--bg-panel);
		padding: 0 12px;
	}
	.wiki-nav summary {
		display: block;
		padding: 10px 0;
		cursor: pointer;
		font-weight: 600;
		color: var(--text-bright);
	}
	.wiki-nav-box:not([open]) > :not(summary) {
		display: none;
	}
	.wiki-nav-box[open] {
		padding-bottom: 12px;
	}
	.el-bars li {
		grid-template-columns: 96px 1fr 92px;
	}
	.db-filters input[type='search'],
	.db-filters select {
		min-width: 0;
		max-width: none;
		width: 100%;
	}
	.db-filters label {
		flex: 1 1 140px;
	}
}

/* modo embutido (janela Wiki dentro do jogo): sem topo nem rodapé do site, índice recolhido */
html.embed .site-top,
html.embed .site-foot,
html.embed .wiki-stamp a[href='/suporte'] {
	display: none;
}
html.embed .wiki-bar {
	position: sticky;
	top: 0;
	z-index: 20;
	padding: 8px 12px;
}
html.embed .wiki-shell {
	grid-template-columns: minmax(0, 1fr);
	padding: 12px 14px 32px;
}
html.embed .wiki-toc {
	display: none;
}
html.embed .wiki-nav-box {
	position: static;
	max-height: none;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg-panel);
	padding: 0 12px;
}
html.embed .wiki-nav summary {
	display: block;
	padding: 8px 0;
	cursor: pointer;
	font-weight: 600;
	color: var(--text-bright);
}
html.embed .wiki-nav-box:not([open]) > :not(summary) {
	display: none;
}
html.embed .wiki-nav-box[open] {
	padding-bottom: 10px;
}

/* ------------------------------------------------------------ homepage */

.home main {
	flex: 1;
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 16px 48px;
}
.hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 56px 0 40px;
	background: radial-gradient(ellipse at 50% 30%, #1a1d23 0%, transparent 65%);
}
.hero-crest {
	width: 112px;
	height: auto;
	filter: drop-shadow(0 6px 18px rgba(232, 176, 74, 0.2));
}
.hero-title {
	margin: 12px 0 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
.wordmark {
	font-family: var(--font-brand);
	font-weight: 900;
	color: var(--brand-gold);
	font-size: clamp(44px, 10vw, 72px);
	line-height: 1;
	letter-spacing: 0.02em;
	text-shadow: 0 2px 0 #000;
}
.seal-lg {
	font-size: 18px;
	padding: 2px 20px;
}
.hero-slogan {
	margin: 18px 0 0;
	font-family: var(--font-title);
	font-size: clamp(20px, 3.4vw, 26px);
	color: var(--text-bright);
}
.hero-text {
	max-width: 56ch;
	margin: 10px 0 0;
	color: var(--text-section);
	font-size: 16px;
}
.hero-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 26px;
}
.hero-online {
	margin: 18px 0 0;
	color: var(--text-section);
}
.hero-online strong {
	color: var(--text-bright);
}
.dot {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--green);
	box-shadow: 0 0 8px var(--green);
	vertical-align: 1px;
}
.home-grid {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 16px;
	margin-top: 8px;
}
.home-box,
.home-steps {
	background: var(--bg-panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 4px 20px 16px;
}
.home-steps {
	margin-top: 16px;
}
.home h2 {
	font-family: var(--font-title);
	color: var(--brand-gold);
	font-size: 20px;
	margin: 16px 0 12px;
}
.online-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin: 0;
}
.online-stats div {
	background: var(--bg-window);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 10px 12px;
}
.online-stats dt {
	font-size: 12px;
	color: var(--text-hint);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.online-stats dd {
	margin: 2px 0 0;
	font-size: 24px;
	font-weight: 600;
	color: var(--text-bright);
	font-variant-numeric: tabular-nums;
}
.steps {
	list-style: none;
	counter-reset: step;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}
.steps li {
	counter-increment: step;
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: var(--bg-window);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 14px 16px 14px 56px;
	position: relative;
}
.steps li::before {
	content: counter(step);
	position: absolute;
	left: 14px;
	top: 12px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--cta);
	color: var(--cta-text);
	font-family: var(--font-title);
	font-weight: 700;
}
.steps strong {
	color: var(--text-bright);
	font-family: var(--font-title);
}
.steps span {
	color: var(--text-section);
	font-size: 14px;
}
@media (max-width: 860px) {
	.home-grid,
	.steps {
		grid-template-columns: minmax(0, 1fr);
	}
	.hero {
		padding: 36px 0 28px;
	}
}

/* sprites do Tibia (decisão do dono H8): desenhados pela geração da wiki em /wiki/img */
.thumb.sprite {
	background: radial-gradient(circle at 50% 60%, #20252c 0%, var(--bg-app) 70%);
}
.thumb.sprite img {
	object-fit: contain;
}
img.spr {
	width: 20px;
	height: 20px;
	margin-right: 4px;
	vertical-align: -5px;
	image-rendering: pixelated;
	object-fit: contain;
}
.item-head .thumb.sprite {
	border-color: var(--gold-dark);
}
.neg {
	color: var(--red);
}

/* preço do Mercado na página do item (H4) */
.market-live {
	margin: 16px 0;
	padding: 4px 16px 8px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg-panel);
}
.market-live h3 {
	margin: 12px 0 4px;
}

/* homepage: o grupo das 4 vocações */
.hero-party {
	display: flex;
	gap: 18px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}
.hero-party li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	color: var(--text-section);
	font-size: 13px;
}
.hero-party img {
	width: 64px;
	height: 64px;
	image-rendering: pixelated;
	filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
}
@media (max-width: 480px) {
	.hero-party {
		gap: 8px;
	}
	.hero-party img {
		width: 52px;
		height: 52px;
	}
}

/* ------------------------------------------------------------ Suporte (/suporte, /suporte/c/{código}; support.js) */
:root {
	--sp-ok-bg: rgba(95, 209, 138, 0.1);
	--sp-err-bg: rgba(255, 83, 71, 0.1);
	--sp-staff-bg: rgba(240, 194, 58, 0.06);
	--sp-field-bg: #0b0d10;
}
.sp-grid {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	gap: 32px;
	align-items: start;
}
.sp h2 {
	margin-top: 8px;
}
.sp-form {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-width: var(--measure);
}
.sp-form label,
.sp-code label {
	font-weight: 600;
	color: var(--text-bright);
	margin-top: 8px;
}
.sp input,
.sp select,
.sp textarea {
	font: inherit;
	color: var(--text-bright);
	background: var(--sp-field-bg);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 10px 12px;
	min-height: 44px;
}
.sp textarea {
	resize: vertical;
}
.sp-actions {
	margin-top: 10px;
}
.sp-msg {
	padding: 10px 14px;
	border-left: 4px solid var(--red);
	background: var(--sp-err-bg);
	color: var(--text-bright);
}
.sp-msg.ok {
	border-color: var(--green);
	background: var(--sp-ok-bg);
}
.sp-code {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 24px 0;
}
.sp-code label {
	flex-basis: 100%;
}
.sp-code input {
	flex: 1;
	min-width: 180px;
}
.sp-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.sp-status {
	display: inline-block;
	padding: 1px 8px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	font-size: 13px;
	color: var(--text-bright);
}
.sp-status.s-answered,
.sp-status.s-waiting {
	border-color: var(--gold-dark);
	color: var(--gold);
}
.sp-status.s-closed {
	color: var(--text-hint);
}
.sp-meta {
	color: var(--text-hint);
	font-size: 14px;
}
.sp-thread {
	list-style: none;
	padding: 0;
	margin: 16px 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: var(--measure);
}
.sp-thread li {
	padding: 10px 14px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg-window);
}
.sp-thread li.staff {
	border-left: 4px solid var(--gold-dark);
	background: var(--sp-staff-bg);
}
.sp-who {
	margin: 0 0 4px;
	font-size: 13px;
	color: var(--text-hint);
}
.sp-who strong {
	color: var(--text-bright);
}
.sp-body {
	margin: 0;
	white-space: pre-wrap;
}
.sp-linkrow {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.sp-link {
	flex: 1;
	min-width: 220px;
	font-family: var(--font-mono);
}
@media (max-width: 899px) {
	.sp-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}