/* =========================================================================
   Tibinotwiki - biblioteca do Tibinot013
   Tema escuro com dourado, inspirado no universo de Ferumbras.
   ========================================================================= */

.lib-wrap {
	--lib-bg: #140e1c;
	--lib-bg2: #1c1327;
	--lib-panel: #241830;
	--lib-panel2: #2c1e3a;
	--lib-line: #4a3552;
	--lib-gold: #d9b25f;
	--lib-gold-hi: #f3d896;
	--lib-gold-dark: #7a5a28;
	--lib-text: #ece1cc;
	--lib-muted: #b6a68d;
	--lib-purple: #a86ce0;
	--lib-red: #d95d5d;
	--lib-green: #79b56b;
	position: relative;
	margin: -10px;
	padding: 0;
	background:
		radial-gradient(circle at 18% 0%, rgba(120, 60, 170, .22), transparent 42%),
		radial-gradient(circle at 90% 8%, rgba(180, 130, 60, .12), transparent 38%),
		var(--lib-bg);
	color: var(--lib-text);
	font-family: Verdana, Arial, sans-serif;
	font-size: 12px;
	line-height: 1.55;
	overflow: hidden;
	border-radius: 3px;
}

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

.lib-wrap a {
	color: var(--lib-gold-hi);
	text-decoration: none;
}

.lib-wrap a:hover {
	color: #fff0c4;
	text-decoration: underline;
}

.lib-wrap h1,
.lib-wrap h2,
.lib-wrap h3 {
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: bold;
	color: var(--lib-gold-hi);
	margin: 0;
	letter-spacing: .02em;
}

.lib-wrap p {
	margin: 0 0 8px;
}

.lib-wrap img {
	border: 0;
	max-width: 100%;
}

/* -------------------------------------------------------------------------
   HERO
   ---------------------------------------------------------------------- */

.lib-hero {
	position: relative;
	padding: 30px 32px 26px;
	background:
		radial-gradient(circle at 78% 22%, rgba(138, 74, 196, .30), transparent 46%),
		linear-gradient(160deg, #241132 0%, #120a1b 72%);
	border-bottom: 1px solid var(--lib-gold-dark);
	overflow: hidden;
}

.lib-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(115deg, transparent 0 26px, rgba(255, 255, 255, .015) 26px 27px),
		radial-gradient(circle at 50% 120%, rgba(180, 120, 240, .18), transparent 55%);
	pointer-events: none;
}

.lib-hero::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--lib-gold), transparent);
	opacity: .55;
}

.lib-hero-art {
	position: absolute;
	right: 26px;
	top: 24px;
	width: 180px;
	height: 143px;
	border: 1px solid rgba(217, 178, 95, .45);
	box-shadow: 0 0 26px rgba(140, 80, 210, .35), inset 0 0 18px rgba(0, 0, 0, .6);
	transform: rotate(1.5deg);
}

.lib-hero-art img {
	display: block;
	width: 100%;
	height: 100%;
	image-rendering: auto;
}

.lib-hero-kicker {
	display: inline-block;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 11px;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var(--lib-gold);
	margin-bottom: 6px;
}

.lib-hero h1 {
	font-size: 42px;
	line-height: 1.05;
	text-shadow: 0 2px 0 #2a1038, 0 0 22px rgba(190, 130, 255, .35);
	margin-bottom: 8px;
}

.lib-hero-text {
	max-width: 560px;
	color: var(--lib-muted);
	font-size: 12.5px;
	line-height: 1.65;
}

.lib-hero-text strong {
	color: var(--lib-gold-hi);
}

.lib-hero-stats {
	display: flex;
	gap: 22px;
	flex-wrap: wrap;
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px solid rgba(217, 178, 95, .18);
	color: var(--lib-muted);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .08em;
}

.lib-hero-stats strong {
	display: block;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 21px;
	letter-spacing: 0;
	color: var(--lib-gold-hi);
}

/* -------------------------------------------------------------------------
   BUSCA E FILTROS
   ---------------------------------------------------------------------- */

.lib-search {
	display: flex;
	gap: 8px;
	margin-top: 18px;
	max-width: 620px;
}

