:root {
	--a: var(--blue);
	--basehue: 221;
	--bd-input: var(--lightblue);
	--bg-button: hsl(var(--basehue) 50% calc(var(--bg-l) / 1.125));
	--bg-button-hover: hsl(var(--basehue) 75% calc(var(--bg-l) / 1.25));
	--bg-input: hsl(0 0% 90%);
	--bg-l: 85%;
	--bg-s: 50%;
	--blue: hsl(233 59% 30%);
	--blueblock: hsl(213 var(--bg-s) calc(var(--bg-l) * 1.1));
	--c: var(--blue);
	--eio: cubic-bezier(.65,.05,.36,1);
	--heroimg: url(/images/hero-l.webp);
	--iconfilter: invert(1);
	--l: 2;
	--lightblue: hsl(233 20% 60%);
	--offwhite: hsl(22 41% 95%);
	--orange: hsl(29 77% 50%);
	--overlay: hsl(from var(--blueblock) h s l / 0.75);
	--pink: hsl(319 67% 55%);
	--sh-o: 0.25;
	@media (prefers-color-scheme: dark) {
		--a: var(--lightblue);
		--bg-button: hsl(var(--basehue) 25% calc(var(--bg-l) * 2));
		--bg-button-hover: hsl(var(--basehue) 50% calc(var(--bg-l) * 2.5));
		--bg-l: 12%;
		--bg-s: 100%;
		--c: var(--offwhite);
		--heroimg: url(/images/hero-d.webp);
		--iconfilter: invert(0);
		--l: 0.5;
		--sh-o: 0.75;
	}
}
*, ::after, ::before {
	box-sizing: border-box;
}
html {
	&[theme=light] {
		--a: var(--blue);
		--bg-button: hsl(var(--basehue) 50% calc(var(--bg-l) / 1.25));
		--bg-button-hover: hsl(var(--basehue) 75% calc(var(--bg-l) / 1.25));
		--bg-l: 85%;
		--bg-s: 50%;
		--c: var(--blue);
		--heroimg: url(/images/hero-l.webp);
		--iconfilter: invert(1);
		--l: 2;
		--sh-o: 0.25;
	}
	&[theme=dark] {
		--a: var(--lightblue);
		--bg-button: hsl(var(--basehue) 25% calc(var(--bg-l) * 2));
		--bg-button-hover: hsl(var(--basehue) 50% calc(var(--bg-l) * 2.5));
		--bg-l: 12%;
		--bg-s: 100%;
		--c: var(--offwhite);
		--heroimg: url(/images/hero-d.webp);
		--iconfilter: invert(0);
		--l: 0.5;
		--sh-o: 0.75;
	}
}
body {
	background-color: hsl(var(--basehue) var(--bg-s) var(--bg-l));
	color: var(--c);
	font-family: montserrat, sans-serif;
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
	line-height: 1.6;
	margin: 0;
	padding: 0;
}
[x-cloak] {
	display: none;
}
a {
	color: var(--a);
	cursor: pointer;
	text-decoration: none;
}
:where(a.btn, button) {
	background: var(--bg-button);
	border: var(--bd-input);
	border-radius: 0.25rem;
	color: var(--c-input) !important;
	cursor: pointer;
	font-size: inherit;
	font-weight: 400;
	padding-block: min(0.5em, 10%);
	padding-inline: 2vw;
	text-transform: uppercase;
	white-space: nowrap;
	&:hover {
		background: var(--bg-button-hover);
		filter: none;
	}
}
:where(h1, h2, h3, h4, h5, h6) {
	font-family: montserrat, sans-serif;
	font-size: 2.5rem;
	font-weight: 900;
	margin: 0 0 0.5em;
	text-transform: uppercase;
}
h1 {
	font-size: clamp(1.5rem, 1.2rem + 1.5vw, 3rem);
}
h2 {
	font-size: clamp(1.25rem, 1.2rem + 0.25vw, 1.5rem);
}
h3 {
	font-size: clamp(1.125rem, 1.1rem + 0.125vw, 1.25rem);
}
h4 {
	font-size: clamp(1rem, 0.975rem + 0.125vw, 1.125rem);
}
h5 {
	font-size: clamp(0.875rem, 0.85rem + 0.125vw, 1rem);
}
h6 {
	font-size: clamp(0.75rem, 0.725rem + 0.125vw, 0.875rem);
}
svg {
	aspect-ratio: 1;
	height: 1rem;
}
[themeswitch] {
	align-items: center;
	background: hsl(from var(--blueblock) h s calc(l * var(--l)));
	border-radius: 2rem;
	box-shadow: inset 0 0 0.25rem hsl(0 0% 0% / 0.25);
	cursor: pointer;
	display: grid;
	gap: 0.5rem;
	grid: auto / 1fr 1fr;
	height: 2rem;
	justify-items: center;
	justify-self: end;
	padding: 0.25rem;
	/* scale: 1.25; */
	transition: all 0.25s var(--eio);
	width: 4rem;
	[active] {
		aspect-ratio: 1;
		background: linear-gradient(45deg, hsl(331 100% 50%), hsl(32 100% 50%));
		border-radius: 2rem;
		display: block;
		grid-column: 1 / -1;
		grid-row: 1;
		height: 1.5rem;
		justify-self: start;
		transition: all 0.25s var(--eio);
		z-index: 0;
	}
	svg {
		border-radius: 2rem;
		fill: var(--c);
		grid-column: 1;
		grid-row: 1;
		height: 1.5rem;
		opacity: 0.6;
		padding: 0.125rem;
		transition: all 0.25s var(--eio);
		z-index: 1;
		&.active {
			fill: white;
			opacity: 1;
			scale: 1.125;
		}
		&[moon] {
			grid-column: 1;
		}
		&[sun] {
			grid-column: 2;
		}
	}
	&.light {
		[active] {
			translate: 2rem 0;
		}
	}
	&:hover {
		scale: 1.25;
	}
}
.tooltip {
	background: hsl(50 100% 50% / 0.75);
	border-radius: 0.5rem;
	box-shadow: 0 0.25rem 0.5rem #0009;
	color: #333;
	font-size: clamp(0.6875rem, 0.625rem + 0.3125vw, 1rem);
	font-weight: 700;
	padding: 0.5rem 1rem;
	position: relative;
	white-space: nowrap;
	z-index: 999;
}
:where(header, main, footer) {
	margin: 0 auto;
	padding-inline: 4vw;
	> div {
		margin: 0 auto;
		max-width: 100rem;
		width: 100%;
	}
}
:where(header, footer) {
	background-color: var(--blueblock);
	box-shadow: 0 0 1rem 0.0125rem hsl(0 0% 0% / var(--sh-o));
	height: 6vh;
	position: sticky;
	top: 0;
	transition: all 0.25s var(--eio);
	z-index: 9;
	> div {
		align-items: center;
		display: grid;
		gap: 0.5rem;
		grid: auto / auto 1fr;
		padding-block: 1vh;
		a {
			&.logo {
				display: inline-block;
				height: 4vh;
				transition: all 0.125s var(--eio);
				img {
					filter: drop-shadow(0 0 0.125rem hsl(0 0% 0% / 0.25));
					height: 100%;
				}
				&:hover {
					scale: 1.05;
				}
			}
		}
	}
}
header {
	nav {
		justify-self: end;
		ul {
			align-items: center;
			display: flex;
			gap: 2vw;
			line-height: 1;
			list-style: none;
			margin: 0;
			padding: 0;
			li {
				display: inline-block;
				a {
					color: var(--c);
					display: block;
					font-size: clamp(0.625rem, 0.35rem + 1.375vw, 2rem);
					font-weight: 700;
					line-height: 1rem;
					text-decoration: none;
					text-transform: uppercase;
					transition: all 0.125s var(--eio);
					&.btn {
						font-size: clamp(0.625rem, 0.45rem + 0.875vw, 1.5rem);
						font-weight: 400;
					}
					&:hover {
						filter: drop-shadow(0 0 0.25rem hsl(0 0% 100% / 0.25));
						scale: 1.05;
					}
				}
			}
		}
	}

}
section {
	&[hero] {
		aspect-ratio: 16 / 6;
		background: no-repeat center center / cover;
		background-image: var(--heroimg);
		box-shadow: 0 0 1rem hsl(0 0% 0% / 0.5);
		margin: auto;
		mask-image: linear-gradient(to bottom, #000f 60%, #0006 80%, #0001 90%, #0000 100%);
		max-width: 100rem;
		position: relative;
	}
}
main {
	background: transparent;
}
footer {
	height: auto;
	min-height: 10rem;
	padding-bottom: 2rem;
	position: relative;
	z-index: 0;
	> div {
		align-items: start;
		font-size: clamp(0.6875rem, 0.625rem + 0.3125vw, 1rem);
		gap: 1rem 0.5rem;
		grid: auto / repeat(4, 1fr);
		[themeswitch] {
			grid-column: -2;
		}
		ul {
			margin: 0;
			padding: 0;
			li {
				list-style: none;
			}
		}
		[submenu] {
			h3 {
				font-family: anchor-web, sans-serif;
				font-weight: 700;
				white-space: nowrap;
			}
			ul {
				li {
					a {
						display: inline-block;
						letter-spacing: -0.025em;
						line-height: 1.25;
						margin-bottom: 0.25rem;
						width: 100%;
						&:hover {
							box-shadow: 0 1px 0 0 hsl(22 41% 95% / 0.125);
							filter: brightness(1.25);
						}
					}
				}
			}
		}
		:where([legal], [payments], [social], [copyright]) {
			grid-column: 1 / -1;
		}
		[legal] {
			img {
				filter: var(--iconfilter);
				width: 100%;
			}
			p {
				opacity: 0.75;
			}
		}
		:where([payments], [social], [copyright]) {
			border-top: 1px solid hsl(0 0% calc(100% - var(--bg-l)) / 0.125);
			padding-top: 2rem;
		}
		[payments] {
			justify-self: center;
			width: 100%;
			img {
				display: block;
				filter: var(--iconfilter);
				margin: 0 auto;
				max-width: 100%;
				width: auto;
			}
		}
		[social] {
			display: grid;
			grid: auto / auto auto;
			nav {
				ul {
					display: flex;
					gap: 1rem;
					li {
						display: inline-block;
						a {
							display: block;
							transition: all 0.125s var(--eio);
							svg {
								background: var(--blueblock);
								border-radius: 0.25rem;
								fill: var(--c);
								filter: brightness(1.125);
								height: 2rem;
							}
							&:hover {
								filter: brightness(1.25);
								scale: 1.125;
							}
						}
					}
				}
			}
		}
		[copyright] {
			align-items: start;
			display: grid;
			gap: 1rem;
			grid: auto / 1fr auto 1fr;
			p {
				filter: brightness(0.75) opacity(0.5);
				font-size: clamp(0.75rem, 0.725rem + 0.125vw, 0.875rem);
				line-height: 1.2;
				margin: 0;
				text-align: justify;
			}
		}
	}
}
[blocks] {
	display: grid;
	gap: 1rem;
	margin: 0 auto 1rem;
	div {
		background: var(--blueblock);
		border-radius: 1rem;
		padding: 1rem;
		p {
			margin: 0;
		}
	}
}
[gameslist] {
	display: grid;
	gap: min(2vw, 1rem);
	grid: auto / repeat(auto-fit, minmax(10rem, 1fr));
	margin: 0 auto 1rem;
	:where(h3, h4, h5) {
		margin: 0;
	}
	h3 {
		font-family: anchor-web, sans-serif;
		font-size: 2rem;
		grid-column: 1 / -1;
		padding-left: 2rem;
	}
	> div {
		background: var(--blueblock);
		border-radius: 1rem;
		box-shadow: 0 0 1rem hsl(0 0% 0% / 0.05);
		cursor: pointer;
		display: grid;
		gap: 0.5rem;
		overflow: hidden;
		padding: min(3vw, 1rem);
		transition: all 0.25s var(--eio);
		z-index: 3;
		img {
			border-radius: 0.25rem;
			width: 100%;
		}
		[name] {
			font-family: anchor-web, sans-serif;
			font-size: 1.25rem;
			line-height: 1;
			overflow: hidden;
			text-overflow: ellipsis;
			text-transform: uppercase;
			white-space: nowrap;
			width: 100%;
		}
		[provider] {
			font-size: 0.75rem;
			font-weight: 400;
			text-transform: none;
			opacity: 0.5;
		}
		&:hover {
			box-shadow: 0 0 1rem hsl(0 0% 0% / 0.25);
			scale: 1.25;
		}
		&.blurred {
			opacity: 0.5;
			z-index: 2;
		}
	}
	&[new] {
		h3 {
			background-image: url(/images/new.svg);
			background-position: left center;
			background-repeat: no-repeat;
		}
	}
}
[spinner] {
	align-items: center;
	backdrop-filter: blur(4px);
	background: hsl(213 var(--bg-s) calc(var(--bg-l) * 1.1) / 0.75);
	display: flex;
	height: 100vh;
	justify-content: center;
	left: 0;
	position: fixed;
	top: 0;
	width: 100vw;
	z-index: 9999;
	.logo {
		animation: wiggle 5s ease-in-out infinite;
		filter: drop-shadow(0 0 1rem #0009) drop-shadow(0 0 0.125rem #0006);
		left: 50%;
		max-width: 40vw;
		position: absolute;
		top: 50%;
		translate: -50% -50%;
		z-index: 1;
		img {
			width: 100%;
		}
	}
	.ring {
		animation: spin 12s linear infinite;
		height: max(50vh, 50vw);
		left: 50%;
		position: absolute;
		top: 50%;
		translate: -50% -50%;
		width: max(50vh, 50vw);
	}
	.item {
		height: min(30vh, 30vw);
		left: 50%;
		position: absolute;
		top: 50%;
		transform-origin: center center;
		translate: -50% -50%;
		width: min(30vh, 30vw);
	}
	.item:nth-child(1) {
		transform: rotate(0deg) translateX(max(-30vh, -30vw));
	}
	.item:nth-child(2) {
		transform: rotate(45deg) translateX(max(-30vh, -30vw));
	}
	.item:nth-child(3) {
		transform: rotate(90deg) translateX(max(-30vh, -30vw));
	}
	.item:nth-child(4) {
		transform: rotate(135deg) translateX(max(-30vh, -30vw));
	}
	.item:nth-child(5) {
		transform: rotate(180deg) translateX(max(-30vh, -30vw));
	}
	.item:nth-child(6) {
		transform: rotate(225deg) translateX(max(-30vh, -30vw));
	}
	.item:nth-child(7) {
		transform: rotate(270deg) translateX(max(-30vh, -30vw));
	}
	.item:nth-child(8) {
		transform: rotate(315deg) translateX(max(-30vh, -30vw));
	}
	.item img {
		animation: tilebounce 1s ease-in-out infinite;
		border-radius: max(30vh, 30vw);
		box-shadow: 0 0 1rem 0.25rem hsl(0 0% 0% / 0.75);
		height: 100%;
		object-fit: cover;
		rotate: -90deg;
		width: 100%;
	}
}
.overlay {
	backdrop-filter: blur(0.25rem);
	background: var(--overlay);
	height: 100vh;
	inset: 0;
	position: fixed;
	width: 100vw;
	z-index: 999;
	> :where(div, form) {
		background: var(--blueblock);
		border-radius: 0.5rem;
		box-shadow: 0 0 2rem hsl(0 0% 0% / 0.5), 0 0 0 0.125rem hsl(0 0% 50% / 0.25);
		left: 50%;
		min-width: 50%;
		padding: 1rem;
		position: fixed;
		text-align: center;
		top: 50%;
		translate: -50% -50%;
		width: 90%;
	}
}
form {
	display: grid;
	gap: 0.5rem;
	grid-template-columns: repeat(3, 1fr);
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	input {
		background: var(--bg-input);
		border: var(--bd-input);
		border-radius: 0.25rem;
		box-shadow: inset 0 0 0.25rem hsl(0 0% 0% / 0.25);
		font-size: inherit;
		grid-column: 1 / 3;
		padding: 0.5rem;
	}
	button {
		grid-column: 3;
	}
	a {
		grid-column: -2 / -1;
		text-align: center;
		text-transform: uppercase;
	}
}
@keyframes tilebounce {
	0%, 100% {
		translate: 0 0;
	}
	50% {
		translate: -1vw 0;
	}
}
@keyframes wiggle {
	0%, 100% {
		rotate: -2deg;
	}
	50% {
		rotate: 2deg;
	}
}
@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}