/* ------------------- */
/* Imports			   */
/* ------------------- */
@import url('https://fonts.googleapis.com/css2?family=Rokkitt');
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
/*@import url('https://fonts.googleapis.com/css?family=Luckiest+Guy');*/
@import url('https://fonts.googleapis.com/css?family=Secular+One');

@import "resets.css";
@import "utility.css";
@import "champions.css";
@import "items.css";

/* ------------------- */
/* Custom properties   */
/* ------------------- */

:root {
	/* colors */
	--clr-primary-bg: 216 12.2% 91.96%;
	--clr-primary-text: 225 5.88% 13.33%;
	--clr-secondary-bg: 210 16.7% 97.6%;
	--clr-secondary-text: 213.3 4.5% 39%;

	--clr-accent-bg: 115 67% 60%;/*108 74% 61%;*/
	--clr-accent-text: 0 0% 100%;
	--clr-white: 0 0% 100%;
	--clr-black: 0 0% 0%;

	/*--clr-grad-start: 160 100% 50%;
	--clr-grad-mid: var(--clr-accent-bg);*/
	--clr-grad-end: 115 67% 60%;

	/*--clr-gradient: linear-gradient(90deg, hsl(var(--clr-grad-start)), hsl(var(--clr-grad-mid)), hsl(var(--clr-grad-end)));*/
	
	--clr-1-cost: 22 5% 59%;
	--clr-2-cost: 131 41% 50%;
	--clr-3-cost: 199 95% 62%;
	--clr-4-cost: 306 84% 36%;
	--clr-5-cost: 34 98% 49%;
	--clr-8-cost: 306 84% 36%;
	--clr-10-cost: 34 98% 49%;
	
	--clr-bronze: 22 81% 63%;
	--clr-silver: 186 35% 83%;
	--clr-gold: 48 100% 75%;
	
	--clr-bronze-gradient: linear-gradient(180deg, rgba(194,115,64,1) 0%, rgba(237,142,85,1) 41%, rgba(154,75,0,1) 100%);
	--clr-silver-gradient: linear-gradient(180deg, rgba(147,172,177,1) 0%, rgba(197,224,227,1) 41%, rgba(125,151,154,1) 100%);
	--clr-gold-gradient: linear-gradient(180deg, rgba(201,182,104,1) 0%, rgba(255,229,126,1) 41%, rgba(160,120,21,1) 100%);
	

	/* font-sizes */
	--fs-900: clamp(1.5rem, 5vw + 1rem, 6.375rem);
	--fs-800: 2.5rem;
	--fs-700: 1.5rem;
	--fs-600: 1rem;
	--fs-500: 1.75rem;
	--fs-400: 0.9375rem;
	--fs-300: 1rem;
	--fs-200: 0.875rem;

	/* font-families */
	--ff-serif: "Rokkitt", serif;
	--ff-sans-cond: "Roboto Condensed", sans-serif;
	--ff-sans-normal: "Roboto", sans-serif;
	--ff-focus: "Secular One", sans-serif;
	
	/* champion */
	--champion: url('/img/set7/champions/sona.jpg'); /* Sona as fallback */
}

@media (min-width: 35em) {
	:root {
		/* font-sizes */
		--fs-800: 5rem;
		--fs-700: 2.5rem;
		--fs-600: 1.5rem;
		--fs-400: 1rem;
	}
}

@media (min-width: 45em) {
	:root {
		/* font-sizes */
		--fs-800: 6.25rem;
		--fs-700: 3.5rem;
		--fs-600: 2rem;
		--fs-400: 1.125rem;
	}
}


/* ------------------- */
/* Themes		       */
/* ------------------- */

@media (prefers-color-scheme: dark) {
	:root {
		--clr-primary-bg: 225 5.88% 13.33%;
		--clr-primary-text: 216 12.2% 91.96%;
		--clr-secondary-bg: 225 4% 20%;
		--clr-secondary-text: 216 12% 92%;
	}
}

.light-theme {
	--clr-primary-bg: 0 0% 100%;
	--clr-primary-text: 225 5.88% 13.33%;
	--clr-secondary-bg: 210 16.7% 97.6%;
	--clr-secondary-text: 213.3 4.5% 39%;
}

.dark-theme {
	--clr-primary-bg: 225 5.88% 13.33%;
	--clr-primary-text: 216 12.2% 91.96%;
	--clr-secondary-bg: 225 4% 20%;
	--clr-secondary-text: 216 12% 92%;
}


/* ------------------- */
/* Components	       */
/* ------------------- */

a {
	color: hsl(var(--clr-accent-bg));
}

a:hover {
	text-decoration: underline;
	cursor: pointer;
}

.toggle-circle {
	transition: transform 500ms ease-out;
}

.light-theme .toggle-circle {
	transform: translateX(-15%);
}

.toggle-sun {
	transform-origin: center center;
	transition: transform 750ms cubic-bezier(0.11, 0.14, 0.29, 1.32);
}

.light-theme .toggle-sun {
	transform: rotate(0.5turn);
}

.logo {
	margin: clamp(.3rem, 1vw, .6rem);
	font-family: var(--ff-focus);
	font-size: var(--fs-900);
	color: hsl(var(--clr-accent-bg));
	position: absolute;
	bottom: 0;
	line-height: .8;
	transition: font-size 400ms ease-in-out;
	font-weight: bold;
	font-style: italic;
	text-shadow: -2px 0 hsl(var(--clr-black)), 0 2px hsl(var(--clr-black)), 2px 0 hsl(var(--clr-black)), 0 -2px hsl(var(--clr-black));
}

.logo::before,
.logo-bottom::before {
    content: '';
    background-image: url(/img/paddler/fuerst.png);
    background-size: clamp(1.6rem, 3vw + 1rem, 4.5rem);
    background-repeat: no-repeat;
	background-position: bottom;
    width: 4.5rem;
    display: inline-block;
    height: 4.5rem;
    margin-right: 5px;
	transition: background-size 400ms ease-in-out;
}

.logo.scroll::before,
.logo-bottom::before {
    background-size: clamp(1.5rem, 3vw + 1rem, 2.5rem);
}

.logo > span.domain {
    font-size: var(--fs-600);
    margin-right: 5px;
}

.logo-bottom {	
	font-family: var(--ff-focus);
	font-size: var(--fs-700);
	color: hsl(var(--clr-accent-bg));
	bottom: 0;
	text-align: center;
	font-weight: bold;
	font-style: italic;
	text-shadow: -2px 0 hsl(var(--clr-black)), 0 2px hsl(var(--clr-black)), 2px 0 hsl(var(--clr-black)), 0 -2px hsl(var(--clr-black));
}

.logo-bottom > span.domain {
    font-size: var(--fs-400);
    margin-right: 5px;
}

