/* ==========================================================
   EldenRO Monster Bestiary View
========================================================== */

.elden-bestiary {
	max-width: 1180px;
	margin: 0 auto;
	padding: 28px;
	color: #f6dfaa;
	background:
		radial-gradient(circle at 20% 0%, rgba(190,139,55,.14), transparent 34%),
		linear-gradient(180deg, #15100b, #080604);
	border: 1px solid rgba(201,153,72,.28);
}

/* ==========================================================
   Shared Panels
========================================================== */

.bestiary-hero,
.bestiary-panel {
	border: 1px solid rgba(205,157,79,.30);
	border-radius: 4px;
	box-shadow:
		inset 0 0 55px rgba(0,0,0,.65),
		0 18px 45px rgba(0,0,0,.35);
}

.bestiary-panel {
	padding: 26px;
	background:
		linear-gradient(135deg, rgba(32,22,14,.78), rgba(8,7,5,.96));
	box-shadow:
		inset 0 0 45px rgba(0,0,0,.55),
		0 14px 30px rgba(0,0,0,.22);
}

.bestiary-panel.wide {
	margin-bottom: 22px;
}

.bestiary-panel h2 {
	margin: 0 0 22px;
	font-size: 34px;
	color: #ffe6a4;
	font-variant: small-caps;
}

/* ==========================================================
   Hero
========================================================== */

.bestiary-hero {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: 48% 52%;
	min-height: 430px;
	margin-bottom: 22px;
	background-image:
		linear-gradient(90deg, rgba(8,6,4,.18), rgba(8,6,4,.78)),
		url('/themes/eldenro/img/bestiary-normal.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.bestiary-hero.is-mvp {
	border-color: rgba(255,120,60,.38);
	background-image:
		linear-gradient(90deg, rgba(10,4,4,.42), rgba(10,4,4,.88)),
		url('/themes/eldenro/img/bestiary-mvp.jpg');
	background-size: cover;
	background-position: 60% center;
	background-repeat: no-repeat;
	filter: saturate(.82);
	box-shadow:
		0 0 40px rgba(255,90,40,.10),
		inset 0 0 60px rgba(0,0,0,.55);
}

.bestiary-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(circle at 27% 50%, rgba(255,204,105,.20), transparent 28%),
		linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.58));
}

.bestiary-hero.is-mvp::after {
	background:
		radial-gradient(circle at 25% 50%, rgba(255,120,60,.12), transparent 30%),
		linear-gradient(90deg, rgba(0,0,0,.18), rgba(0,0,0,.42));
	backdrop-filter: blur(1.5px);
}

.bestiary-hero > * {
	position: relative;
	z-index: 2;
}

.bestiary-art {
	position: relative;
	min-height: 430px;
	display: grid;
	place-items: center;
	overflow: hidden;
	border-right: 1px solid rgba(205,157,79,.30);
}

.bestiary-map-label {
	position: absolute;
	top: 22px;
	left: 24px;
	z-index: 6;
	padding: 10px 14px;
	background: rgba(0,0,0,.45);
	border-left: 3px solid rgba(255,200,90,.75);
	backdrop-filter: blur(2px);
}

.bestiary-map-label span {
	display: block;
	color: #d7aa52;
	font-size: 11px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: .08em;
}

.bestiary-map-label strong {
	display: block;
	margin-top: 3px;
	color: #ffe7aa;
	font-size: 18px;
}

.bestiary-sigil {
	position: absolute;
	z-index: 2;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	border: 1px solid rgba(255,220,145,.22);
	background: radial-gradient(circle, rgba(255,210,120,.08), transparent 62%);
	box-shadow:
		0 0 100px rgba(255,190,80,.22),
		inset 0 0 40px rgba(255,210,120,.12);
	animation: sigilRotate 18s linear infinite;
}

@keyframes sigilRotate {
	to { transform: rotate(360deg); }
}

.bestiary-art img {
	position: relative;
	z-index: 5;
	transform: scale(1.65);
	image-rendering: pixelated;
	filter:
		drop-shadow(0 0 24px rgba(255,220,140,.65))
		drop-shadow(0 0 70px rgba(255,190,80,.32))
		drop-shadow(0 24px 40px rgba(0,0,0,.75));
	transition: transform .25s ease;
}

