#header {
	img {
		max-height: 2rem;
		width: auto;
		margin: -0.5rem 0.25rem;
	}
}

h1 {
	margin-top: 2.5rem;
	margin-bottom: 2rem;
}

.button-bar {
	margin: -0.5ex;
	> * {
		margin: 0.5ex;
	}
}

.modal-90w {
	width: 90%;
	max-width: none !important;
}

.pic-end {
	float: right;
	margin-left: 1rem;
	margin-bottom: 1rem;
}

.pic-start {
	float: left;
	margin-right: 1rem;
	margin-bottom: 1rem;
}

.png-player {
	display: flex;
	flex-direction: column;
	align-items: center;

	.screen {
		background: black;
		display: flex;
		width: 100%;
		height: auto;

		canvas {
			flex-grow: 1;
			-ms-interpolation-mode: nearest-neighbor;
			image-rendering: crisp-edges;
			image-rendering: pixelated;
		}
	}

	.controls {
		margin-top: 0.5rem;
		margin-bottom: 0.5rem;
	}
}

.quote-alert {
	position: relative;
	&::after {
		position: absolute;
		top: 0;
		right: 1ex;
		content: "”";
		font-size: 3em;
		opacity: .5;
	}
}

.raw-html {
	img[type="image/apng"] {
		cursor: pointer;
	}
}

.slider-container {
	overflow: hidden;
	height: 100%;
	width: 100%;

	> .slider-slides {
		transition: transform 600ms;
	}
	&.horizontal {
		> .slider-slides {
			height: 100%;
			white-space: nowrap;
			> .slider-slide {
				display: inline-block;
				width: 100%;
			}
		}
	}
	&.vertical {
		> .slider-slides {
			width: 100%;
		}
	}
}

.snes-button-a,
.snes-button-b,
.snes-button-x,
.snes-button-y {
	display: inline-block;
	width: 2em;
	height: 0;
	padding: 1em 0;
	box-shadow: .125ex .125ex .125ex rgba(0, 0, 0, .5);
	border-radius: 1em;
	font-size: 90%;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	line-height: 0;
}
.snes-button-a {
	background: #c1121c;
	color: white;
}
.snes-button-b {
	background: #f7ba0b;
	color: black;
}
.snes-button-x {
	background: #00387b;
	color: white;
}
.snes-button-y {
	background: #007243;
	color: white;
}
.snes-shoulder-l,
.snes-shoulder-r {
	display: inline-block;
	width: 3em;
	height: 0;
	padding: .75em 0;
	box-shadow: .125ex .125ex .125ex rgba(0, 0, 0, .5);
	border-radius: .75em;
	font-size: 90%;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	line-height: 0;
	background: #b2b4b2;
	color: #54585a;
}
.snes-start,
.snes-select {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	vertical-align: middle;
	font-size: 50%;
	text-transform: uppercase;

	&::before {
		display: inline-block;
		content: '';
		background: #54585a;
		width: 2em;
		height: 0.7em;
		border-radius: 0.35em;
		transform: rotate(-40deg);
		margin-bottom: 0.75em;
		border: thin solid black;
	}
}
.snes-dpad,
.snes-dpad-r,
.snes-dpad-dr,
.snes-dpad-d,
.snes-dpad-dl,
.snes-dpad-l,
.snes-dpad-ul,
.snes-dpad-u,
.snes-dpad-ur {
	display: inline-block;

	&::before {
		display: inline-block;
		content: '';
		width: 2em;
		height: 2em;
		margin-right: 0.5ex;
		vertical-align: middle;
		background-repeat: no-repeat;
		background-size: contain;
	}

	&.compact {
		position: relative;
		> span {
			display: none;
			position: absolute;
			left: -50%;
			top: -125%;
			background: $dark;
			padding: 0.5ex 1ex;
			white-space: nowrap;
		}
		&:active > span,
		&:focus > span,
		&:hover > span {
			display: block;
		}
	}
}
.snes-dpad::before { background-image: url(/icon/dpad.svg); }
.snes-dpad-r::before { background-image: url(/icon/dpad-r.svg); }
.snes-dpad-dr::before { background-image: url(/icon/dpad-dr.svg); }
.snes-dpad-d::before { background-image: url(/icon/dpad-d.svg); }
.snes-dpad-dl::before { background-image: url(/icon/dpad-dl.svg); }
.snes-dpad-l::before { background-image: url(/icon/dpad-l.svg); }
.snes-dpad-ul::before { background-image: url(/icon/dpad-ul.svg); }
.snes-dpad-u::before { background-image: url(/icon/dpad-u.svg); }
.snes-dpad-ur::before { background-image: url(/icon/dpad-ur.svg); }

.spoiler {
	border-radius: 0.5ex;
	padding: 0 0.5ex;
	background: $dark;
	color: $light;

	&.hidden {
		cursor: pointer;

		> .content {
			visibility: hidden;
		}
	}
}

.text-discord {
	color: $discord;
}
.text-twitch {
	color: $twitch;
}

.text-gold {
	color: $gold;
}
.text-silver {
	color: $silver;
}
.text-bronze {
	color: $bronze;
}

.zelda-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	width: 2em;
	height: 2em;

	img {
		margin: auto;
		max-width: 100%;
		max-height: 100%;
	}
	.item-map-icon {
		display: inline-block;
		width: 100%;
		height: 100%;
		background: url(/items-v1.png);
		background-size: 800% 1100%;
	}
	.strike {
		position: absolute;
		top: 0;
		left: 0;
		width: 2em;
		height: 2em;
		display: flex;
		align-items: center;
		justify-content: center;
		pointer-events: none;

		svg {
			width: 100%;
			height: 100%;
		}

		path {
			fill: red;
			stroke: black;
			stroke-width: 1px;
			vector-effect: non-scaling-stroke;
		}
	}
}