html {
	height: 100vh;
}

body {
	display: flex;
	flex-direction: column;
}

h1, h2, h3, h4 {
	all: unset;
}

#deckMakerPanels {
	display: flex;
	justify-content: space-between;
	min-height: 0;
	flex-grow: 1;
}

#deckMakerPanels > section {
	flex-basis: 33%;
	overflow-y: scroll;
	padding-top: .5em;
}

.deckMakerGrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	padding: 0;
	margin: 0;
	list-style-type: none;
}
.compact .deckMakerGrid > :not(:last-child) {
	margin-bottom: -50%;
}
.cardButton {
	display: block;
	width: 100%;
	aspect-ratio: 813 / 1185;
	background-color: transparent;
	color: inherit;
	line-height: 0;
	padding: 0;
	border: 0;
}
.cardButton img {
	display: inline-block;
	width: 100%;
	height: 100%;
	transition-property: filter, transform;
	transition-duration: .25s, .1s;
	background-color: black;
}
.cardButton:hover img {
	filter: brightness(1.3);
}
.compact .cardButton:hover img {
	transform: translateY(-10%);
}
.compact li:not(:nth-last-child(-n+3)) > .cardButton::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 110%;
	background: linear-gradient(transparent 80%, black);
}

.cardList > * {
	width: 100%;
	padding: .3em .15em;
	position: relative;
}

.deckMakerHeader {
	display: block;
	width: 100%;
	text-align: center;
	font-weight: bold;
	text-shadow: var(--theme-text-shadow);
}

.dialogScrollArea {
	padding: 1em;
	overflow-y: scroll;
}

/*card search panel*/
.cardSearchMinus {
	padding: 0 1em;
}

#cardSearchTypeInput {
	width: 100%;
}

/*card info panel*/
#cardInfoPanelContent {
	max-width: 50vw;
}
#cardInfoMainArea > section:not(:first-child) {
	margin-top: .5em;
}
#cardInfoImgArea {
	width: max-content;
	margin: 0 auto;
	font-size: .5em;
}
#cardInfoCardImg {
	height: 65vh;
}
#cardInfoCardID {
	float: right;
	margin-right: 1em;
}
#strategyReferenceLink {
	display: block;
	max-width: fit-content;
	font-size: .5em;
	margin: 0 auto .5em;
}
#cardInfoStrategy {
	white-space: pre-wrap;
	text-align: left;
	font-size: .75em;
}
#cardInfoReleaseDate, #cardInfoIllustrator, #cardInfoIdea {
	cursor: pointer;
}
.cardInfoGrid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.cardInfoGrid > * {
	max-width: 25%;
}

/*deck maker panel*/
#deckCreationPanelInner {
	max-width: 75vw;
}

#deckMakerMainArea {
	display: flex;
	border-bottom: 2px var(--theme-border-color) solid;
	min-height: 50vh;
	height: 100vh;
}

#deckMakerMainArea > * {
	display: flex;
	flex-direction: column;
}

#deckMakerMainArea > :not(:first-child) {
	border-left: 1px var(--theme-border-color) solid;
}

#deckMakerMainArea > :not(:last-child) {
	border-right: 1px var(--theme-border-color) solid;
}

.deckCreatorScrollArea {
	flex-grow: 1;
	overflow-y: auto;
}

.deckCreatorScrollArea h4 {
	margin-left: .5em;
}

#deckWarnings {
	margin-left: 1em;
	white-space: normal;
}
.warning {
	color: red;
}
.lightWarning {
	color: orange;
}

#cardMaxWarning, #tokenWarning {
	display: none;
}

#deckCreatorCardList {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

#deckCreatorCardListPlaceholder {
	pointer-events: none;
	user-select: none;
}

.deckMakerCardListElementImg {
	width: 100%;
	display: block;
	border: 2px solid var(--theme-border-color);
}

.deckMakerCardListElementBtns {
	display: flex;
	height: 1em;
	border: 2px var(--theme-border-color) solid;
	border-top: none;
	border-radius: 0 0 .5em .5em;
}

.deckMakerCardListElementBtns > * {
	line-height: 1em;
}

