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

.wiki-header-buttons
{
	margin-bottom: 1em;
}

.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);
}

.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(--txt);
	position: relative;
	float: right;
	clear: right;
	text-align: center;
	width: var(--aside-width);
	max-width: var(--aside-width);
	border-radius: 10px;
	color: black;

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

.wiki-aside .item-name
{
	color: black !important;
}

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

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

.wiki-aside-title
{
	border-top: 1px solid grey;
	padding-top: .5em;
	margin-top: .5em;
	color: black;
	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: var(--ink);
	background: repeating-linear-gradient(-2deg, var(--parchment), var(--parchment) 6px, #efd7aa 6px, #efd7aa 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-header:hover
{

}

.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;
	}
}

.wiki-altar
{
	background-image: url(/core/assets/img/uploads/isaac/wiki_Item_altar.png);
	width: 81px;
	height: 69px;
	display: inline-block;
	background-size: 100%;	
}

.wiki-altar-float
{  
	animation-name: wiki-altar-float;
	animation-duration: 1.2s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}
 
@keyframes wiki-altar-float
{
	0% { transform: translate(0,  0px); }
	50% { transform: translate(0, 15px); }
	100% { transform: translate(0, -0px); }
}

.wiki-collection-grid
{
	display: grid;
	grid-template-columns: repeat(20, 8px);
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	border-top: 1px solid #666;
	border-left: 1px solid #666;
	width: max-content;
}

.wiki-collection-grid div
{
	width: 8px;
	height: 8px;
	border-bottom: 1px solid #666;
	border-right: 1px solid #666;
}

.wiki-collection-grid .selected
{
	background-color: var(--gold);
}

.wiki-collection-grid div:hover
{
	background-color: var(--parchment);
}

.wiki-collection-text
{
	margin-top: .5em;
	margin-bottom: 0;
	font-style: italic;
	font-size: .8em;
}

.wiki-collection-text a
{
	font-weight: normal !important;
}

.effect-type
{
	font-style: normal;
	font-size: 1.5em;
	font-family: 'Upheaval TT -BRK-';
}

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

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

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

.wiki-pool-weight-amount
{
	color: black;
	line-height: 30px;
}

.wiki-panel a
{
	color: var(--gold) !important;
	text-decoration: none !important;
	font-weight: 700;
	text-shadow: 0 1px 0 #000;
	border-bottom: 1px dashed rgba(211,168,74,.35);
}

.wiki-panel a:hover { color: var(--gold-hi) !important; border-bottom-color: transparent; }

.wiki-panel a:focus
{
	outline: 2px solid var(--focus);
	outline-offset: 2px;
	border-radius: 4px;
}

@media (max-width: 640px)
{
	.isaac-table thead th:nth-child(5),
	.isaac-table thead th:nth-child(6),
	.isaac-table thead th:nth-child(7),
	.isaac-table tbody td:nth-child(5),
	.isaac-table tbody td:nth-child(6),
	.isaac-table tbody td:nth-child(7) { display: 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 IsaacGuru";
  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;
}

.submod
{
	display: none;
}

.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);
}

.wiki-character-stats #healthbar
{
	display: none;
}

.wiki-character-stats hr
{
	display: none;
}

.wiki-aside #healthbar
{
	display: flex;
	justify-content: center;
	gap: 12px;
}

.wiki-aside #healthbar .healthbar-heart
{
	margin: 0;
	margin-top: 1em;
}

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

.character-stat-bar
{
	height: 40px;
	vertical-align: middle;
}

.wiki-character-stats .stat-spritesheet
{
	scale: 1.5;
	image-rendering: pixelated;
}

.wiki-character-stats::before
{
	content: "Below is a representation of the character's starting stats.";
}

.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: auto;
	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;
	gap: 16px;
	justify-content: center;
	align-items: baseline;
}

.similar-item
{
	transition: opacity 0.2s, transform 0.2s;
	max-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;
}

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

.zoomed-baby
{
	scale: 12;
	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;
}

.similar-item .big-baby-spritesheet
{
	transform: scale(4);
}

.mods-container
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	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;
}

.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;
}

.mod-card h3
{
	margin-top: 8px;
	font-size: 1em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

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