.lib-search input[type="search"],
.lib-search select,
.lib-filters input,
.lib-filters select {
	background: #0e0814;
	border: 1px solid var(--lib-line);
	color: var(--lib-text);
	padding: 9px 11px;
	font-family: Verdana, Arial, sans-serif;
	font-size: 12px;
	border-radius: 2px;
	outline: none;
}

.lib-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 160px;
}

.lib-search input[type="search"]:focus,
.lib-search select:focus,
.lib-filters input:focus,
.lib-filters select:focus {
	border-color: var(--lib-gold);
	box-shadow: 0 0 0 2px rgba(217, 178, 95, .12);
}

.lib-search select,
.lib-filters select {
	max-width: 220px;
}

.lib-btn {
	display: inline-block;
	padding: 9px 18px;
	background: linear-gradient(180deg, #3a2450, #231331);
	border: 1px solid var(--lib-gold-dark);
	color: var(--lib-gold-hi);
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 13px;
	cursor: pointer;
	border-radius: 2px;
	white-space: nowrap;
}

.lib-btn:hover {
	background: linear-gradient(180deg, #503268, #2c193d);
	border-color: var(--lib-gold);
	color: #fff3cd;
}

.lib-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px;
	margin: 16px 0 18px;
	padding: 12px;
	background: rgba(255, 255, 255, .025);
	border: 1px solid rgba(217, 178, 95, .16);
	border-radius: 3px;
}

.lib-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 120px;
}

.lib-field > span {
	font-size: 9.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--lib-muted);
}

.lib-filters input {
	min-width: 170px;
}

/* -------------------------------------------------------------------------
   ESTRUTURA DAS PAGINAS
   ---------------------------------------------------------------------- */

.lib-page-head {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 22px 24px 18px;
	border-bottom: 1px solid rgba(217, 178, 95, .18);
	background: linear-gradient(180deg, rgba(60, 34, 82, .55), rgba(20, 14, 28, .1));
}

.lib-page-glyph {
	flex: 0 0 auto;
	width: 54px;
	height: 54px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	color: var(--lib-gold-hi);
	border: 1px solid var(--lib-gold-dark);
	border-radius: 50%;
	background: radial-gradient(circle at 40% 30%, #3c2550, #170d20);
	box-shadow: 0 0 16px rgba(168, 108, 224, .25);
}

.lib-page-heading h1 {
	font-size: 27px;
	line-height: 1.1;
}

.lib-page-heading p {
	margin: 5px 0 0;
	color: var(--lib-muted);
	font-size: 12px;
}

.lib-crumbs {
	padding: 10px 24px;
	font-size: 11px;
	color: var(--lib-muted);
	border-bottom: 1px solid rgba(255, 255, 255, .05);
	background: rgba(0, 0, 0, .22);
}

.lib-crumbs a {
	color: var(--lib-gold);
}

.lib-crumbs span {
	margin: 0 7px;
	opacity: .5;
}

.lib-crumbs em {
	font-style: normal;
	color: var(--lib-text);
}

.lib-page-body,
.lib-wrap > .lib-grid,
.lib-wrap > .lib-empty,
.lib-wrap > .lib-section,
.lib-wrap > .lib-pagination,
.lib-wrap > .lib-filters,
.lib-wrap > .lib-detail,
.lib-wrap > .lib-cat-grid {
	margin-left: 24px;
	margin-right: 24px;
}

.lib-wrap > .lib-grid {
	margin-top: 18px;
}

.lib-wrap > .lib-filters {
	margin-top: 18px;
}

.lib-section {
	margin-top: 24px;
	margin-bottom: 24px;
}

.lib-section h2 {
	font-size: 18px;
	margin-bottom: 10px;
	padding-bottom: 6px;
	border-bottom: 1px solid rgba(217, 178, 95, .22);
}

.lib-prose {
	color: var(--lib-muted);
	font-size: 12px;
	max-width: 760px;
}

.lib-empty {
	padding: 26px;
	margin-top: 18px;
	margin-bottom: 18px;
	text-align: center;
	color: var(--lib-muted);
	border: 1px dashed var(--lib-line);
	border-radius: 3px;
}

/* -------------------------------------------------------------------------
   HUB - TILES DE CATEGORIA
   ---------------------------------------------------------------------- */

.lib-cat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
	gap: 10px;
	padding: 22px 0 4px;
}