.primary-header {
	justify-content: space-between;
	align-items: center;
	position: sticky;
	top: 0;
	padding-inline: clamp(1rem, 5vw + 1rem, 4rem);
	background: hsl(var(--clr-primary-bg) / 0.95);
	color: hsl(var(--clr-primary-text));
	z-index: 1000;
    margin-top: 1rem;
}

.primary-navigation {
	--gap: clamp(1.5rem, 5vw, 3.5rem);
	--underline-gap: 0;
}

.primary-navigation a,
.primary-navigation span {
	text-decoration: none;
	color: hsl(var(--clr-primary-text));
}

.nav-container {
	margin-left: auto;
}

.nav-bar {
	display: flex;
}

.navigation_submenu ul li {
	padding-left: 1rem;
	padding-bottom: .7rem;
	cursor: pointer;
}

.navigation_submenu li:hover {
	color: hsl(var(--clr-accent-bg));
}

.navigation_submenu h4 {
	display: inline-block;
	border-bottom: .2rem solid hsl(var(--clr-accent-bg) /.8);
	width: 1rem;
	margin-bottom: .7rem;
}

#mobile-menubuttons {
	margin-top: auto;
}

.main-container {
	padding-inline: 1rem;
	margin-top: clamp(1rem, (10vw + .5rem), 15rem);
}

.main-container>div {
	max-width: 80rem;
	width: 100%;
	margin-inline: auto;
}

.content-box {
	background-color: hsl(var(--clr-primary-bg) / .8);
	padding: 2rem;
	margin-bottom: 3rem;
    display: grid;
    gap: 1rem;
}

@media (max-width: 45rem) {
	.primary-navigation {
		--underline-gap: .5rem;
		--gap: .3rem;
		flex-direction: column;
		/* position: fixed; */
		/* inset: 0 0 0 auto; */
		/* min-width: min(70vw, 20rem); */
		list-style: none;
		/* padding: min(20rem, 15vh) 0 min(20rem, 15vh) 2rem; */
		margin: 0;
	}

	.primary-navigation>li {
		background-color: hsl(var(--clr-primary-bg) / .85);
		padding-block: 1rem;
		padding-inline: 1rem;
	}
	
	.primary-navigation>li h4 {
		display: none;
	}
	
	.primary-navigation>li .navigation_submenu {
		max-height: 0;
		overflow: hidden;
		transition: max-height 250ms ease-in, padding 250ms ease-in;
	}

	.primary-navigation>li.menu-active>.navigation_submenu {
		padding-top: 1rem;
		max-height: 100vw;
		transition: max-height 250ms ease-in, padding 250ms ease-out;
	}
	
	.primary-navigation>li .navigation_submenu li {
		padding-top: .7rem;
		border-top: 2px solid hsl(var(--clr-secondary-bg));
	}

	.nav-bar {
		position: fixed;
		inset: 0 0 0 0;
		min-width: min(70vw, 20rem);
		padding: min(20rem, 15vh) 0 2rem 2rem;
		flex-direction: column;
		transform: translateX(100%);
		transition: transform 500ms ease-in-out;
		background-color: hsl(var(--clr-secondary-bg) / .95);
		color:hsl(var(--clr-secondary-text));
		overflow: auto;
	}

	.nav-bar[data-visible="true"] {
		transform: translateX(0);
	}

	.mobile-nav-toggle {
		width: 2.5rem;
		aspect-ratio: 1;
		z-index: 1;
	}

	.hamburger,
	.hamburger::before,
	.hamburger::after {
		content: '';
		display: block;
		background: hsl(var(--clr-primary-text));
		height: 0.188rem;
		width: 1.5rem;
		border-radius: 0.188rem;
		transition: transform ease-in-out 500ms;
	}

	.hamburger::before {
		transform: translateY(-0.375rem);
	}

	.hamburger::after {
		transform: translateY(0.188rem);
	}

	.open .hamburger {
		transform: rotate(45deg);
	}

	.open .hamburger::before {
		opacity: 0;
	}

	.open .hamburger::after {
		transform: translateY(-3px) rotate(-90deg);
	}
}

@media (min-width: 45em) {
	body {
		background-image: url('../img/background.jpg');
		background-position: center top;
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.primary-header {
		margin-top: 4rem;		
		background: hsl(var(--clr-primary-bg) / 0.95);
		color: hsl(var(--clr-primary-text));
	}

	/*.primary-header::before {
		content: '';
		display: block;
		position: absolute;
		width: 100%;
		height: 4rem;
		top: -100%;
		left: 0;
		background-color: hsl(var(--clr-secondary-bg));
	}*/

	.primary-navigation {
		--underline-gap: 1rem;
		padding-right: clamp(1.5rem, 5vw, 3.5rem);
	}

	/*.nav-bar {
		background: hsl(var(--clr-primary-bg) / 0.95);
		color: hsl(var(--clr-primary-text));
	}*/

	.primary-navigation a,
	.primary-navigation span {
		text-decoration: none;
		color: hsl(var(--clr-primary-text));
		display: inline-block;
		padding-block: var(--underline-gap);
		border-bottom: .2rem solid transparent;
	}

	.primary-navigation>li {
		position: relative;
	}

	.primary-navigation>li:hover>.navigation_submenu {
		max-height: 100vw;
		padding-block: 1rem;
		transition: max-height 250ms ease-in, padding 250ms ease-out;
	}

	.nav-bar .navigation_submenu {
		display: flex;
		position: absolute;
		left: 0;
		top: calc(100% + .2rem);
		z-index: 1000;
		background-color: hsl(var(--clr-secondary-bg) / .95);
		max-height: 0;
		overflow: hidden;
		padding-inline: 2rem;
		justify-content: flex-start;
		gap: 2rem;
		white-space: nowrap;
		border-left: .2rem solid hsl(var(--clr-accent-bg) / .5);
		min-width: 100%;
		cursor: auto;
		transition: max-height 250ms ease-in, padding 250ms ease-in;
	}

	.nav-bar .navigation_submenu a {
		padding: 0;
		border-bottom: 0;
	}

	.nav-bar .navigation_submenu a:hover {
		color: hsl(var(--clr-accent-bg));
	}

	.mobile-nav-toggle,
	#mobile-menubuttons {
		display: none;
	}

	#primary-navigation>li {
		padding-inline: clamp(.75rem, 2.5vw, 1.75rem);
	}

	.func-buttons {
		margin-block: auto;
	}
}

.underline-indicators>* {
	cursor: pointer;
	/*padding: var(--underline-gap, 1em) 0;*/
	border: 0;
	border-bottom: .2rem solid transparent;
}

.underline-indicators>*:hover,
.underline-indicators>*:focus {
	border-bottom-color: hsl(var(--clr-accent-bg) / .5);
}

