#wti-main-frame
{
	width: 100%;
	height: 700px;
	border: 5px solid grey;
	border-radius: 10px;

	background-repeat: no-repeat !important;
	background-size: cover !important;

	transition: background .5s ease-in, filter .5s ease-in, border-color .1s ease-in;

	text-align: center;
	position: relative;
	display: block;
	text-decoration: none;
	box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, 0.4);
	position: relative;
	overflow: hidden;

	--character-selection: url("/core/assets/img/whos-that-isaac/charactermenu_wti.png");
}

.wti-screen
{
	background-repeat: no-repeat !important;
	background-size: cover !important;
	width: 100%;
	height: 100%;
}

#wti-pre-game-window, #wti-character-selection
{
	background: url("/core/assets/img/whos-that-isaac/emptyscreen.png");
}

#wti-game-logo
{
	display: block;
	width: 350px;
	left: 50%;
	top: 50px;
	transform: translate(-50%);
	position: relative;
	animation: fadeIn 3.3s, pulse 1.6s infinite;
	margin-bottom: 50px;
	filter: contrast(0);
	transition: width .5s ease-in;

	@media only screen and (max-width: 830px)
	{
		width: 300px;
	}
}

.wti-select-mod
{
	position: absolute;
	top: 1em;
	left: 1em;
}

.wti-select-mod > .mod-dropdown.show
{
	max-height: 50vh;
}

#wti-mod-title
{
	font-size: 2em;
	filter: contrast(0);
	line-height: 1em;
	animation: blink 1.5s linear infinite;
}

#wti-main-menu-buttons-wrapper
{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: .5em;
}