.lib-cat {
	position: relative;
	display: block;
	padding: 14px 14px 12px;
	min-height: 118px;
	background: linear-gradient(160deg, rgba(58, 36, 80, .75), rgba(28, 18, 38, .9));
	border: 1px solid var(--lib-line);
	border-radius: 3px;
	color: var(--lib-text) !important;
	text-decoration: none !important;
	transition: border-color .15s, transform .15s, box-shadow .15s;
}

.lib-cat:hover {
	border-color: var(--lib-gold);
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .45), 0 0 14px rgba(217, 178, 95, .12);
}

.lib-cat-icon {
	display: block;
	font-size: 22px;
	line-height: 1;
	color: var(--lib-gold-hi);
	margin-bottom: 8px;
}

.lib-cat-count {
	position: absolute;
	right: 10px;
	top: 10px;
	font-size: 10px;
	color: var(--lib-muted);
	background: rgba(0, 0, 0, .35);
	border: 1px solid rgba(217, 178, 95, .18);
	padding: 1px 6px;
	border-radius: 9px;
}

.lib-cat-name {
	display: block;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 15px;
	font-weight: bold;
	color: var(--lib-gold-hi);
	margin-bottom: 4px;
}

.lib-cat-desc {
	display: block;
	font-size: 10.5px;
	line-height: 1.4;
	color: var(--lib-muted);
}

/* -------------------------------------------------------------------------
   CARDS DE REGISTRO
   ---------------------------------------------------------------------- */

.lib-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
	gap: 10px;
	margin-bottom: 20px;
}

.lib-card {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 9px;
	min-height: 68px;
	background: linear-gradient(160deg, rgba(48, 31, 64, .9), rgba(26, 17, 36, .95));
	border: 1px solid var(--lib-line);
	border-radius: 3px;
	color: var(--lib-text) !important;
	text-decoration: none !important;
	transition: border-color .12s, background .12s;
}

a.lib-card:hover {
	border-color: var(--lib-gold);
	background: linear-gradient(160deg, rgba(64, 42, 84, .95), rgba(32, 21, 44, .98));
	text-decoration: none;
}

.lib-card-art {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(circle at 50% 45%, rgba(168, 108, 224, .16), transparent 70%);
	border: 1px solid rgba(217, 178, 95, .14);
	border-radius: 2px;
	overflow: hidden;
}

.lib-card-art img {
	max-width: 44px;
	max-height: 44px;
	width: auto;
	height: auto;
	image-rendering: pixelated;
}

.lib-card-glyph {
	font-size: 24px;
	color: var(--lib-gold-hi);
}

.lib-card-body {
	flex: 1 1 auto;
	min-width: 0;
}

.lib-card-name {
	display: block;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 13.5px;
	font-weight: bold;
	color: var(--lib-gold-hi);
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lib-card-sub {
	display: block;
	font-size: 10.5px;
	color: var(--lib-muted);
	line-height: 1.35;
	margin-top: 2px;
}

.lib-card-tag {
	display: inline-block;
	margin-top: 4px;
	font-size: 9px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #c9a6ee;
}

/* -------------------------------------------------------------------------
   FICHA / DETALHE
   ---------------------------------------------------------------------- */

.lib-detail {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr);
	gap: 22px;
	padding: 22px 0 8px;
}

.lib-detail-art {
	position: relative;
	align-self: start;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 170px;
	padding: 14px;
	background:
		radial-gradient(circle at 50% 45%, rgba(168, 108, 224, .22), transparent 62%),
		linear-gradient(160deg, #2a1a3a, #150c1e);
	border: 1px solid var(--lib-gold-dark);
	border-radius: 3px;
	box-shadow: inset 0 0 30px rgba(0, 0, 0, .5);
}

.lib-detail-art img {
	max-width: 160px;
	max-height: 160px;
	image-rendering: pixelated;
	filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .55));
}