.underline-indicators>.active,
.underline-indicators>[aria-selected="true"] {
	color: hsl(var(--clr-accent-bg));
	border-bottom-color: hsl(var(--clr-accent-bg));
	font-weight: bold;
}

/* footer */
footer {
	margin-top: auto;
	padding: 3rem;
	background-color: hsl(var(--clr-secondary-bg));
	color: hsl(var(--clr-secondary-text));
}

footer > div {
	max-width: 80rem;
	width: 100%;
	margin-inline: auto;
    text-align: center;
}

/*
footer > div#footer-top {
}
*/

footer > div#footer-bottom {
	font-size: var(--fs-200);
}

footer > div#footer-bottom > span,
footer > div#footer-bottom > a {
	display: inline-block;
	color: inherit;
}

footer > div#footer-bottom > a:hover {
	color: hsl(var(--clr-accent-bg));
	cursor: pointer;
}

/* ------------------- */
/* Specific		       */
/* ------------------- */

.impressum-box {
    position: relative;
}

.impressum-box::after {
    background-image: url('/img/paddler/lurk.PNG');
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 15rem;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: -2rem;
    bottom: 0;
    opacity: .2;
}

.headline-accent {
	color: hsl(var(--clr-accent-bg));
}

.mernio-roles, #social-links-footer {
    display: flex;
    gap: clamp(0.5rem, 0.5rem + 1vw, 3rem);
    justify-content: center;
	margin-bottom: 1.5rem;
}

#social-links-footer a {
	text-decoration: none;
}

#social-links-footer a:hover {
	cursor: pointer;
	color: hsl(var(--clr-accent-bg));
}

#social-links-footer a:hover svg > path {
    fill: hsl(var(--clr-accent-bg));
}

#social-links-footer a span {
	display: grid;
	flex-direction: column;
}

#social-links {
	display: none;
}

@media (min-width: 45em) {
	#social-links {
		display: flex;
		flex-direction: column;
		justify-content: right;
		position: fixed;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
		padding: .5rem;
	}

	#social-links>a {
		cursor: pointer;
		background: 0;
		border: 0;
		opacity: 0.8;
		padding: 0.5rem;
		border-radius: 50%;
		position: relative;
		isolation: isolate;
		display: inline-block;
	}

	#social-links>a svg {
		fill: hsl(var(--clr-primary-text));
		display: block;
	}

	#social-links>a::before {
		content: "";
		position: absolute;
		inset: 0;
		background: hsl(0 0% 50% / 0.2);
		border-radius: inherit;
		transform: scale(0);
		opacity: 0;
		z-index: -1;
	}

	.light-theme #social-links>a::before {
		animation: pulseToLight 650ms ease-out;
	}

	.dark-theme #social-links>a::before {
		animation: pulseToDark 650ms ease-out;
	}

	#social-links>a::after {
		content: attr(aria-label);
		position: absolute;
		color: hsl(var(--clr-primary-text));
		background: hsl(var(--clr-primary-bg));
		width: max-content;
		font-size: var(--fs-200);
		right: 100%;
		top: 40%;
		margin: 0 auto;
		padding: 0.1em 1em;
		border-radius: 0.125em;
		opacity: 0;
		transform: scale(0);
		transform-origin: top right;
		transition: transform 0ms linear 100ms, opacity 100ms linear;
	}

	#social-links>a:hover,
	#social-links>a:focus {
		outline: 0;
		opacity: 1;
		background: hsl(0 0% 50% / 0.15);
	}

	#social-links>a:hover::after,
	#social-links>a:focus-visible::after {
		opacity: 0.9;
		transform: scale(1);
		transition: transform 70ms linear, opacity 70ms linear;
	}
}

.news-main,
.container-main {
	background-color: hsl(var(--clr-secondary-bg));
	padding: 2rem;
	color: hsl(var(--clr-secondary-text));
	position: relative;
}

.builder-main, body > div[class*="Hex"] {
	--s: 5.75rem;
	--m: .3rem;
	--m-top: 1.1rem;
	--f: calc(1.732 * var(--s) + 4 * var(--m) - 1px);
	--b: 4px;
}

.builder-main {
	position: relative;
}

.builder-main > div {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.own > .builder-container,
.opponent > .builder-container {
    flex: 1;
}

.grid-traits-container {
    flex-direction: column;
    --gap: .7rem;
    max-height: 27.5rem;
    overflow-x: hidden;
    overflow-y: auto;
}

/* width */
.grid-traits-container::-webkit-scrollbar {
	width: .3rem;
}

/* Track */
.grid-traits-container::-webkit-scrollbar-track {
	background: #b2b2b2; 
}

/* Handle */
.grid-traits-container::-webkit-scrollbar-thumb {
	background: #888; 
}

/* Handle on hover */
.grid-traits-container::-webkit-scrollbar-thumb:hover {
	background: #555; 
}

.traiticon,
.traiticon .traiticon-inner,
.traiticon .traiticon-inner .traiticon-center {
	height: calc(2rem*1.1547);
	width: 2rem;
	position: relative;
}

.traiticon::before,
.traiticon .traiticon-inner::before,
.traiticon .traiticon-inner .traiticon-center::before,
.trait-prismatic .traiticon .traiticon-inner .traiticon-center::after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
    background-color: hsl(var(--clr-black));
    content: '';
}

.traiticon .traiticon-inner::before {
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
	background-color: hsl(0 0% 60%);
}

.traiticon .traiticon-inner .traiticon-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.traiticon .traiticon-inner .traiticon-center::before,
.trait-prismatic .traiticon .traiticon-inner .traiticon-center::after {
    top: 0.2rem;
    left: 0.2rem;
    right: 0.2rem;
    bottom: 0.2rem;
	background-color: hsl(0 0% 39%);
}

.trait-prismatic .traiticon .traiticon-inner::before {
	background-color: hsl(215 70% 95%);
}

.trait-prismatic.trait-list .curcount,
.hex-trait-prismatic .hex-trait-inner::before {
	background: conic-gradient(from 90deg at 50% 50%, rgba(179, 223, 255, 1) 0%, rgba(247, 255, 182, 1) 7%, rgba(159, 255, 251, 1) 15%, rgba(252, 177, 251, 1) 23%, rgba(180, 255, 190, 1) 33%, rgba(232, 240, 251, 1) 43%, rgba(214, 181, 254, 1) 50%, rgba(194, 253, 199, 1) 55%, rgba(252, 184, 185, 1) 61%, rgba(202, 255, 252, 1) 80%, rgba(252, 184, 255, 1) 93%, rgba(179, 223, 255, 1) 100%, rgba(179, 223, 255, 1) 100%);
}

