:root
{
	--aside-width: 300px;
	--aside-margin: 1em;
	--aside-padding: 1em;
}

.wiki-header-buttons
{
	display: flex;
	gap: 1em;
	row-gap: .2em;
	margin-bottom: .2em;
	flex-wrap: wrap;
}

.wiki-header-buttons a
{
	border-bottom: none;
}

.isaac-badge
{
	display: inline-block;
	padding: 2px 8px;
	font-size: 0.75rem;
	border-radius: 8px;
	border: 1px solid #000;
	box-shadow: 0 2px 0 #000;
	text-transform: uppercase;
	vertical-align: super;
	color: #fff;
}

.wiki-panel
{
	border: 1px solid black;
	backdrop-filter: blur(5px);
	padding: 1em;
	border: 2px solid #3b2a1a;
	border-radius: 12px;
	background-clip: padding-box;
	box-shadow: 4px 4px 0 #000;
	background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.05), rgba(0,0,0,0.05) 2px, transparent 2px, transparent 4px);
	color: white;
}

.reading-panel
{
	transition: width .2s ease-in;
	overflow: hidden;

	@media only screen and (max-width: 1000px)
	{
		width: 95%;
	}
}

.wiki-aside
{
	padding: var(--aside-padding);
	margin: var(--aside-margin);
	background-color: var(--main-grey);
	position: relative;
	float: right;
	clear: right;
	text-align: center;
	width: var(--aside-width);
	max-width: var(--aside-width);
	border-radius: 10px;

	@media only screen and (max-width: 800px)
	{
		float: none;
		clear: none;
		width: inherit;
		max-width: inherit;
	}
}

.wiki-aside .item-name
{
}

.wiki-aside-text
{
	font-size: .8em;
}

.wiki-aside-mod-thumbnail img
{
	display: inline !important;
}

.wiki-aside-mod-thumbnail h3
{
	white-space: normal !important;
}

.item-id
{
	margin-top: 0 !important;
}

.wiki-aside-title
{
	border-top: 1px solid grey;
	padding-top: .5em;
	margin-top: .5em;
	margin-bottom: 0;
}

.wiki-stat-changes
{
	margin-top: 1em;
	display: flex;
	gap: .5em;
	flex-wrap: wrap;
	justify-content: center;
}

.wiki-stat-changes button
{
	border: 1px solid grey;
}

.wiki-header-wrapper
{
	display: flex;
	border-bottom: 1px solid grey;
	margin-bottom: 1em;
}

.wiki-header
{
	margin-top: 1em;
	border-bottom: 1px solid grey;
	font-size: 1.5em;
	overflow: hidden;
	scroll-margin-top: 70px;

	display: inline-block;
	padding: 8px 14px;
	color: white;
	background: repeating-linear-gradient(-2deg, var(--stone), var(--stone) 6px, var(--stone-hi) 6px, var(--stone-hi) 9px);
	border-radius: 10px;
	box-shadow: 0 3px 0 #000, inset 0 0 0 1px rgba(0,0,0,.15);
	letter-spacing: .5px;
	font-weight: 800;
}

.wiki-item-name-badge
{
	font-size: .4em;
	vertical-align: super;
}

.wiki-video
{
	--video-width: 560px;
	--video-height: 315px;
	width: var(--video-width);
	height: var(--video-height);

	@media only screen and (max-width: 1320px)
	{
		--video-width: 480px;
		--video-height: 270px;
	}

	@media only screen and (max-width: 700px)
	{
		--video-width: 360px;
		--video-height: 202.5px;
	}
}

.effect-type
{
	font-style: normal;
	font-size: 1.5em;
}

.effect-type::after
{
	content: "";
}

#items-dropdown, #items-dropdown-input, #items-dropdown-list
{
	width: 100%;
}

#items-dropdown-list a
{
	color: inherit;
	text-decoration: inherit;
}

.item-properties .item-type.badge
{
	margin: 0;
	transform: none;
}