.lib-detail-glyph {
	font-size: 68px;
	color: var(--lib-gold-hi);
	text-shadow: 0 0 26px rgba(168, 108, 224, .6);
}

.lib-detail-main h1 {
	font-size: 30px;
	line-height: 1.1;
	margin-bottom: 4px;
}

.lib-detail-sub {
	color: var(--lib-muted);
	font-size: 12px;
	margin-bottom: 12px;
}

.lib-facts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 8px;
	margin: 14px 0;
}

.lib-fact {
	padding: 8px 10px;
	background: rgba(255, 255, 255, .035);
	border: 1px solid rgba(217, 178, 95, .14);
	border-radius: 2px;
}

.lib-fact span {
	display: block;
	font-size: 9px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--lib-muted);
}

.lib-fact strong {
	display: block;
	font-size: 13px;
	color: var(--lib-text);
	font-weight: bold;
	margin-top: 2px;
}

.lib-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin: 8px 0;
}

.lib-badge {
	display: inline-block;
	padding: 2px 8px;
	font-size: 10px;
	letter-spacing: .04em;
	color: #d8c4a2;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(217, 178, 95, .22);
	border-radius: 10px;
}

.lib-badge.good {
	color: #bfe6b2;
	border-color: rgba(121, 181, 107, .45);
}

.lib-badge.bad {
	color: #f0b3b3;
	border-color: rgba(217, 93, 93, .45);
}

.lib-badge.purple {
	color: #dcc2ff;
	border-color: rgba(168, 108, 224, .5);
}

/* -------------------------------------------------------------------------
   TABELAS
   ---------------------------------------------------------------------- */

.lib-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--lib-line);
	border-radius: 3px;
}

.lib-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 11.5px;
}

.lib-table th {
	text-align: left;
	padding: 8px 10px;
	background: #2b1b3a;
	color: var(--lib-gold-hi);
	font-size: 10px;
	letter-spacing: .08em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--lib-gold-dark);
	white-space: nowrap;
}

.lib-table td {
	padding: 7px 10px;
	border-bottom: 1px solid rgba(255, 255, 255, .05);
	color: var(--lib-text);
	vertical-align: middle;
}

.lib-table tr:nth-child(even) td {
	background: rgba(255, 255, 255, .02);
}

.lib-table tr:last-child td {
	border-bottom: 0;
}

.lib-table .lib-cell-img {
	width: 34px;
	text-align: center;
}

.lib-table .lib-cell-img img {
	max-width: 28px;
	max-height: 28px;
	image-rendering: pixelated;
	vertical-align: middle;
}

.lib-table .lib-num {
	text-align: right;
	white-space: nowrap;
}

.lib-inline-link {
	color: var(--lib-gold) !important;
}

.lib-inline-link:hover {
	color: #fff0c4 !important;
}

/* -------------------------------------------------------------------------
   DETALHES EXTRAS
   ---------------------------------------------------------------------- */

.lib-chip-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.lib-chip {
	display: inline-block;
	padding: 4px 9px;
	font-size: 10.5px;
	color: var(--lib-text);
	background: rgba(255, 255, 255, .045);
	border: 1px solid var(--lib-line);
	border-radius: 2px;
}

.lib-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 18px;
}

.lib-tier {
	padding: 12px;
	margin-bottom: 10px;
	background: rgba(255, 255, 255, .03);
	border: 1px solid var(--lib-line);
	border-left: 3px solid var(--lib-gold-dark);
	border-radius: 2px;
}

.lib-tier-head {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	align-items: baseline;
	margin-bottom: 6px;
}

.lib-tier-head strong {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 15px;
	color: var(--lib-gold-hi);
}

.lib-tier-price {
	color: var(--lib-gold);
	font-size: 12px;
	white-space: nowrap;
}

.lib-tier-desc {
	color: var(--lib-muted);
	font-size: 11.5px;
	margin-bottom: 8px;
}