.trait-prismatic .traiticon .traiticon-inner .traiticon-center::before {
	background:conic-gradient(from 90deg at 50% 50%, rgba(179, 223, 255, 1) 0%, rgba(247, 255, 182, 1) 7%, rgba(159, 255, 251, 1) 15%, rgba(252, 177, 251, 1) 23%, rgba(180, 255, 190, 1) 33%, rgba(232, 240, 251, 1) 43%, rgba(214, 181, 254, 1) 50%, rgba(194, 253, 199, 1) 55%, rgba(252, 184, 185, 1) 61%, rgba(202, 255, 252, 1) 80%, rgba(252, 184, 255, 1) 93%, rgba(179, 223, 255, 1) 100%, rgba(179, 223, 255, 1) 100%);
}

.trait-prismatic .traiticon .traiticon-inner .traiticon-center::after,
.hex-trait-prismatic .hex-trait-inner::after {
	background:-moz-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 25%, transparent 55%);
    background:-webkit-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 25%, transparent 55%);
	background:-o-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 25%, transparent 55%);
    background:-ms-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 25%, transparent 55%);
    background:radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 25%, transparent 55%);
}

.trait-gold .traiticon .traiticon-inner::before,
.trait-gold.trait-list .curcount,
.hex-trait-gold .hex-trait-inner::before {
	background-color: hsl(var(--clr-gold));
}

.trait-gold .traiticon .traiticon-inner .traiticon-center::before {
	background: rgb(201,182,104);
	background: linear-gradient(180deg, rgba(201,182,104,1) 0%, rgba(255,229,126,1) 41%, rgba(160,120,21,1) 100%);
}

.trait-silver .traiticon .traiticon-inner::before,
.trait-silver.trait-list .curcount,
.hex-trait-silver .hex-trait-inner::before {
	background-color: hsl(var(--clr-silver));
}

.trait-silver .traiticon .traiticon-inner .traiticon-center::before {
	background: rgb(147,172,177);
	background: linear-gradient(180deg, rgba(147,172,177,1) 0%, rgba(197,224,227,1) 41%, rgba(125,151,154,1) 100%);
}

.trait-bronze .traiticon .traiticon-inner::before,
.trait-bronze.trait-list .curcount,
.hex-trait-bronze .hex-trait-inner::before {
	background-color: hsl(var(--clr-bronze));
}

.trait-bronze .traiticon .traiticon-inner .traiticon-center::before {
	background: rgb(194,115,64);
	background: linear-gradient(180deg, rgba(194,115,64,1) 0%, rgba(237,142,85,1) 41%, rgba(154,75,0,1) 100%);
}

.traiticon svg {
	height: 1.1rem;
	width: 1.1rem;
	fill: hsl(var(--clr-black));
	isolation: isolate;
	z-index: 1;
}

.builder-container {
    padding: 1rem;
}

.builder-elements {
	padding-top: .5rem;
}

.hexa-grid-wrapper {
    display: flex;
	position: relative;
	width: 48rem;
    padding: 0 0 calc(var(--s)*.35) .25rem;
}

.hexa-grid-wrapper::before,
.hexa-grid-wrapper::after {
    content: "mernio.com";
    position: absolute;
    font-family: var(--ff-sans-cond);
    text-orientation: mixed;
    writing-mode: vertical-lr;
}

.hexa-grid-wrapper::before {
    top: calc((var(--m-top)  + var(--s))*1.2);
    left: .5rem;	
    transform: scale(-1, -1);
}

.hexa-grid-wrapper::after {
    top: calc((var(--m-top) + var(--s))*2.1);
    right: .35rem;
}

.hexa-grid-container {
	font-size: 0;
	/*disable white space between inline block element */
}

.hexa-grid-container > div[class*="Hex"],
body > div[class*="Hex"] {
	position: relative;
	width: var(--s);
	margin: var(--m-top) var(--m);
	height: calc(var(--s)*1.1547);
	display: inline-block;
	font-size: initial;
	margin-bottom: calc(var(--m) - var(--s)*0.2885);
}

[data-filled="1"] {
	cursor: pointer;
}

.hexa-grid-container > div[class*="Hex"]::before,
body > div[class*="Hex"]::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
	background-color: hsl(var(--clr-primary-text) / .2);	
}

.hexa-grid-container > div > .innerHex,
body > div[class*="Hex"] > .innerHex {
	position: absolute;
	top: var(--b);
	left: var(--b);
	width: calc(var(--s) - var(--b)*2);
	height: calc(var(--s)*1.1547 - var(--b)*2);
	display: inline-block;
	isolation: isolate;
}

.hexa-grid-container > div > .innerHex::before,
body > div[class*="Hex"] > .innerHex::before  {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);	
	background-color: hsl(var(--clr-primary-bg));
	z-index: -1;
}

div[class*="Hex"].champion-drag-target > .innerHex::before {
    opacity: .8;
}

div[class*="Hex"].champion-drag-hover > .innerHex::before {
    background-color: hsl(var(--clr-primary-bg));
    opacity: 1;
}

.hexa-grid-container::before {
	content: "";
	width: calc(var(--s)/2 + var(--m));
	float: left;
	height: 120%;
	shape-outside: repeating-linear-gradient(#0000 0 calc(var(--f) - 3px),
			#000 0 var(--f));
}

div[class*="Hex"].hex-cost1::before {
    background-color: hsl(var(--clr-1-cost) / .5);
}

div[class*="Hex"].hex-cost1:hover::before {
	background-color: hsl(var(--clr-1-cost));
}

div[class*="Hex"].hex-cost2::before {
    background-color: hsl(var(--clr-2-cost) / .5);
}

div[class*="Hex"].hex-cost2:hover::before {
	background-color: hsl(var(--clr-2-cost));
}

div[class*="Hex"].hex-cost3::before {
    background-color: hsl(var(--clr-3-cost) / .5);
}

div[class*="Hex"].hex-cost3:hover::before {
	background-color: hsl(var(--clr-3-cost));
}

div[class*="Hex"].hex-cost4::before {
    background-color: hsl(var(--clr-4-cost) / .5);
}

div[class*="Hex"].hex-cost4:hover::before {
	background-color: hsl(var(--clr-4-cost));
}

div[class*="Hex"].hex-cost5::before {
    background-color: hsl(var(--clr-5-cost) / .5);
}

div[class*="Hex"].hex-cost5:hover::before {
	background-color: hsl(var(--clr-5-cost));
}

div[class*="Hex"].hex-cost8::before {
    background-color: hsl(var(--clr-8-cost) / .5);
    background-image: url(/img/scales3.png);
    background-size: contain;
    background-position: -0.5rem;
}

div[class*="Hex"].hex-cost8:hover::before {
	background-color: hsl(var(--clr-8-cost));
}

div[class*="Hex"].hex-cost10::before {
    background-color: hsl(var(--clr-10-cost) / .5);
    background-image: url(/img/scales_black.png);
    background-size: contain;
    background-position: -0.5rem;
}

div[class*="Hex"].hex-cost10:hover::before {
	background-color: hsl(var(--clr-10-cost));
}

span[data-additional-units] {
    font-size: var(--fs-200);
    margin-left: 0.1em;
}

.champion-wrapper {
    width: calc(var(--s) - var(--b)*2);
    height: calc(var(--s)*1.1547 - var(--b)*2);
}

.champion-wrapper::before {
    content: ' ';    
	position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    bottom: 0;
    right: 0;
    background-size: cover;
    clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
	background-image: var(--champion-img);
	background-position: center;
}

.hex-traits.flex, 
.hex-items.flex, 
.hex-stars.flex {
    --gap: .2rem;
    justify-content: center;
}

.hex-trait {
    background: hsl(var(--clr-black));
    height: calc(1.5rem*1.1547);
    width: 1.5rem;
    clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%); 
	position: relative;
}