.isaac-video-frame
{
	position: relative;
	display: inline-block;
	width: 100%;
	max-width: 720px;
	margin: 2rem auto;
	background: var(--parchment);
	padding: 12px;
	border: 3px solid var(--stone);
	border-radius: 16px;
	box-shadow: 4px 4px 0 #000;
}

.isaac-video-frame::before
{
	content: "Provided by OciXCrom";
	position: absolute;
	top: -14px;
	left: 16px;
	background: var(--stone);
	color: #f8e5b4;
	font-size: 0.85rem;
	padding: 2px 8px;
	border-radius: 8px;
	border: 2px solid #000;
	box-shadow: 2px 2px 0 #000;
}

.isaac-video-frame iframe
{
	width: 100%;
	height: 405px;
	border-radius: 8px;
	border: 2px solid #000;
	background: #000;
}

.isaac-video-frame:hover
{
	box-shadow: 6px 6px 0 #000, 0 0 12px rgba(255, 0, 0, 0.6);
	animation: isaac-wiggle 0.3s ease-in-out 1;
}

@keyframes isaac-wiggle
{
	0%   { transform: rotate(0deg); }
	25%  { transform: rotate(-1.5deg); }
	50%  { transform: rotate(1.5deg); }
	75%  { transform: rotate(-1deg); }
	100% { transform: rotate(0deg); }
}

.isaac-sound
{
	display: flex;
	align-items: center;
	margin: 0.5rem 0;
}

.sound-btn
{
	background: var(--parchment);
	border: 2px solid #3b2a1a;
	border-radius: 50%;
	width: 36px;
	height: 36px;
	cursor: pointer;
	font-size: 1.1rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 2px 2px 0 #3b2a1a;
	transition: transform 0.1s, background 0.2s;
}

.sound-btn:hover
{
	background: var(--gold);
	transform: scale(1.1);
}

.sound-btn:active
{
	background: #c4ae82;
	transform: scale(0.95);
}

.sound-name
{
	font-size: 0.8rem;
	margin-left: 0.6rem;
	opacity: 0.9;
}

.back-button-wrapper
{
	text-align: center;
	margin: 3rem 0 1rem;
}