#wti-daily-run-button-wrapper
{
	display: block;

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

#wti-daily-run-button
{
	@media only screen and (max-width: 830px)
	{
		width: 100%;
	}
}

@keyframes pulse
{
	0%
	{
		transform: translate(-50%, -8%) scale(1);
	}
	50%
	{
		transform: translate(-50%, -8%) scale(1.1);
	}
	100%
	{
		transform: translate(-50%, -8%) scale(1);
	}
}

@keyframes blink
{
	50%
	{
		opacity: 0;
	}
}

@keyframes shake
{
	0% { transform: translate(1px, 1px) rotate(0deg); }
	10% { transform: translate(-1px, -2px) rotate(-1deg); }
	20% { transform: translate(-3px, 0px) rotate(1deg); }
	30% { transform: translate(3px, 2px) rotate(0deg); }
	40% { transform: translate(1px, -1px) rotate(1deg); }
	50% { transform: translate(-1px, 2px) rotate(-1deg); }
	60% { transform: translate(-3px, 1px) rotate(0deg); }
	70% { transform: translate(3px, 1px) rotate(-1deg); }
	80% { transform: translate(-1px, -1px) rotate(1deg); }
	90% { transform: translate(1px, 2px) rotate(0deg); }
	100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.wti-button
{
	font-size: 1.6em;
}

.wti-main-button
{
	@media only screen and (max-width: 830px)
	{
		display: block;
		width: 80%;
		font-size: 1.2em;
	}
}

#wti-current-seed
{
	display: none;
}

#wti-set-seed-button
{
	background-image: var(--character-selection);
	background-position: -366px -16px;
	width: 144px;
	height: 92px;
	transform: scale(2.5);
	position: absolute;
	left: 75%;
	top: 20%;
	transition: all .5s ease-in;

	@media only screen and (max-width: 1500px)
	{
		transform: scale(1.5);
	}

	@media only screen and (max-width: 830px)
	{
		transform: translate(-50%) scale(2);
		left: 50%;
		top: 10%;
	}
}

#wti-set-seed-content
{
	text-transform: uppercase;
}

#wti-rage-quit-button
{
	display: none;
}

#wti-share-button
{
	display: none;
	transition: border-color .5s ease-in;
}

#wti-your-score-was
{
	font-size: 1.6em;
	margin-bottom: 0;
}

#wti-high-score
{
	font-size: 1.6em;
}

#wti-character-selection
{
	display: none;
}

.wti-chrmenu
{
	background-image: var(--character-selection);
}

#wti-chrname-game
{
	position: absolute;
	left: 1em;
	bottom: 1em;
	filter: contrast(0.5);
}

#wti-who-am-i
{
	width: 235px;
	height: 250px;
	background-position: -120px -10px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scale(2.5);
	transition: transform .5s ease-in;

	@media only screen and (max-width: 830px)
	{
		transform: translate(-50%, -50%) scale(1.5);
	}
}

#wti-character-wheel
{
	margin-top: 50px;
	left: 50%;
	transform: translate(-50%) scaleX(-1);
	position: relative;
	width: 80%;
	height: 110px;
}

.wti-character-portrait
{
	display: block;
	background-position: var(--x) var(--y);
	width: 48px;
	height: 48px;
	transition: all .05s ease-in;
	--c: calc(1 / var(--total-characters) * 100);
	position: absolute;
	top: 0;
	left: 0;
	offset-path: ellipse(45% 30% at 50% 50%);
	offset-rotate: 0deg;
	opacity: 0.3;
	transform: scaleX(-1);
}

.wti-character-portrait:nth-child(1)
{
	opacity: 1;
	offset-distance: calc(2.3 * (var(--c) * 1%));
}

.wti-character-portrait:nth-child(2)
{
	offset-distance: calc(3.3 * (var(--c) * 1%));
}

.wti-character-portrait:nth-child(3)
{
	offset-distance: calc(4.3 * (var(--c) * 1%));
}

.wti-character-portrait:nth-child(4)
{
	offset-distance: calc(5.3 * (var(--c) * 1%));
}

.wti-character-portrait:nth-child(5)
{
	offset-distance: calc(6.3 * (var(--c) * 1%));
}

.wti-character-portrait:nth-child(6)
{
	offset-distance: calc(7.3 * (var(--c) * 1%));
}
.wti-character-portrait:nth-child(7)
{
	offset-distance: calc(8.3 * (var(--c) * 1%));
}

.wti-character-portrait:nth-child(8)
{
	offset-distance: calc(9.3 * (var(--c) * 1%));
}

.wti-character-portrait:nth-child(9)
{
	offset-distance: calc(10.3 * (var(--c) * 1%));
}

.wti-character-portrait:nth-child(10)
{
	offset-distance: calc(11.3 * (var(--c) * 1%));
}

.wti-character-portrait:nth-child(11)
{
	offset-distance: calc(12.3 * (var(--c) * 1%));
}

.wti-character-portrait:nth-child(12)
{
	offset-distance: calc(13.3 * (var(--c) * 1%));
}

#wti-character-controls
{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.wti-chrcontrol
{
	display: inline-block;
}

#wti-character-description
{
	font-size: .6em;
	color: #372b2d;
	line-height: 1.1em;
	height: 2em;
}

.wti-button-chr
{
	transform: scale(0.5) translate3d(0, 0, 0);
}

#wti-character-buttons
{
	display: flex;
	justify-content: center;
}

#wti-loading-screen
{
	display: none;
	background-color: black;
}

#wti-loading-quote
{
	top: 50%;
	position: relative;
	transform: translate(0, -50%);
	font-size: 3em;
	padding: 1em;
	line-height: 1em;
	animation: blink 3s linear infinite;
}

#wti-game-window
{
	display: none;
}

#wti-title
{
	font-size: 2em;
	margin-bottom: 0;
	transition: font-size .2s ease-in;

	@media only screen and (max-width: 830px)
	{
		font-size: 1.5em;
	}
}

#wti-points
{
	font-size: 1em;
}

#wti-item-holder
{
	position: relative;
	left: 50%;
	transform: translate(-50%);
	width: 256px;
	height: 256px;
	margin: 1em;
}

#wti-item-quality-wrapper
{
	display: flex;
	justify-content: center;
	scale: 2.5;
	margin-bottom: -3em;
	margin-top: 2.5em;
	position: relative;
	left: 1em;
	visibility: hidden;
}

#wti-item-quality-wrapper > img
{
	margin-left: -1em;
}

#wti-item-quality-wrapper > span
{
	visibility: hidden;
	font-size: 0.5em;
	position: absolute;
	top: 1.2em;
	margin-left: -1em;
}

#wti-item-img
{
    width: 256px;
    filter: brightness(0);
    pointer-events: none;
    position: relative;
    transition: transform .5s ease, rotate .5s ease;
}

#wti-hints-wrapper
{
	display: flex;
	flex-direction: column;
	margin-bottom: 1em;
}

#wti-hints-text
{
	font-size: 1.6em;
}

#wti-dropdown-input
{
	width: 300px;
	height: 45.6px;

	@media only screen and (max-width: 1010px)
	{
		width: 300px;
	}

	@media only screen and (max-width: 1010px)
	{
		width: 200px;
	}
}

#wti-dropdown-list
{
	height: 300px;
	overflow-y: auto;
}

#wti-dropdown-input:focus + #wti-dropdown-list
{
	display: block;
}

#wti-item-name
{
	--streak-width: 600px;
	z-index: 10;
	position: relative;

	@media only screen and (max-width: 1400px)
	{
		--streak-width: 400px;
	}
}

#wti-item-pickup-quote
{
	margin-top: -1em;
	z-index: 20;
	position: relative;
}

.wti-item-info
{
	color: grey;
	font-size: .8em;
}

#wti-options-wrapper
{
	position: absolute;
	right: 1em;
	bottom: 1em;
}

#wti-health-bar
{
	position: absolute;
	left: 1em;
	top: 1em;
	display: flex;

	@media only screen and (max-width: 1400px)
	{
		position: relative;
		left: 8px;
		top: 0;
		display: flex;
		justify-content: center;
	}
}

#wti-curse-icon
{
	display: none;
	position: absolute;
	right: 1em;
	top: 1em;
	scale: 2;
}

.wti-heart-icon
{
	background: url("/core/assets/img/custom/hearts.webp");
	background-position: var(--x) 0px;
	width: 16px;
	height: 16px;
	margin-right: 12px;
	display: block;
	scale: 2;
}

.btn-np
{
	padding: 0;
}

.wti-hr
{
	margin-bottom: 8px;
	width: 60%;
	left: 50%;
	position: relative;
	transform: translate(-50%);
}