.hex-trait-inner {
    height: calc(1.5rem*1.1547);
    width: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
	position: relative;
}

.hex-trait-inner::before {
	content: '';
	position: absolute;
	top: 1px;
	left: 1px;
	right: 1px;
	bottom: 1px;
	background-color: hsl(0 0% 60%);
    clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%); 
}

.hex-trait > .hex-trait-inner > svg {
    width: 1rem;
    height: 1rem;
    fill: hsl(var(--clr-black));
	z-index: 1;
}

.hex-items {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.hex-item {
    height: 1.5rem;
    width: 1.5rem;
	background-image: var(--item-img);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
    border: 1.5px solid hsl(var(--clr-black));
}

.filter-left {
	width: 53rem;
	min-width: 53rem;
}

.championfilter > li {
    position: relative;
    cursor: pointer;
}

.championfilter > li > span {
    line-height: 2.5rem;
}

.championfilter > li:hover::after,
.championfilter > li:focus::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.2rem;
    background: hsl(var(--clr-accent-bg) / .5);
}

.championfilter > li.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.2rem;
    background: hsl(var(--clr-accent-bg));
}

.filter .searchbar > input {
    border-bottom: 2px solid hsl(var(--clr-secondary-text) / .5);
    margin-bottom: -2px;
}

.filter .searchbar > input:hover, 
.filter .searchbar > input:focus {
    border-color: hsl(var(--clr-accent-bg) / .5);	
}

.filter .searchbar > input:focus-within {
    border-color: hsl(var(--clr-accent-bg));
}

.cost-group {
    padding: 0.5rem;
    display: flex;
    gap: 0.5rem;
}

.cost1 {
    background-color: hsl(var(--clr-1-cost) / .3);
    border-left: .2rem solid hsl(var(--clr-1-cost));
}

.cost2 {
    background-color: hsl(var(--clr-2-cost) / .3);
    border-left: .2rem solid hsl(var(--clr-2-cost));
}

.cost3 {
    background-color: hsl(var(--clr-3-cost) / .3);
    border-left: .2rem solid hsl(var(--clr-3-cost));
}

.cost4 {
    background-color: hsl(var(--clr-4-cost) / .3);
    border-left: .2rem solid hsl(var(--clr-4-cost));
}

.cost5 {
    background-color: hsl(var(--clr-5-cost) / .3);
    border-left: .2rem solid hsl(var(--clr-5-cost));
}

.cost8 {
	position: relative;
    background-color: hsl(var(--clr-8-cost) / .3);	
    border: .2rem solid hsl(var(--clr-8-cost) / .4);
    border-left: .2rem solid hsl(var(--clr-8-cost));
}

.cost10 {
	position: relative;
    background-color: hsl(var(--clr-10-cost) / .3);
    border: .2rem solid hsl(var(--clr-10-cost) / .4);
    border-left: .2rem solid hsl(var(--clr-10-cost));
}

.cost8::before,
.cost10::before{
    display: block;
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    content: ' ';
    background-image: url(/img/scales3.png);
    background-size: 45%;
    opacity: .3;
    background-position-x: -0.5rem;
}

.cost-group.cost8 > .champion, 
.cost-group.cost10 > .champion {
    margin-top: -0.2rem;
}

.championlist {
	display: flex;
    flex-wrap: wrap;
	align-items: flex-start;
    --gap: .25rem;
    max-width: 53rem;
}

.championlist.byTrait {
    flex-direction: column;
    gap: 0.5rem;
    max-height: 20.8rem;
    overflow-y: scroll;
    overflow-x: hidden;
    flex-wrap: nowrap;	
}

.championlist:not(.hidden) {
    width: 53rem;
}

/* width */
.byTrait::-webkit-scrollbar {
	width: .5rem;
}

/* Track */
.byTrait::-webkit-scrollbar-track {
	background: #b2b2b2; 
}

/* Handle */
.byTrait::-webkit-scrollbar-thumb {
	background: #888; 
}

/* Handle on hover */
.byTrait::-webkit-scrollbar-thumb:hover {
	background: #555; 
}

.championlist.byTrait > .trait-group {
    padding-block: 0.25rem;
    border-bottom: 2px solid;
}

.champion {
	position: relative;
    width: 3.5rem;
    height: 3.5rem;
    border: 2px solid hsl(var(--clr-white) / .3);
	background-image: var(--champion-img);
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
}

.champion::before {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    background-color: hsl(var(--clr-white));
    font-size: var(--fs-200);
    color: hsl(var(--clr-white));
    border-radius: 50%;
    display: block;
    width: 1.4rem;
    text-align: center;
    font-weight: bold;
	text-shadow: -1px 0 2px hsl(var(--clr-black)), 0 1px 2px hsl(var(--clr-black)), 1px 0 2px hsl(var(--clr-black)), 0 -1px 2px hsl(var(--clr-black));
	/*text-shadow: -1px 0 hsl(var(--clr-black)), 0 1px hsl(var(--clr-black)), 1px 0 hsl(var(--clr-black)), 0 -1px hsl(var(--clr-black));*/
}

.champion:hover::before {
    content: attr(data-cost);
}

.champion::after {
    position: absolute;
    bottom: -.3rem;
    font-size: .7rem;
    color: hsl(var(--clr-white));
    display: block;
    width: 100%;
    text-align: center;
    font-weight: bold;
	text-shadow: -1px 0 2px hsl(var(--clr-black)), 0 1px 2px hsl(var(--clr-black)), 1px 0 2px hsl(var(--clr-black)), 0 -1px 2px hsl(var(--clr-black));
	max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 1.1rem;
}

.champion:hover::after {
    content: attr(data-champion-name);
}

.champion:hover,
.champion:focus {    
	outline: hsl(var(--clr-secondary-text)) solid 2px;
}

.ldc-options .champions:hover,
.ldc-options .champions:focus {
	opacity: 1 !important;
}