.lib-material-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.lib-material {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 7px;
	background: rgba(0, 0, 0, .25);
	border: 1px solid rgba(217, 178, 95, .16);
	border-radius: 2px;
	font-size: 10.5px;
	color: var(--lib-text);
}

.lib-material img {
	width: 20px;
	height: 20px;
	image-rendering: pixelated;
}

.lib-reward-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 8px;
}

.lib-reward {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px;
	background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(217, 178, 95, .14);
	border-radius: 2px;
}

.lib-reward img {
	width: 30px;
	height: 30px;
	image-rendering: pixelated;
}

.lib-reward span {
	font-size: 10.5px;
	line-height: 1.3;
	color: var(--lib-text);
}

.lib-reward small {
	display: block;
	color: var(--lib-muted);
	font-size: 9.5px;
}

.lib-muted {
	color: var(--lib-muted);
}

.lib-mission-list {
	margin: 0;
	padding-left: 22px;
	color: var(--lib-text);
}

.lib-mission-list li {
	margin-bottom: 4px;
}

.lib-steps {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	counter-reset: libstep;
}

.lib-steps li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 10px 12px;
	margin-bottom: 6px;
	background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(217, 178, 95, .16);
	border-left: 3px solid var(--lib-gold-dark);
	border-radius: 2px;
}

.lib-step-num {
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 13px;
	font-weight: bold;
	color: #1a1022;
	background: var(--lib-gold);
	border-radius: 50%;
}

.lib-warn {
	padding: 12px 14px;
	margin: 14px 0;
	color: #f2d6a2;
	background: rgba(150, 100, 30, .12);
	border: 1px solid rgba(217, 178, 95, .3);
	border-radius: 2px;
	font-size: 11.5px;
}

/* -------------------------------------------------------------------------
   PAGINACAO
   ---------------------------------------------------------------------- */

.lib-pagination {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 8px;
	margin-bottom: 24px;
	font-size: 11px;
}

.lib-pagination a,
.lib-pagination span {
	display: inline-block;
	padding: 4px 9px;
	border: 1px solid var(--lib-line);
	border-radius: 2px;
	color: var(--lib-muted);
	background: rgba(255, 255, 255, .025);
}

.lib-pagination a:hover {
	border-color: var(--lib-gold);
	color: var(--lib-gold-hi);
	text-decoration: none;
}

.lib-pagination .is-active {
	border-color: var(--lib-gold);
	color: #1a1022;
	background: var(--lib-gold);
	font-weight: bold;
}

.lib-pagination .is-disabled {
	opacity: .35;
}

.lib-pagination .is-gap {
	border: 0;
	background: transparent;
}

.lib-pagination .lib-pageinfo {
	margin-left: auto;
	border: 0;
	background: transparent;
}

/* -------------------------------------------------------------------------
   MAPA
   ---------------------------------------------------------------------- */

.lib-atlas {
	position: relative;
	width: 100%;
	height: 340px;
	margin: 14px 0 20px;
	background:
		linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px) 0 0 / 100% 34px,
		linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px) 0 0 / 34px 100%,
		radial-gradient(circle at 50% 50%, #241733, #0f0917 75%);
	border: 1px solid var(--lib-gold-dark);
	border-radius: 3px;
	overflow: hidden;
}

.lib-atlas-dot {
	position: absolute;
	transform: translate(-50%, -50%);
	width: 9px;
	height: 9px;
	background: var(--lib-gold);
	border: 1px solid #3a2408;
	border-radius: 50%;
	box-shadow: 0 0 8px rgba(217, 178, 95, .65);
	cursor: pointer;
}

.lib-atlas-dot:hover {
	background: #fff1c2;
	width: 11px;
	height: 11px;
}

.lib-atlas-label {
	position: absolute;
	transform: translate(-50%, 4px);
	font-size: 9px;
	white-space: nowrap;
	color: var(--lib-muted);
	pointer-events: none;
	text-shadow: 0 1px 2px #000;
}

.lib-map-tools {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
	margin: 16px 0 20px;
}

.lib-tool {
	padding: 14px;
	background: rgba(255, 255, 255, .03);
	border: 1px solid var(--lib-line);
	border-radius: 3px;
}

