/* Library pages: Bestiary (pages/bestiary.php) and Spells (spells.html.twig). */

/* ===== Bestiary ===== */

.bestiary-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 12px 18px;
	margin: 0 0 12px;
	padding: 12px 14px;
	background: #f6eed7;
	border: 1px solid rgba(74, 46, 25, 0.3);
}

.bestiary-search,
.bestiary-sort { display: grid; gap: 4px; font-weight: bold; color: var(--wood-700); }
.bestiary-search { flex: 1 1 220px; }
.content .bestiary-search input { width: 100%; }

.bestiary-count { margin: 0 0 8px; font-size: 12px; color: var(--ink-soft); }
.bestiary-count:empty { display: none; }

.bestiary-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bestiary-card {
	position: relative;
	padding: 8px 8px 10px;
	text-align: center;
	background: #f6eed7;
	border: 1px solid rgba(74, 46, 25, 0.3);
}
.bestiary-card[hidden] { display: none; }
.bestiary-card.is-boss { border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); }

.bestiary-card a { display: grid; justify-items: center; gap: 4px; text-decoration: none; }
.bestiary-card a:hover .bestiary-name { text-decoration: underline; }
.bestiary-card img { image-rendering: pixelated; background: rgba(74, 46, 25, 0.08); }
.bestiary-name { font-weight: bold; color: var(--link); line-height: 1.3; }

.bestiary-card dl {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin: 6px 0 0;
	font-size: 11px;
}
.bestiary-card dl div { display: flex; gap: 3px; }
.bestiary-card dt { color: var(--ink-soft); }
.bestiary-card dd { margin: 0; font-weight: bold; color: var(--wood-700); }

.bestiary-badge {
	position: absolute;
	top: 6px;
	right: 6px;
	padding: 1px 5px;
	font-size: 10px;
	font-weight: bold;
	color: var(--wood-950);
	background: var(--brass);
}

/* ===== Spells ===== */

.spell-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.spell-filter a {
	padding: 6px 12px;
	font-weight: bold;
	text-decoration: none;
	color: var(--wood-700);
	background: #fbf5e4;
	border: 1px solid rgba(74, 46, 25, 0.35);
}
.spell-filter a:hover { background: var(--parchment-dark); }
.spell-filter a[aria-current] { color: var(--wood-950); background: var(--brass); border-color: var(--wood-700); }

/* Tabs: radio buttons drive which panel is visible, no script needed. */
.spell-tabs > input { position: absolute; opacity: 0; pointer-events: none; }
.spell-tabs > label {
	display: inline-block;
	margin: 0 2px 0 0;
	padding: 8px 16px;
	font-weight: bold;
	color: var(--parchment);
	background: var(--wood-700);
	cursor: pointer;
}
.spell-tabs > input:checked + label { color: var(--wood-950); background: var(--brass); }
.spell-tabs > input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; }
.spell-panel { display: none; border-top: 3px solid var(--brass); overflow-x: auto; }
#tab_instant:checked ~ .spell-panel:nth-of-type(1),
#tab_conjure:checked ~ .spell-panel:nth-of-type(2),
#tab_rune:checked ~ .spell-panel:nth-of-type(3) { display: block; }