[data-cost="1"]::before {
	background-color: hsl(var(--clr-1-cost));
}

[data-cost="2"]::before {
	background-color: hsl(var(--clr-2-cost));
}

[data-cost="3"]::before {
	background-color: hsl(var(--clr-3-cost));
}

[data-cost="4"]::before {
	background-color: hsl(var(--clr-4-cost));
}

[data-cost="5"]::before {
	background-color: hsl(var(--clr-5-cost));
}

[data-cost="8"]::before {
	background-color: hsl(var(--clr-8-cost));
    background-image: url(/img/scales3.png);
    background-size: cover;
}

[data-cost="10"]::before {
	background-color: hsl(var(--clr-10-cost));
    background-image: url(/img/scales_black.png);
    background-size: cover;
}

div:not(.cost-group) > [data-cost="1"] {
    border-color: hsl(var(--clr-1-cost));
}

div:not(.cost-group) > [data-cost="2"] {
    border-color: hsl(var(--clr-2-cost));
}

div:not(.cost-group) > [data-cost="3"] {
    border-color: hsl(var(--clr-3-cost));
}

div:not(.cost-group) > [data-cost="4"] {
    border-color: hsl(var(--clr-4-cost));
}

div:not(.cost-group) > [data-cost="5"] {
    border-color: hsl(var(--clr-5-cost));
}

div:not(.cost-group) > [data-cost="8"] {
    border-color: hsl(var(--clr-8-cost));
}

div:not(.cost-group) > [data-cost="10"] {
    border-color: hsl(var(--clr-10-cost));
}

.name-group {
	flex-wrap: wrap;	
    --gap: .5rem;
	width: 53rem;
}

.trait-group {
    --gap: .5rem;
    border-left: 0.25rem solid hsl(var(--clr-secondary-text));
    padding-left: 0.5rem;
	width: 53rem;
}

.traitgroupheader > span {
    line-height: 2rem;
    display: inline-block;
    height: 2rem;
    vertical-align: middle;
}

.traitgroupheader > span > svg {
    width: 2rem;
    height: 2rem;
    fill: hsl(var(--clr-secondary-text));
    margin-right: 0.5rem;
}

.heading {
	flex-wrap: wrap;
}

.traits-container {
	position: relative;
	gap: 2rem;
}	


@media (min-width: 53rem) {
	.traits-container {
		grid-template-columns: repeat(2, 1fr);
	}	
}

@media (min-width: 65rem) {
	.traits-container {
		grid-template-columns: repeat(3, 1fr);
	}	
}

.trait {
    background-color: hsl(var(--clr-secondary-bg));
    padding: 2rem;
    color: hsl(var(--clr-secondary-text));
	position: relative;
	overflow: hidden;
}

.icon-dropshadow > svg {
    fill: hsl(var(--clr-secondary-text) / .1);
    position: absolute;
    right: -6.5rem;
    bottom: 0;
}

.trait > .headline {
    font-family: var(--ff-sans-normal);
    padding-bottom: 3rem;
    height: 3rem;
    display: inline-block;
    line-height: 3rem;
    font-size: 2rem;
    margin-bottom: 2.5rem;
}

.trait > .headline > svg {
    fill: hsl(var(--clr-secondary-text));
    width: 3rem;
    height: 3rem;
    margin-right: 1rem;
    float: left;
}

.trait > .desc  {
	margin-bottom: 1.5rem;
}

.trait > .desc:hover,
.trait > .traitbonus:hover  {
	color: hsl(var(--clr-accent-bg));
}

.trait > .trait-champions {
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
    min-height: 8rem;
}


.searchbar {
    position: relative;
    color: hsl(var(--clr-secondary-text));
    fill: hsl(var(--clr-secondary-text));
    background-color: hsl(var(--clr-secondary-bg));
    width: min(24rem, 100%);
}

.searchbar > svg {
    position: absolute;
    height: 1.1rem;
    width: 1.1rem;
    left: 0.5rem;
    top: 0.6rem;
}

.searchbar > input {
    font-size: 1rem;
    background-color: transparent;
    border: 0;
    outline: 0;
    color: hsl(var(--clr-secondary-text));
    padding-inline: 2rem;
    vertical-align: middle;
    width: 100%;
    line-height: 2.5rem;
}

.searchbar > label {
    position: absolute;
    padding-left: 2rem;
    height: 100%;
    width: 100%;
    line-height: 2.5rem;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    opacity: .5;
	cursor: pointer;
}

.searchbar > input.filtered + label, 
.searchbar > input:focus-within + label {
    display: none;
}

.searchbar > .clearX {
    position: absolute;
    right: 0.5rem;
    top: 0.6rem;
    display: none;
	cursor: pointer;
}

.searchbar > .clearX > svg{
    height: 1.1rem;
    width: 1.1rem;
}

input.filtered ~ .clearX {
    display: block;
}

.unitcounter {
    position: absolute;
    bottom: 0.5rem;
    left: 1rem;
    background-color: hsl(var(--clr-primary-bg));
    padding-inline: 0.5rem;
    border-radius: 0.6rem;
	cursor: pointer;
}

.unitcounter::after {
	content: attr(data-info);
	position: absolute;
	color: hsl(var(--clr-primary-text));
	background: hsl(var(--clr-primary-bg));
	width: max-content;
	font-size: var(--fs-200);
	left: 50%;
	bottom: -100%;
	margin: 0 auto;
	padding: 0.1em 1em;
	border-radius: 0.125em;
	opacity: 0;
	transform: scale(0);
	transform-origin: top right;
	transition: transform 0ms linear 100ms, opacity 100ms linear;
}

.unitcounter:hover {
	outline: 0;
	opacity: 1;
	background: hsl(0 0% 50% / 0.15);
}

.unitcounter:hover::after{
	opacity: 0.9;
	transform: scale(1);
	transition: transform 70ms linear, opacity 70ms linear;
}

.ldc-container {
	position: relative;
    padding: 2rem;
}

.ldc-desc > .icon-dropshadow > svg {
	height: 5rem;
}

.ldc-options > .championlist .champion {
    width: 3rem;
    height: 3rem;
}

.ldc-more {
	--gap: 1.5rem;
	flex-direction: column;
}

.option-headline {
	padding-bottom: 1rem;
}