.lib-tool h3 {
	font-size: 15px;
	margin-bottom: 10px;
}

.lib-tool label {
	display: block;
	font-size: 9.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--lib-muted);
	margin-bottom: 3px;
}

.lib-tool select,
.lib-tool input {
	width: 100%;
	margin-bottom: 8px;
	background: #0e0814;
	border: 1px solid var(--lib-line);
	color: var(--lib-text);
	padding: 7px 9px;
	border-radius: 2px;
	font-family: Verdana, Arial, sans-serif;
	font-size: 11.5px;
}

.lib-tool-result {
	margin-top: 10px;
	padding: 9px 11px;
	background: rgba(0, 0, 0, .3);
	border-left: 3px solid var(--lib-gold);
	font-size: 11.5px;
	color: var(--lib-text);
}

.lib-tool-result strong {
	color: var(--lib-gold-hi);
}

/* -------------------------------------------------------------------------
   MINIMAPA INTERATIVO
   ---------------------------------------------------------------------- */

.lib-minimap {
	position: relative;
	display: inline-block;
	margin: 10px 0;
	border: 1px solid var(--lib-gold-dark);
	border-radius: 3px;
	background: #0d0713;
	user-select: none;
}

.lib-mm-toolbar {
	display: flex;
	gap: 6px;
	align-items: center;
	padding: 6px;
	border-bottom: 1px solid rgba(217, 178, 95, .16);
}

.lib-mm-toolbar select {
	background: #0e0814;
	border: 1px solid var(--lib-line);
	color: var(--lib-text);
	padding: 4px 6px;
	border-radius: 2px;
	font-size: 11px;
}

.lib-mm-zoom {
	width: 24px;
	height: 24px;
	font-size: 14px;
	line-height: 1;
	color: var(--lib-gold-hi);
	background: linear-gradient(180deg, #3a2450, #231331);
	border: 1px solid var(--lib-gold-dark);
	border-radius: 2px;
	cursor: pointer;
}

.lib-mm-view {
	position: relative;
	width: 256px;
	height: 256px;
	overflow: hidden;
	cursor: grab;
	background: #0d0713;
}

.lib-mm-view.is-dragging {
	cursor: grabbing;
}

.lib-mm-img {
	display: block;
	width: 256px;
	height: 256px;
	image-rendering: pixelated;
}

.lib-mm-svg {
	position: absolute;
	inset: 0;
	width: 256px;
	height: 256px;
	pointer-events: none;
}

.lib-mm-route {
	fill: none;
	stroke: rgba(243, 216, 150, .9);
	stroke-width: 2;
	stroke-dasharray: 6 4;
	filter: drop-shadow(0 0 2px rgba(0, 0, 0, .8));
}

.lib-mm-route-dot {
	fill: var(--lib-gold-hi);
	stroke: #1a1022;
	stroke-width: 1.5;
}

.lib-mm-marker {
	position: absolute;
	transform: translate(-50%, -100%);
	z-index: 3;
	padding: 1px 5px;
	font-size: 9px;
	line-height: 1.4;
	white-space: nowrap;
	color: #1a1022;
	background: var(--lib-gold-hi);
	border: 1px solid #1a1022;
	border-radius: 7px;
	pointer-events: none;
}

.lib-mm-marker::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translateX(-50%);
	border: 4px solid transparent;
	border-top-color: var(--lib-gold-hi);
}

.lib-mm-marker-temple {
	background: #7fd4ff;
	border-color: #0a2a44;
}

.lib-mm-marker-temple::after {
	border-top-color: #7fd4ff;
}

.lib-mm-marker-npc {
	background: #ffd27f;
}

.lib-mm-marker-npc::after {
	border-top-color: #ffd27f;
}

.lib-mm-coords {
	padding: 4px 8px;
	font-size: 9.5px;
	color: var(--lib-muted);
	border-top: 1px solid rgba(217, 178, 95, .12);
	letter-spacing: .04em;
}

.lib-route-text {
	margin: 6px 0;
	padding: 10px 12px;
	background: rgba(217, 178, 95, .07);
	border-left: 3px solid var(--lib-gold);
	border-radius: 2px;
	color: var(--lib-text);
	font-size: 12px;
}