.content .spell-table { width: 100%; border-collapse: collapse; background: #f6eed7; }
.content .spell-table th {
	padding: 8px 10px;
	text-align: left;
	color: var(--parchment);
	background: var(--wood-700);
}
.content .spell-table td { padding: 7px 10px; border-bottom: 1px solid rgba(74, 46, 25, 0.12); vertical-align: middle; }
.content .spell-table tbody tr:nth-child(even) td { background: rgba(74, 46, 25, 0.05); }
.spell-name { font-weight: bold; color: var(--wood-700); }
.spell-table code { white-space: nowrap; font-size: 12px; color: var(--ink); background: rgba(74, 46, 25, 0.08); padding: 1px 5px; }
.spell-vocations { font-size: 12px; color: var(--ink-soft); }
.spell-item { white-space: nowrap; }
.spell-item img { image-rendering: pixelated; vertical-align: middle; }
.spell-item span { font-size: 11px; color: var(--ink-soft); }
.spell-premium { font-size: 10px; color: var(--wood-950); background: var(--brass); padding: 1px 4px; }

/* ===== Creature page (monster.html.twig) ===== */

.creature-head { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; }
.creature-sprite {
	flex: none;
	width: 80px;
	height: 80px;
	display: grid;
	place-items: center;
	background: rgba(74, 46, 25, 0.1);
	border: 1px solid rgba(74, 46, 25, 0.3);
}
.creature-sprite img { image-rendering: pixelated; }
.content .creature-name { display: inline; margin: 0 8px 0 0; font-size: 1.8rem; }
.creature-head .bestiary-badge { position: static; vertical-align: middle; }
.creature-race { margin: 4px 0 0; color: var(--ink-soft); }

.creature-stats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 8px;
	margin: 0 0 18px;
}
.creature-stats div { padding: 8px 10px; background: #f6eed7; border: 1px solid rgba(74, 46, 25, 0.25); border-left: 3px solid var(--brass); }
.creature-stats dt { font-size: 11px; color: var(--ink-soft); }
.creature-stats dd { margin: 2px 0 0; font-weight: bold; color: var(--wood-700); }

.creature-section { margin: 0 0 18px; }
.content .creature-section h3 { margin: 0 0 8px; }

.element-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; padding: 0; list-style: none; }
.element-list li {
	display: grid;
	min-width: 84px;
	padding: 6px 10px;
	text-align: center;
	background: #f6eed7;
	border: 1px solid rgba(74, 46, 25, 0.3);
}
.element-list span { font-size: 12px; color: var(--ink-soft); }
.element-list b { font-size: 15px; color: var(--wood-700); }
.element-list .is-resist b { color: #2f6b2a; }
.element-list .is-weak b { color: #8b1a1a; }
.element-list .is-immune { background: rgba(47, 107, 42, 0.12); }
.element-list .is-immune b { color: #2f6b2a; }

.voice-list { margin: 0; padding: 0; list-style: none; }
.voice-list li { padding: 4px 0 4px 12px; font-style: italic; border-left: 3px solid var(--brass); }
.voice-list li + li { margin-top: 4px; }

.loot-tier + .loot-tier { margin-top: 12px; }
.content .loot-tier h4 { margin: 0 0 6px; font: 1.05rem/1.2 var(--font-display); color: var(--wood-700); }
.loot-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 4px 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.loot-list li { padding: 0; background: #f6eed7; border: 1px solid rgba(74, 46, 25, 0.18); }
.loot-list li:hover { border-color: var(--brass); }
.loot-link {
	display: grid;
	color: inherit;
	text-decoration: none;
	grid-template-columns: 32px minmax(0, 1fr) auto;
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: 8px;
	padding: 4px 8px;
}
.loot-link:hover .loot-name { text-decoration: underline; }
.loot-list img { grid-row: 1 / span 2; image-rendering: pixelated; }
.loot-name { font-weight: bold; color: var(--wood-700); }
.loot-count { grid-column: 2; font-size: 11px; color: var(--ink-soft); }
.loot-chance { grid-column: 3; grid-row: 1 / span 2; font-weight: bold; color: var(--ink); }

/* ===== Bot Routes (content/botroutes.html, built by tools/gen-bot-routes.ts) ===== */

.content .route-table { width: 100%; margin: 8px 0 18px; border-collapse: collapse; background: #f6eed7; }
.content .route-table th { padding: 8px 10px; text-align: left; color: var(--parchment); background: var(--wood-700); }
.content .route-table td { padding: 8px 10px; border-bottom: 1px solid rgba(74, 46, 25, 0.12); }
.content .route-table tbody tr:nth-child(even) td { background: rgba(74, 46, 25, 0.05); }
.route-table small { color: var(--ink-soft); }
.route-table td:nth-child(2),
.route-table td:last-child { white-space: nowrap; }
@media (max-width: 640px) {
	.content .route-table { display: block; overflow-x: auto; }
}