.radio-option {
	display: inline-block;
	position: relative;
	margin: 0 0 10px;
	font-size: 16px;
	line-height: 24px;
}
.radio-option > input[type="radio"] {
	position: absolute;
	top: 4px;
	left: 0;
	width: 36px;
	height: 20px;
	opacity: 0;
	z-index: 0;
}
.radio-option > label {
	display: block;
	padding: 0 0 0 24px;
	cursor: pointer;
}
.radio-option > label:before {
	content: "";
	position: absolute;
	top: 4px;
	left: 0;
	width: 16px;
	height: 16px;
	background-color: transparent;
	border: 2px solid hsl(var(--clr-secondary-text) / .5);
	border-radius: 14px;
	z-index: 1;
	transition: border-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.radio-option > label:after {
	content: "";
	position: absolute;
	top: 8px;
	left: 4px;
	width: 8px;
	height: 8px;
	background-color: hsl(var(--clr-secondary-text));
	border-radius: 50%;
	z-index: 2;
	transform: scale(0, 0);
	transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.radio-option > label:hover, 
.radio-option > label:hover::before {
    color: hsl(var(--clr-accent-bg));
    border-color: hsl(var(--clr-accent-bg));
}

.radio-option > input[type="radio"]:checked + label:before {
	border-color: hsl(var(--clr-secondary-text));
}
.radio-option > input[type="radio"]:checked + label:after {
	transform: scale(1, 1);
}

#ldc-table {
	width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}

#ldc-table td {
    padding: 0.5rem;
}

#ldc-table tbody tr:hover {
    background-color: hsl(var(--clr-black) / .2);
}

#ldc-table.percentage tr.probability-row > td:not(.champion-cell)::after {
    content: '%';
}

#ldc-table thead td {
    border-bottom: 0.2rem solid hsl(var(--clr-secondary-text));
}

#ldc-table tr:not(:last-child) td {
    border-bottom: 0.1rem solid hsl(var(--clr-secondary-text) /.5);
}

#ldc-table td:not(:last-child) {
    border-right: 0.1rem solid hsl(var(--clr-secondary-text) /.5);
}

#ldc-table td.champion-cell::before {
    content: '';
    position: absolute;
    display: inline-block;
    width: 1.7rem;
    height: 1.7rem;
    background-image: var(--champion-img);
    background-size: contain;
    background-repeat: no-repeat;
}

#ldc-table td.champion-cell span {
    margin-left: 2.5rem;
}

#ldc-table td.rowMax {
	font-weight: bold;
	background-color: hsl(var(--clr-white) / .1);
}

#ldc-table td.champion-cell::before {
    content: '';
    position: absolute;
    display: inline-block;
    width: 1.8rem;
    height: 1.8rem;
    background-image: var(--champion-img);
    background-size: 1.5rem;
    background-repeat: no-repeat;
    background-position: center;
}

#ldc-table.shortened-table tbody tr:nth-child(n+6) {
	display: none
}

.showMoreBox {
    padding-block: 1rem;
    text-align: center;
}

.showMoreBox > span {
    --gap: .1rem;
    cursor: pointer;
    justify-content: center;
	justify-items: center;
}

.showMoreBox > span > svg {
    height: 2rem;
    fill: hsl(var(--clr-secondary-text));
}

.filter span {
    line-height: 2.5rem;
}

.filtergroup > *:last-child {
    flex: 1;
}

.action-element {
    background-color: hsl(var(--clr-accent-bg) / .3);
    color: hsl(var(--clr-accent-text));
    padding: 0.5rem;
    width: 100%;
    text-align: center;
    cursor: pointer;
    border: 0.2rem solid transparent;
}

.light-theme .action-element {
	background-color: hsl(var(--clr-accent-bg));
	color: hsl(var(--clr-accent-text));
}

.action-element:hover {
    border-bottom: 0.2rem solid hsl(var(--clr-accent-bg));
}

.options-select-container {
    --gap: .5rem;
    position: absolute;
    max-height: 0;
    padding: 0 1rem;
    background-color: hsl(var(--clr-primary-bg));
    color: hsl(var(--clr-primary-text));
    box-shadow: 1px 8px 15px 1px rgb(0 0 0 / 40%);
    z-index: 100;
    overflow: hidden;
    transition: max-height 200ms ease-in-out, padding 200ms ease-in-out;
}

.options-select-container.active {
    padding: 1rem;
    max-height: 100vw;
    transition: max-height 250ms ease-in, padding 250ms ease-in;
}

.options-select-container input {
    font-size: 1rem;
    background-color: hsl(var(--clr-secondary-bg));
    border: 0;
    outline: 0;
    color: hsl(var(--clr-secondary-text));
    vertical-align: middle;
    width: 100%;
    line-height: 2.5rem;
    padding-inline: 0.5rem;
	-moz-appearance: textfield;
}

.options-select-container input::-webkit-outer-spin-button,
.options-select-container input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.individualCostOdds {
    padding: 0.25rem;
}

.help {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 2rem;
	height: 2rem;
	cursor: help;
}

.help > svg {
	width: 2rem;
	height: 2rem;
	fill: hsl(var(--clr-secondary-text));
}

.help:hover > svg {
	fill: hsl(var(--clr-accent-bg));
}

.clearBoard {
    position: absolute;
    right: 0;
    top: 0;
    padding: 25px 15px 5px 5px;
    cursor: pointer;
}

.clearBoard > svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: hsl(var(--clr-secondary-text));
}

[data-star-level] {
    width: 2rem;
    height: 2rem;
    z-index: 100;
    position: absolute;
    left: -1rem;
    top: 1.5rem;
	color: hsl(var(--clr-black));
    stroke: hsl(var(--clr-black));
    stroke-width: .6px;
    stroke-linejoin: round;
	visibility: hidden;
}

[data-star-level]::after {
	content: attr(data-star-level);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	text-align: center;
	line-height: 2.2rem;
	font-weight: bold;
}

[class*="Hex"]:hover [data-star-level="1"],
[class*="Hex"] [data-star-level="2"],
[class*="Hex"] [data-star-level="3"]{
	visibility: visible;
}

[data-star-level] svg {
	width: 2rem;
	height: 2rem;
}

[class*="Hex"] [data-star-level="1"] svg {
	fill: url('#BronzeGradient');
}

[class*="Hex"] [data-star-level="2"] svg {
	display: block;
	fill: url('#SilverGradient');
}

[class*="Hex"] [data-star-level="3"] svg {
	display: block;
	fill: url('#GoldGradient');
}

.trait-list {
    --gap: .3rem;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
    border: 1px solid hsl(var(--clr-primary-bg));
    padding: .65rem .5rem;
    background-color: hsl(var(--clr-primary-bg) / .5);
    border-radius: 0.5rem;
}

.trait-list:hover {
    background-color: hsl(var(--clr-accent-bg) / .2);
}

.trait-list .curcount {
    background-color: hsl(0 0% 60%);
	color: hsl(var(--clr-black));
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    display: inline-block;
    font-weight: bold;
    height: 2.31rem;
    line-height: 2.31rem;
    font-size: var(--fs-400);
}

.traitsteps {
    height: 1rem;
    overflow: hidden;
}

span.trait-step {
    color: hsl(var(--clr-secondary-text) / .5);
}