.lib-route-text strong {
	color: var(--lib-gold-hi);
}

/* -------------------------------------------------------------------------
   SPOILER (guia da quest escondido, estilo wiki)
   ---------------------------------------------------------------------- */

.lib-spoiler {
	margin: 14px 0;
	border: 1px solid var(--lib-gold-dark);
	border-radius: 3px;
	overflow: hidden;
}

.lib-spoiler-banner {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	padding: 12px 14px;
	background: rgba(150, 100, 30, .10);
	border-bottom: 1px solid rgba(217, 178, 95, .2);
	color: #f2d6a2;
	font-size: 12px;
}

.lib-spoiler-banner strong {
	color: var(--lib-gold-hi);
}

.lib-spoiler-toggle {
	padding: 6px 14px;
	font-size: 12px;
}

.lib-spoiler-always {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	margin-left: auto;
	font-size: 11px;
	color: var(--lib-muted);
	cursor: pointer;
}

.lib-spoiler-body {
	padding: 2px 0 4px;
}

.lib-spoiler-body .lib-section {
	margin: 18px 18px 18px;
}

.lib-spoiler-body .lib-warn {
	margin: 18px;
}

.lib-req-list {
	margin: 6px 0 0;
	padding-left: 20px;
	color: var(--lib-text);
	font-size: 12px;
}

.lib-req-list li {
	margin-bottom: 5px;
}

/* passo a passo das quests */

.lib-step-card {
	margin-bottom: 8px;
	padding: 10px 12px;
	background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(217, 178, 95, .16);
	border-left: 3px solid var(--lib-gold-dark);
	border-radius: 2px;
}

.lib-step-head {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-bottom: 8px;
}

.lib-step-title {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 14px;
	font-weight: bold;
	color: var(--lib-gold-hi);
}

.lib-step-pos {
	margin-top: 6px;
	font-size: 11.5px;
	line-height: 2;
	color: var(--lib-text);
}

.lib-step-pos .lib-muted {
	color: var(--lib-muted);
}

button.lib-chip {
	cursor: pointer;
	font-family: inherit;
}

button.lib-chip:hover {
	border-color: var(--lib-gold);
	color: #fff0c4;
	background: rgba(217, 178, 95, .12);
}

/* -------------------------------------------------------------------------
   RESPONSIVO
   ---------------------------------------------------------------------- */

@media (max-width: 900px) {
	.lib-hero {
		padding: 24px;
	}

	.lib-hero-art {
		position: relative;
		right: auto;
		top: auto;
		margin-bottom: 16px;
	}

	.lib-hero h1 {
		font-size: 34px;
	}

	.lib-detail {
		grid-template-columns: 150px minmax(0, 1fr);
		gap: 16px;
	}

	.lib-detail-art img {
		max-width: 128px;
		max-height: 128px;
	}
}

@media (max-width: 640px) {
	.lib-wrap {
		margin: -10px;
	}

	.lib-hero,
	.lib-page-head {
		padding: 20px 18px;
	}

	.lib-crumbs {
		padding: 9px 18px;
	}

	.lib-page-body,
	.lib-wrap > .lib-grid,
	.lib-wrap > .lib-empty,
	.lib-wrap > .lib-section,
	.lib-wrap > .lib-pagination,
	.lib-wrap > .lib-filters,
	.lib-wrap > .lib-detail,
	.lib-wrap > .lib-cat-grid {
		margin-left: 16px;
		margin-right: 16px;
	}

	.lib-hero h1 {
		font-size: 30px;
	}

	.lib-hero-art {
		width: 150px;
		height: 119px;
	}

	.lib-search {
		flex-wrap: wrap;
	}

	.lib-search input[type="search"] {
		flex: 1 1 100%;
	}

	.lib-grid {
		grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
	}

	.lib-detail {
		grid-template-columns: 1fr;
	}

	.lib-detail-art {
		min-height: 130px;
	}

	.lib-detail-main h1 {
		font-size: 24px;
	}

	.lib-facts {
		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	}
}