.deckMakerCardListElementBtns > :first-child {
	flex-basis: 1em;
	border-right: 2px var(--theme-border-color) solid;
	user-select: none;
}

.deckMakerCardListElementBtns > :last-child {
	flex-basis: 1em;
	border-left: 2px var(--theme-border-color) solid;
	user-select: none;
}

.deckMakerCardListElementBtns > :first-child:hover, .deckMakerCardListElementBtns > :last-child:hover {
	background-color: var(--theme-button-hover-color);
}

.deckMakerCardListElementBtns > :nth-child(2) {
	flex-grow: 1;
}

#deckCreatorDetailsPanel {
	min-width: 20em;
	text-align: left;
}

#deckCreatorDetailsPanel hr {
	width: 100%;
	margin: .1em 0;
	border: 1px solid var(--theme-border-color);
}

#deckMakerLevelDistribution {
	display: flex;
	justify-content: space-evenly;
	height: 3em;
	align-items: flex-end;
	border-bottom: 1px solid var(--theme-border-color);
}

#deckMakerLevelDistributionLabels {
	display: flex;
	justify-content: space-evenly;
}

#deckMakerLevelDistributionLabels > span {
	width: 6%;
	text-align: center;
}

#deckMakerLevelDistribution > div {
	width: 6%;
	overflow-y: hidden;
}

#deckMakerLevelDistribution > div > div {
	border: 1px solid var(--theme-border-color);
	border-bottom: none;
	display: none;
}

/*color the pieces of the bars for card type distribution graph*/
#deckMakerLevelDistribution > div > :nth-child(1) {
	background-color: #705C3B;
}

#deckMakerLevelDistribution > div > :nth-child(2) {
	background-color: #683C7B;
}

#deckMakerLevelDistribution > div > :nth-child(3) {
	background-color: #514E59;
}

#deckMakerOptionButtons {
	margin: .3em .5em;
	text-align: center;
}

/* recent cards area */

#recentCardsHeader {
	border-bottom: none;
	padding: 0;
}
#recentCardsHeaderBtn {
	width: 100%;
	height: 100%;
	padding: .3em .5em;
	border: none;
	line-height: inherit;
}

#recentCardsList {
	height: 20vh;
	display: none;
	padding: .5em;
	gap: .5em;
	overflow-x: scroll;
	border-radius: 0 0 1em 1em;
	border-top: 2px var(--theme-border-color) solid;

	/*hide scrollbar*/
	scrollbar-width: none;
	-ms-overflow-style: none;
}
#recentCardsList.shown {
	display: flex;
}

#recentCardsList ::-webkit-scrollbar {
	display: none;
}

/* Starting hand generator */
#startingHandGeneratorCards {
	display: flex;
	padding: .5em;
	gap: .5em;
	border-bottom: 2px var(--theme-border-color) solid;
}

#startingHandGeneratorCards > img {
	max-width: 15vw;
	max-height: 50vh;
}

#regenerateStartingHand {
	cursor: pointer;
	user-select: none;
}

/* This is an <input type="file"> element that needs to be hidden to have it accessible only via a button */
#fileImportInput {
	display: none;
}

/* Simple Search */
#quickSearchHolder {
	position: relative;
	min-height: 1.5em;
	transition: min-height .1s linear;
	z-index: 1;
}
.noResults #quickSearchHolder {
	min-height: 0em;
}
#quickSearch {
	position: absolute;
	top: 0vh;
	left: 50%;
	transform: translateX(-50%);

	display: block;
	border: none;
	padding: .25em;
	font-size: 1em;
	width: 100%;
	height: 1.5em;

	transition-property: top, width;
	transition-duration: .3s;
}
.noResults #quickSearch {
	top: 40vh;
	width: 80%;
}

#noResultsMessage {
	position: absolute;
	top: calc(40vh + 2em);
	left: 50%;
	transform: translateX(-50%);
	color: orange;
}

#deckMakerPanels::after {
	content: "";
	background-color: transparent;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: background-color, .5s;
	pointer-events: none;
}
.noResults #deckMakerPanels::after {
	background-color: rgba(0, 0, 0, .75);
}