.bestiary-art:hover img {
	transform: scale(1.72);
}

.bestiary-info {
	padding: 58px 48px 38px;
	backdrop-filter: blur(2px);
	background:
		linear-gradient(90deg, rgba(8,6,4,.52), rgba(8,6,4,.82) 38%, rgba(8,6,4,.92));
}

.bestiary-kicker {
	font-size: 13px;
	font-weight: 800;
	color: #d8b76f;
	text-transform: uppercase;
	letter-spacing: .08em;
}

.bestiary-kicker em {
	margin-left: 8px;
	padding: 3px 8px;
	border: 1px solid rgba(255,205,112,.35);
	border-radius: 999px;
	font-style: normal;
	font-size: 10px;
}

.bestiary-kicker .danger {
	color: #ff8787;
	border-color: rgba(255,90,90,.45);
}

.bestiary-info h1 {
	margin: 8px 0;
	font-size: 58px;
	line-height: .9;
	letter-spacing: -2px;
	color: #ffe8ad;
	text-shadow:
		0 0 30px rgba(255,190,80,.22),
		0 2px 0 rgba(70,40,10,.65);
}

.bestiary-meta {
	color: #c9a864;
	font-weight: 700;
}

.bestiary-lore {
	max-width: 680px;
	margin-top: 14px;
	color: rgba(246,223,170,.72);
	line-height: 1.55;
}
.bestiary-hero {
	background-image:
		linear-gradient(90deg, rgba(8,6,4,.35), rgba(8,6,4,.92)),
		url('/themes/eldenro/img/bestiary-normal.jpg') !important;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
}

.bestiary-hero.is-mvp {
	background-image:
		linear-gradient(90deg, rgba(8,4,4,.35), rgba(8,4,4,.94)),
		url('/themes/eldenro/img/bestiary-mvp.jpg') !important;
}
/* ==========================================================
   Main Stats
========================================================== */

.bestiary-pills {
	display: grid;
	grid-template-columns: .85fr .9fr 1fr 1.35fr;
	gap: 10px;
	margin-top: 28px;
}

.bestiary-pills div {
	padding: 14px 10px;
}

.bestiary-pills strong {
	font-size: clamp(17px, 1.55vw, 21px);
	line-height: 1.05;
	white-space: nowrap;
}

.bestiary-pills div:last-child strong {
	font-size: clamp(16px, 1.35vw, 20px);
	letter-spacing: -.3px;
}

.bestiary-pills div {
	min-width: 0;
	padding: 14px 12px;
}

.bestiary-pills strong {
	font-size: clamp(18px, 1.7vw, 22px);
	line-height: 1.05;
	white-space: normal;
	word-break: normal;
	overflow-wrap: anywhere;
}

.bestiary-pills div,
.bestiary-attrs div {
	position: relative;
	overflow: hidden;
	padding: 14px 16px;
	background: rgba(0,0,0,.38);
	border: 1px solid rgba(197,145,62,.24);
}

.bestiary-pills strong,
.bestiary-attrs strong {
	display: block;
	color: #ffd36f;
	font-size: 22px;
}

.bestiary-pills span,
.bestiary-attrs span {
	font-size: 10px;
	font-weight: 900;
	color: rgba(216,183,111,.68);
	text-transform: uppercase;
	display: block;
	margin-top: 6px;
}

.bestiary-two {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
	margin-bottom: 22px;
}

.bestiary-lines {
	display: grid;
	gap: 10px;
}

.bestiary-lines div {
	display: flex;
	justify-content: space-between;
	padding: 12px 0;
	border-bottom: 1px solid rgba(214,165,83,.16);
}

.bestiary-lines span {
	color: rgba(246,223,170,.68);
}

.bestiary-lines strong {
	color: #ffd36f;
	font-size: 18px;
}

.bestiary-attrs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

/* ==========================================================
   Drops
========================================================== */