span.trait-step.curTrait {
    font-weight: bold;
    color: hsl(var(--clr-secondary-text));
}

span.trait-step-spacer > svg {
    fill: hsl(var(--clr-secondary-text) / .2);
    height: 0.7rem;
    width: 0.5rem;
    margin-inline: 0.2rem;
}

.traitname-container {
    height: 1.1rem;
}

.filtergroup > :last-child {
    flex-wrap: wrap;
}

.itemfilter {
    justify-content: space-around;
    align-items: center;
}

.item-grid-item {
    width: 100%;
    justify-content: space-between;
}

.itemfilter,
.itemlist {
    --gap: 0;
    width: 100%;
    align-content: flex-start;
}

.itemfilter .item-filter-item, 
.item-filter-item {
    width: 2.2222222222222223rem;
    height: 2.2222222222222223rem;
    background-image: var(--item-img);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    border: 1px solid hsl(var(--clr-white) / .2);
}

.itemfilter .item-filter-item {
	position: relative;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid hsl(var(--clr-white) / .2);
	opacity: .5;
}

.itemfilter .item-filter-item:hover {
	opacity: 1;
	cursor: pointer;
}

.component.item-filter-item.active {
	opacity: 1;
	border: 1px solid hsl(var(--clr-white));
}

.component.item-filter-item::after {
    content: '';
    width: 100%;
    position: absolute;
    bottom: -0.7rem;
    left: 0;
	border-bottom: 0.2rem solid transparent;
}

.component.item-filter-item:hover::after {
    border-color: hsl(var(--clr-accent-bg) / .5);
}

.component.item-filter-item.active::after {
    border-color: hsl(var(--clr-accent-bg));
}

.item-filter-item:hover {
    outline: 2px solid hsl(var(--clr-secondary-text));
    z-index: 1;
	cursor: pointer;
}

.notification {
	position: absolute;
    background-color: hsl(var(--clr-primary-bg));
	color: hsl(var(--clr-primary-text));
    text-align: center;
    padding: 1rem;
    bottom: 0;
    width: 100%;
    max-width: 48rem;
    left: 50%;
    transform: translateX(-50%);
}

.notification.error {
	border-left: .2rem solid red;
}

.notification.warn {
	border-left: .2rem solid orange;
}

.notification.info {
	border-left: .2rem solid hsl(var(--clr-accent-bg));	
}

.trait-tooltip {
	position: absolute;
	max-width: 40rem;
	min-width: 20rem;
	display: none;
}

.champion-tooltip {
    position: absolute;
    background-color: hsl(var(--clr-primary-bg) / .9 );
    color: hsl(var(--clr-primary-text));
    padding: 2rem;
	max-width: 40rem;
	min-width: 20rem;
    flex-direction: column;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.champion-tooltip > *:not(:last-child) {
	padding-bottom: 1rem;
	border-bottom: 2px solid hsl(var(--clr-primary-text) / .5);
}

.champion-tooltip .headline {
    text-align: center;
    align-items: center;
    font-size: var(--fs-500);
}

.champion-tooltip .champion-traits, 
.champion-tooltip .champion-mana {
    margin-left: auto;
    font-size: var(--fs-200);
}

.champion-tooltip .champion-mana {
    --gap: .3rem;
}

.champion-tooltip .champion-traits svg {
    fill: hsl(var(--clr-primary-text));
    width: 2rem;
    height: 2rem;
}

.champion-tooltip .champion-mana svg {
    width: .7rem;
    height: .7rem;
    fill: hsl(203, 61%, 52%);
}

.champion-tooltip .champion-ability > .ability-img {
    min-width: 3.5rem;
}

.ability-name {
    font-size: 1.5rem;
}

.champion.no-hover::after {
	content: '';
}

.champion.no-hover {
	outline: none !important;
}

.champion-info {
    align-items: center;
}

.champion-info .champion {
    height: 2.5rem;
    width: 2.5rem;
}

.core-champions-container {
    flex-direction: column;
    --gap: .7rem;
}

.champion-info .champion::after {
    content: '';
}

.core-champions-container::before {
    content: 'Core Champions';
    margin-bottom: 0.5rem;
    display: inline-block;
}

.core-champion-sort-item {
    --gap: .5rem;
    flex-direction: column;
    border: 1px solid hsl(var(--clr-primary-bg));
    padding: 0.65rem 0.5rem;
    background-color: hsl(var(--clr-primary-bg) / .5);
    border-radius: 0.5rem;
	position: relative;
}

.core-champion-sort-item .item-info {
    --gap: .3rem;
    flex-wrap: wrap;
}

.champion-prio-item {
    width: 1.5rem;
    height: 1.5rem;
    background-repeat: no-repeat;
    background-position: center;
    background-image: var(--item-img);
    background-size: contain;
    border: 1px solid hsl(var(--clr-black));
	cursor: pointer;
}

.prio-item-drop-highlight {
	width: 1.5rem;
    height: 1.5rem;
    border: 1px solid hsl(var(--clr-secondary-text));
}

.delete-core-champion {
    margin-left: auto;
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
}

.delete-core-champion > svg {
	width: 1rem;
	height: 1rem;
	fill: hsl(var(--clr-primary-text));
}

.core-champion-sort-item:hover .delete-core-champion {
    display: block;
}

.star-select {
    background-color: hsl(var(--clr-primary-bg) / .9);
    display: flex;
    position: absolute;
    left: -0.5rem;
    top: 3.5rem;
    padding: 0.5rem;
	color: hsl(var(--clr-black));
	gap: 0;
}

.star-select span {
	padding-inline: .5rem;
	font-weight: bold;
}

.star-one {
	background: var(--clr-bronze-gradient);
}

.star-two {
	background: var(--clr-silver-gradient);
}

.star-three {
	background: var(--clr-gold-gradient);
}

button.action-buttons {
    border-radius: 0.5rem;
    padding: 0.3rem 1.5rem;
    border-color: hsl(var(--clr-black) / .5);
    font-family: var(--ff-sans-cond);
    text-transform: uppercase;
}

button.action-buttons:hover {
    color: hsl(var(--clr-black));
    background-color: hsl(var(--clr-accent-bg));
    cursor: pointer;
    border-color: hsl(var(--clr-black));
}

/* ------------------- */
/* keyframes	       */
/* ------------------- */

@keyframes pulseToLight {
	0% {
		transform: scale(0);
		opacity: 0.5;
	}

	10% {
		transform: scale(1);
	}

	75% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform: scale(1);
	}
}

@keyframes pulseToDark {
	0% {
		transform: scale(0);
		opacity: 0.5;
	}

	10% {
		transform: scale(1);
	}

	75% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform: scale(1);
	}
}

@keyframes bg-animation {
	0% {
		background-position: left
	}

	50% {
		background-position: right
	}

	100% {
		background-position: left
	}
}