.isaac-big-button
{
	display: inline-block;
	background: linear-gradient(180deg, #6b1b1b, #3b0f0f);
	color: #fff;
	font-size: 1rem;
	padding: 1rem 2rem;
	border: 3px solid #000;
	border-radius: 12px;
	text-decoration: none;
	text-shadow: 2px 2px #000;
	box-shadow: 0 6px 0 #000, 0 6px 15px rgba(0,0,0,0.6);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	border-bottom: none !important;
}

.isaac-big-button:hover
{
	transform: translateY(-2px);
	box-shadow: 0 8px 0 #000, 0 8px 20px rgba(0,0,0,0.8);
	background: linear-gradient(180deg, #8d2323, #4a1313);
}

.isaac-big-button:active
{
	transform: translateY(3px);
	box-shadow: 0 2px 0 #000, 0 2px 10px rgba(0,0,0,0.5);
}

.mod-logo
{
	margin-top: 0;
}

.toc-box
{
	background: rgba(0, 0, 0, 0.3);
	padding: 1em;
	margin: 1em 0 2em;
	border: 1px solid var(--bs-dark);
	border-radius: 10px;
	font-size: 0.9em;
	display: block;
	max-width: 100%;
	box-sizing: border-box; 
	overflow-x: auto;
}

.toc-box h2, h2.similar-items
{
	font-size: 1.1em;
	margin-bottom: 0.5em;
	font-weight: bold;
	color: var(--parchment);
}

.toc-box ul
{
	list-style: decimal;
	padding-left: 1.5em;
	margin: 0;
}

.toc-box li
{
	margin: 0.3em 0;
}

.toc-box a
{
	text-decoration: none;
	color: #444;
}

.toc-box a:hover
{
	text-decoration: underline;
	color: #000;
}

.similar-items-box
{
	background: rgba(0, 0, 0, 0.3);
	padding: 1em;
	margin: 1em 0 2em;
	border: 1px solid var(--bs-dark);
	border-radius: 10px;
	font-size: 0.9em;
	display: block;
	max-width: 100%;
	box-sizing: border-box; 
	overflow-x: hidden;
	text-align: center;
	padding-bottom: 20px;
	max-height: fit-content;
	overflow-y: hidden;
}

.similar-items-box h3
{
	margin-bottom: 1rem;
	font-size: 1.2rem;
}

.similar-items-row
{
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
	align-items: baseline;
}

.similar-item
{
	transition: opacity 0.2s, transform 0.2s;
	width: 100px;
}

.similar-item.faded
{
	opacity: 0.3;
}

.similar-item.faded:hover
{
	opacity: 1;
	transform: scale(1.2);
}

.similar-item.current
{
	opacity: 1;
}

.item-icon-in-description
{
	cursor: zoom-in;
	z-index: 100;
}

.zoomed-icon
{
	width: 80%;
	height: 80%;
	transition: filter 0.3s ease;
}

#zoomed-icon-modal
{
	backdrop-filter: blur(10px);
}

@keyframes bounce-inward
{
	0%   { transform: scale(1); }
	30%  { transform: scale(0.75); }
	50%  { transform: scale(1.05); }
	70%  { transform: scale(0.9); }
	100% { transform: scale(1); }
}

.bounce-inward
{
	animation: bounce-inward 0.3s ease;
}

.mods-container
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	row-gap: 30px;
	padding: 20px;
}

.mod-card
{
	width: 200px;
	text-align: center;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	border-bottom: none !important;
	position: relative;

	@media (max-width: 768px)
	{
		width: 100px;
	}
}

.mod-card:hover
{
	transform: translateY(-5px);
	box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

.mod-card img
{
	width: 200px;
	height: 200px;
	object-fit: cover;
	border-radius: 8px;
	display: block;

	@media (max-width: 768px)
	{
		width: 100px;
		height: 100px;
	}
}

.mod-card h3
{
	margin-top: 8px;
	font-size: 1em;

	@media (max-width: 768px)
	{
		font-size: .5em;
	}
}

.mod-card .add-your-mod
{
	color: lime;
}

.mod-card .repentogon-logo
{
	width: 1em;
	height: 1em;
	display: inline-block;
}

.item-description
{
	color: #0089FF;
}

.hytale-invcategory
{
	font-size: 1.5em;
}

.game-menu-frame
{
	overflow: auto;
}

.crafting-card
{
	background: #17202b;
	border-radius: 14px;
	padding: 16px;
	max-width: 720px;
	color: #e6e6e6;
	box-shadow: 0 10px 25px rgba(0,0,0,0.35);
	margin-bottom: 1em;
}

.crafting-card.resource-types
{
	max-width: none;
}

.crafting-header
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 14px;
}

.workbench
{
	position: relative;
	overflow: hidden;

	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease,
		border-color 0.18s ease;
		
	display: flex;
	align-items: center;
	gap: 10px;
	background: rgb(33,37,41);
	padding: 8px 12px;
	border-radius: 10px;
	text-decoration: none;
	color: inherit;
}

.workbench img
{
	width: 48px;
	height: 48px;
	image-rendering: pixelated;
}

.crafting-properties
{
	display: flex;
	gap: 12px;
}

.craft-property
{
	position: relative;
	overflow: hidden;

	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease,
		border-color 0.18s ease;

	background: rgb(33,37,41);
	padding: 8px 12px;
	border-radius: 10px;
	font-weight: 600;
	color: #9fd4ff;
}

.crafting-body
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: rgb(33,37,41);
	border-radius: 12px;
	padding: 14px;
}