.bestiary-drops {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.bestiary-drop {
	position: relative;
	display: grid;
	grid-template-columns: 58px 1fr auto;
	align-items: center;
	gap: 14px;
	padding: 14px;
	background: rgba(0,0,0,.34);
	border: 1px solid rgba(197,145,62,.22);
	backdrop-filter: blur(2px);
	transition: .2s ease;
}

.bestiary-drop:hover {
	transform: translateY(-3px);
	border-color: rgba(255,207,112,.55);
	box-shadow:
		0 0 30px rgba(255,190,80,.16),
		0 10px 24px rgba(0,0,0,.28);
}

.bestiary-drop-link {
	position: absolute;
	inset: 0;
	z-index: 5;
}

.drop-icon {
	width: 58px;
	height: 58px;
	display: grid;
	place-items: center;
	background: radial-gradient(circle, rgba(255,210,120,.13), rgba(0,0,0,.45));
	border: 1px solid rgba(222,174,91,.22);
}

.drop-icon img {
	max-width: 36px;
	max-height: 36px;
	image-rendering: pixelated;
}

.drop-body h3 {
	margin: 0;
	color: #ffe19a;
	font-size: 17px;
	line-height: 1.05;
}

.drop-body p {
	margin: 4px 0 0;
	color: rgba(216,183,111,.55);
	font-size: 11px;
}

.drop-body span {
	display: inline-block;
	margin-bottom: 5px;
	color: #ffb45c;
	font-size: 10px;
	font-weight: 900;
	text-transform: uppercase;
}

.drop-rate {
	color: #ffe8a6;
	font-size: 23px;
	font-weight: 950;
}

.bestiary-drop.is-card {
	border-color: rgba(255,70,70,.50);
	background: linear-gradient(135deg, rgba(52,12,12,.86), rgba(8,5,4,.96));
	box-shadow:
		0 0 34px rgba(255,70,70,.18),
		inset 0 0 24px rgba(255,70,70,.08);
}

.bestiary-drop.is-rare {
	border-color: rgba(165,105,255,.50);
	background: linear-gradient(135deg, rgba(35,17,56,.86), rgba(8,5,10,.96));
	box-shadow:
		0 0 34px rgba(165,105,255,.18),
		inset 0 0 24px rgba(165,105,255,.08);
}

.bestiary-drop.is-mvp-drop {
	border-color: rgba(255,175,70,.60);
	background: linear-gradient(135deg, rgba(56,32,8,.88), rgba(8,5,3,.96));
	box-shadow:
		0 0 34px rgba(255,175,70,.18),
		inset 0 0 24px rgba(255,175,70,.08);
}

/* ==========================================================
   Element Pill
========================================================== */

.element-pill::before {
	content: "";
	position: absolute;
	inset: -40%;
	opacity: .32;
	pointer-events: none;
}

.element-water {
	background:
		radial-gradient(circle at 78% 50%, rgba(75,170,255,.35), transparent 38%),
		linear-gradient(135deg, rgba(13,31,47,.96), rgba(5,8,13,.98)) !important;
	border-color: rgba(80,180,255,.72) !important;
	box-shadow:
		0 0 28px rgba(75,170,255,.24),
		inset 0 0 28px rgba(75,170,255,.14);
}

.element-water strong {
	color: #9ed9ff !important;
	text-shadow: 0 0 18px rgba(80,180,255,.58);
}

.element-fire {
	background:
		linear-gradient(135deg, rgba(55,22,10,.94), rgba(10,6,4,.98)) !important;
	border-color: rgba(255,105,60,.58) !important;
	box-shadow:
		0 0 28px rgba(255,90,40,.18),
		inset 0 0 22px rgba(255,90,40,.10);
}

.element-fire strong {
	color: #ff9b61 !important;
	text-shadow: 0 0 18px rgba(255,90,40,.48);
}

.element-earth {
	border-color: rgba(174,128,72,.55) !important;
}

.element-earth strong {
	color: #d6a86f !important;
	text-shadow: 0 0 16px rgba(160,105,45,.42);
}

.element-wind {
	border-color: rgba(150,255,178,.45) !important;
}

.element-wind strong {
	color: #a9ffc2 !important;
	text-shadow: 0 0 16px rgba(120,255,175,.42);
}

.element-holy {
	border-color: rgba(255,235,145,.58) !important;
}

.element-holy strong {
	color: #fff0a8 !important;
	text-shadow: 0 0 20px rgba(255,230,130,.55);
}

.element-shadow,
.element-dark {
	background:
		linear-gradient(135deg, rgba(32,18,52,.94), rgba(8,5,12,.98)) !important;
	border-color: rgba(160,105,255,.58) !important;
	box-shadow:
		0 0 28px rgba(150,90,255,.18),
		inset 0 0 22px rgba(150,90,255,.10);
}

.element-shadow strong,
.element-dark strong {
	color: #c69aff !important;
	text-shadow: 0 0 18px rgba(150,90,255,.48);
}

.element-undead {
	border-color: rgba(130,220,190,.42) !important;
}

.element-undead strong {
	color: #8ff0d4 !important;
	text-shadow: 0 0 18px rgba(90,220,180,.42);
}

.element-poison {
	border-color: rgba(170,255,90,.45) !important;
}

.element-poison strong {
	color: #baff78 !important;
	text-shadow: 0 0 18px rgba(150,255,90,.44);
}

.element-ghost {
	border-color: rgba(185,205,255,.45) !important;
}

.element-ghost strong {
	color: #cbd7ff !important;
	text-shadow: 0 0 18px rgba(170,190,255,.42);
}

/* ==========================================================
   Monster Skills Table
========================================================== */

.bestiary-skill-table {
	border: 1px solid rgba(205,157,79,.28);
	background: rgba(0,0,0,.28);
	overflow: hidden;
}

.skill-table-head,
.skill-table-row {
	display: grid;
	grid-template-columns: 2.2fr 1fr .7fr .8fr .8fr .8fr;
	align-items: center;
}

.skill-table-head {
	background:
		linear-gradient(180deg, rgba(52,37,20,.88), rgba(18,12,7,.96));
	border-bottom: 1px solid rgba(205,157,79,.32);
	color: #d8b76f;
	font-size: 11px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: .08em;
}

.skill-table-head div,
.skill-table-row > div {
	padding: 12px 14px;
	border-right: 1px solid rgba(205,157,79,.14);
}

.skill-table-head div:last-child,
.skill-table-row > div:last-child {
	border-right: 0;
}

.skill-table-row {
	min-height: 58px;
	background:
		linear-gradient(90deg, rgba(17,12,8,.92), rgba(7,6,4,.96));
	border-bottom: 1px solid rgba(205,157,79,.14);
	color: rgba(255,232,180,.86);
	font-size: 14px;
}

.skill-table-row:nth-child(odd) {
	background:
		linear-gradient(90deg, rgba(24,16,10,.92), rgba(8,6,4,.96));
}

.skill-table-row:hover {
	background:
		linear-gradient(90deg, rgba(45,30,14,.95), rgba(12,8,5,.98));
	box-shadow: inset 3px 0 0 rgba(255,205,110,.65);
}

.skill-name-cell {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #ffe4a2;
	font-weight: 800;
}

.skill-name-cell img {
	width: 32px;
	height: 32px;
	padding: 3px;
	background:
		radial-gradient(circle, rgba(255,210,120,.16), rgba(0,0,0,.45));
	border: 1px solid rgba(222,174,91,.25);
	image-rendering: pixelated;
	box-shadow: 0 0 12px rgba(255,190,80,.12);
}

/* ==========================================================
   Misc
========================================================== */

.empty-note {
	color: rgba(246,223,170,.65);
}

/* ==========================================================
   Responsive
========================================================== */

@media (max-width: 900px) {
	.elden-bestiary {
		padding: 16px;
	}

	.bestiary-hero,
	.bestiary-two {
		grid-template-columns: 1fr;
	}

	.bestiary-art {
		border-right: 0;
		border-bottom: 1px solid rgba(205,157,79,.30);
	}

	.bestiary-art img {
		transform: scale(1.3);
	}

	.bestiary-art:hover img {
		transform: scale(1.38);
	}

	.bestiary-info {
		padding: 38px 24px 26px;
	}

	.bestiary-info h1 {
		font-size: 42px;
	}

	.bestiary-pills,
	.bestiary-drops {
		grid-template-columns: 1fr 1fr;
	}

	.skill-table-head {
		display: none;
	}

	.skill-table-row {
		grid-template-columns: 1fr 1fr;
	}

	.skill-name-cell {
		grid-column: 1 / -1;
	}

	.skill-table-row > div {
		border-right: 0;
		border-bottom: 1px solid rgba(205,157,79,.10);
	}
}