.ingredients
{
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.ingredient, .result
{
	position: relative;
	overflow: hidden;

	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease,
		border-color 0.18s ease;

	border: 1px solid rgba(159, 212, 255, 0.15);

	width: 110px;
	height: 132px;
	flex-shrink: 0;

	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;

	text-decoration: none;
	color: inherit;
}

.ingredient img, .result img
{
	width: 64px;
	height: 64px;
	margin-top: 8px;
}

.ingredient::before, .result::before, .workbench::before, .craft-property::before
{
	content: "";
	position: absolute;
	top: -120%;
	left: -120%;
	width: 200%;
	height: 200%;
	background: linear-gradient(
		120deg,
		transparent 40%,
		rgba(159, 212, 255, 0.12) 50%,
		transparent 60%
		);
	opacity: 0;
	transition: opacity 0.15s ease;
}

.ingredient:hover, .result:hover, .workbench:hover, .craft-property:hover
{
	transform: scale(1.06);
	box-shadow:
		0 0 0 1px rgba(159, 212, 255, 0.45),
	    0 10px 20px rgba(0, 0, 0, 0.6);
}

.ingredient:hover::before, .result:hover::before, .workbench:hover::before, .craft-property:hover::before
{
	opacity: 1;
	animation: swipe-gloss 0.55s ease-out;
}

.ingredient:hover img, .result:hover img, .workbench:hover img, .craft-property:hover img
{
	filter: brightness(1.15);
}

@keyframes swipe-gloss
{
	from { transform: translateX(-60%) translateY(-60%); }
	to { transform: translateX(60%) translateY(60%); }
}

.ingredient-info, .result-info
{
	text-align: center;
	margin-top: 6px;
}

.name
{
	font-size: 0.85rem;
	display: block;
	word-break: break-word;
}

.amount
{
	font-size: 0.8rem;
	color: #9fd4ff;
	font-weight: 600;
	position: absolute;
	top: 5px;
	right: 5px;
}

.craft-arrow
{
	font-size: 2rem;
	margin: 0 14px;
	color: #9fd4ff;
	animation: arrow-pulse 1.6s ease-in-out infinite;
}

@keyframes arrow-pulse
{
	0%, 100% { opacity: 0.6; }
	50% { opacity: 1; }
}

@media (max-width: 900px)
{
	.crafting-body
	{
		flex-direction: column;
		gap: 14px;
	}

	.ingredients
	{
		flex-wrap: wrap;
		justify-content: center;
	}

	.craft-arrow
	{
		font-size: 1.8rem;
		transform: rotate(90deg);
		margin: 4px 0;
	}

	.result
	{
		margin-top: 6px;
	}
}

.item-properties
{
	width: 100%;
	max-width: 480px;
	border-collapse: separate;
	border-spacing: 0 6px;
	background: transparent;
	font-family: system-ui, sans-serif;
	color: #e6e6e6;
	margin-top: 16px;
}

.item-properties tr
{
	background: rgb(33,37,41);
	border-radius: 8px;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	position: relative;
}

.item-properties tr:not(:last-child)::after
{
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 0;
	height: 1px;
	background: rgba(255,255,255,0.08);
	border-radius: 1px;
}

.item-properties tr:hover
{
	transform: scale(1.02);
	box-shadow: 0 6px 12px rgba(0,0,0,0.35);
}

.item-properties th
{
	text-align: left;
	font-weight: 600;
	padding: 8px 12px;
	color: #9fd4ff;
	width: 45%;
	vertical-align: middle;
}

.item-properties td
{
	padding: 8px 12px;
	text-align: left;
	vertical-align: middle;
	color: #e6e6e6;
}

.item-properties tr:first-child th,
.item-properties tr:first-child td
{
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}

.item-properties tr:last-child th,
.item-properties tr:last-child td
{
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}

.item-properties td .yesno
{
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 4px;
	padding: 3px 8px;
	border-radius: var(--bs-border-radius);
	font-weight: 600;
	font-size: 0.8rem;
	min-width: 36px;
	color: #fff;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	line-height: 1;
}

.item-properties td .yesno.yes
{
	background-color: #4bd37b;
	box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.item-properties td .yesno.no
{
	background-color: #ff4a4a;
	box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.item-properties td .yesno::before
{
	font-family: "Segoe UI Symbol", "Arial", sans-serif;
	font-weight: bold;
}

.item-properties td .yesno.yes::before
{
	content: "✔";
	color: #fff;
}

.item-properties td .yesno.no::before
{
	content: "✖";
	color: #fff;
}

.item-properties i
{
	font-size: .7em;
}