:root {
	--darkcolor: black;
	--lightcolor: #ccc;
	--linkcolor: #555;
	--bordercolor: #555;
	--darkborder: 4px solid var(--bordercolor);
	--lightborder: 4px solid var(--lightcolor);
	--displayfont: 'inter', sans-serif;
	--regularfont: 'inter', sans-serif;
	--radius: max(15px, 1vw);
	--margin-s: max(10px, .33vw);
	--margin-m: max(20px, 2vw);
	--margin-l: max(60px, 5vw);
	--margin-xl: calc(100%/6);
}



/************************************ FONTS ************************************************/
@font-face {font-family: 'inter'; src: url("fonts/inter-variable.ttf"); font-style: normal; font-display: swap;}
@font-face {font-family: 'inter'; src: url("fonts/inter-italic-variable.ttf"); font-style: italic; font-display: swap;}



/************************************ RESET ************************************************/
* {margin: 0; padding: 0; border: 0; box-sizing: border-box; text-decoration: none;}



/************************************ BODY ************************************************/
html {font-family: var(--regularfont); font-size: max(18px, 1.1vw); font-weight: 450; line-height: 1.25em; color: var(--lightcolor); background: var(--darkcolor); position: relative; scroll-behavior: smooth; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--lightcolor) var(--darkcolor);}
body {min-height: calc(100vh - 50px); padding: 0 var(--margin-s) var(--margin-s); overflow-x: hidden; box-shadow: 0 0 25vw black inset, 0 0 0 100px black;}
body:before {display: block; content: ""; width: 100vw; height: 100vh; background: url("images/background.png") var(--darkcolor); background-position: center center; background-size: cover; position: fixed; top: 0; left: 0; z-index: -1;}
nav, footer {user-select: none; -webkit-user-select: none;}
a, a img, video, summary, .popup {transition: .15s ease-out;}



/************************************ HEADER ************************************************/
header {width: max-content; margin: 0 auto 40px; border: var(--darkborder); border-top: 0; border-radius: 0 0 20% 20%; background: var(--darkcolor); position: relative; user-select: none; -webkit-user-select: none; z-index: 10;}
header a {display: block; perspective: 200px; padding: 20px; transition: none;}
header a img {display: block; width: 54px; height: auto; margin: auto; fill: var(--lightcolor); transition: 1.5s ease-out;}
header a:hover img {transform: rotateY(360deg);}



/************************************ MENU ************************************************/
@media (min-width: 900px) {
	nav {display: flex; font-size: .66rem; text-transform: uppercase; text-align: center; font-weight: bold; color: var(--lightcolor); user-select: none; -webkit-user-select: none;}
	
	.menu_toggle.button {display: none;}
	
	.menu_container ul {display: flex; flex-direction: column; position: fixed; overflow: visible; top: 50%; border: var(--darkborder); background: black; border-radius: 99px; overflow: hidden;}
	.menu_container li {list-style: none;}
	.menu_container li:not(:first-child) {border-top: var(--darkborder);}
	.menu_container a {display: block; white-space: nowrap; padding: 1em .25em; margin: 0; font-weight: 900; letter-spacing: .2em; writing-mode: vertical-lr; color: var(--linkcolor);}
	.menu_container a:hover {color: var(--lightcolor);}
	.menu_container a.current {color: var(--lightcolor);}
	.menu_container span {padding: 0;}
	.menu_container .navigation {left: var(--margin-m); transform: translate(calc(-50% + 2.5px), -50%);}
	.menu_container .navigation a {transform: rotate(180deg);}
	.menu_container .navigation li:first-child a {padding-bottom: 1.33em;}
	.menu_container .navigation li:last-child a {padding-top: 1.33em;}
	.menu_container .language {right: var(--margin-m); transform: translate(calc(50% - 2.5px), -50%);}
	.menu_container .language li:first-child a {padding-top: 1.33em;}
	.menu_container .language li:last-child a {padding-bottom: 1.33em;}
}



/************************************ MOBILE MENU ************************************************/
@media (max-width: 900px) {
	nav {display: block; font-family: var(--displayfont); font-size: larger; color: var(--lightcolor);}
	
	.menu_toggle.button {position: fixed; bottom: var(--margin-m); right: 50%; z-index: 200; font-size: 1rem; line-height: 1.25lh; font-weight: bold; transform: translateX(50%); color: var(--lightcolor) !important;}
	.menu_toggle:before {display: inline-block; content: "☰"; width: 1.25em; text-align: left;}
	.menu_toggle.opened:before {content: "✕";}

	.menu_container {display: flex; flex-direction: column; justify-content: center; gap: var(--margin-m); width: 100vw; height: 100vh; grid-template-rows: 0fr; padding: var(--margin-l) var(--margin-m) var(--margin-m); background: #0009; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); position: fixed; top: 0; left: 0; z-index: 150; transition: .2s ease-out; opacity: 0; pointer-events: none;}
	.menu_container.opened {padding-top: var(--margin-m); opacity: 1; pointer-events: inherit;}
	.menu_container li {list-style: none;}
	.menu_container a {display: block; padding: 1.25ex 2.5ex; border: var(--lightborder); border-radius: 999px; font-size: 1.5rem; font-weight: bold; text-align: center; color: currentColor; background: var(--darkcolor); cursor: pointer;}
	.menu_container a:hover {color: var(--lightcolor); border-color: var(--lightcolor);}
	.menu_container .navigation {display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 8px;}
	.menu_container .language {display: flex; gap: 8px; margin: 0 auto;}
	.menu_container .language a {font-size: 1.25rem;}
	
	body {overflow-y: hidden;}
}



/************************************ MAIN ************************************************/
main {max-width: 96vw; margin: 0 auto;}

aside {max-width: 800px; margin: var(--margin-l) auto;}

h1 {font-family: var(--displayfont); font-size: max(3rem, 5vw); margin-bottom: 1rem; line-height: 1; font-weight: 850; text-wrap: balance;}
h2 {font-family: var(--displayfont); font-size: max(2.2rem, 3.5vw); margin: var(--margin-l) 0; line-height: 1.2; font-weight: 600; text-wrap: balance;}
h3 {font-family: var(--displayfont); font-size: max(1.25rem, 1.33vw); margin-bottom: 1rem; line-height: 1.2; font-weight: 800;}
strong {font-weight: 750;}

hgroup {margin-bottom: 50px; text-align: center;}
hgroup p {font-size: smaller; text-wrap: balance; text-transform: uppercase; letter-spacing: .2em; line-height: 1.4;}



/************************************ GAMES ************************************************/
.games {display: grid; grid-template-columns: 1fr 1fr; gap: var(--margin-s);}
.games li {display: block; border: var(--lightborder); solid var(--lightcolor); border-radius: var(--radius); background: var(--lightcolor); box-shadow: 0 0 0 #0005; transition: .2s ease-out; position: relative; overflow: hidden;}
.games li:hover {transform: scale(1.05); border-color: white; z-index: 1; background: white; box-shadow: 50px 50px 50px #0005;}
.games img {display: block; width: 100%; height: auto; aspect-ratio: 210/297; background: var(--darkcolor); text-align: center; color: var(--linkcolor);}
.games div {padding: 6px 0 4px; margin: 0; color: var(--darkcolor); pointer-events: none; transition: .15s ease-out;}
.games div > * {display: block; margin: 0; font-size: 11px; font-weight: 500; letter-spacing: .075ex; line-height: 1.4em; text-align: center; text-wrap: balance;}

.games.games_small {grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: var(--margin-l);}
.games.games_small li {border: var(--darkborder); background: black;}
.games.games_small li:hover {border-color: white; background: white;}
.games.games_small div {display: none;}



/************************************ BLOCKS ************************************************/
.welcome {display: grid; grid-template-columns: 1fr; margin: var(--margin-l) 0;}
.welcome h2 {margin: 0 0 var(--margin-m);}

.block {padding: 1.5rem; margin: var(--margin-s) 0; border-radius: var(--radius); color: var(--darkcolor); background: var(--lightcolor); overflow: hidden;}
.block h1 {font-size: 2rem; margin-bottom: var(--margin-m);}
.block p:not(:last-child) {margin-bottom: 1rem;}
.block small {font-size: 10px;}
.block a {color: currentcolor; text-decoration: underline; cursor: pointer;}
.block a:hover {color: var(--linkcolor);}
.block del {text-decoration: line-through;}
.block ul {margin-left: 1.5em; list-style: "— ";}

.facts {columns: 2; gap: var(--margin-s); margin: var(--margin-l) 0; font-size: .9rem; line-height: 1.2rem; text-wrap: balance;}
.facts li {list-style: none;}
.facts .block {/*! padding: 1em; */ margin: 0 0 var(--margin-s);}
.facts img {max-width: 100%;}

.centered { margin: var(--margin-l) auto;}



/************************************ GAME DATA ************************************************/
.game_data {display: grid; gap: var(--margin-s);}

.game_image {display: block;}
.game_image img {display: block; width: 100%; height: auto; border: var(--darkborder); border-radius: var(--radius); background: var(--darkcolor) !important;}

.game_credits {align-self: flex-start;}
.game_credits .block:first-child {margin-top: 0;}
.game_credits dl {display: grid; grid-template-columns: auto 1fr; gap: 0 var(--margin-m); font-size: .9rem;}
.game_credits dt {font-weight: bold;}
.game_credits a {text-decoration: none;}
.game_credits img {display: block; width: 75%; margin-top: var(--margin-m);}
.game_credits img:hover {opacity: .6;}



/************************************ MINIGAMES ************************************************/
.minigames {display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--margin-s);}
.minigames img {border: 0; border-radius: 0;}
.minigames li {display: grid; grid-template-rows: auto 1fr; border: var(--lightborder); border-radius: var(--radius); font-size: smaller; line-height: 1.33; color: var(--darkcolor); background: var(--lightcolor); overflow: hidden;}
.minigames li div {padding: 1rem;}
.minigames li .button {margin: 1rem 0 0 auto;}



/************************************ STORIES ************************************************/
.stories {column-width: max(15vw, 150px); gap: var(--margin-s); font-size: smaller; line-height: 1.33;}
.stories li {border: var(--lightborder); border-radius: var(--radius); margin-bottom: var(--margin-s); list-style: none; color: var(--darkcolor); background: var(--lightcolor); overflow: hidden;}
.stories li img {border: 0; border-radius: 0;}
.stories li div {padding: 10px; display: flex; flex-direction: column; gap: 1rem;}



/************************************ LOGOS ************************************************/
.logos {display: grid; grid-template-columns: 1fr 1fr; gap: var(--margin-s); margin: var(--margin-m) 0 0;}
.logos a {display: block; border-radius: var(--radius); background: var(--lightcolor); box-shadow: 0 0 0 #0005; transition: transform .2s ease-out, box-shadow: .2s ease-out;}
.logos a img {display: block; width: 100%; height: auto; aspect-ratio: 2/1; margin: 0; object-fit: contain;}
.logos a:hover {background: white; box-shadow: 25px 25px 75px #0005;}



/************************************ FILES ************************************************/
.files {display: grid; gap: 5px; margin: var(--margin-s) auto !important;}
.files li {list-style: none;}
.files li a {display: flex; justify-content: space-between; break-inside: avoid; padding: .5rem 1rem; border-radius: 30px; text-decoration: none; border: 2px solid #0001; transition: transform .2s ease-out, box-shadow .2s ease-out}
.files li a:hover {color: var(--darkcolor); border-color: white; background: white; box-shadow: 5px 5px 10px #0006; position: relative;}
.files li a span {font-family: monospace; font-size: larger;}

summary {display: block; max-width: max-content; margin: 1em auto; color: var(--lightcolor); color: currentColor; padding: .5rem 1rem; border: var(--darkborder); border-radius: 30px; color: var(--linkcolor); background: black; cursor: pointer;}
summary:hover {color: var(--lightcolor); border-color: var(--lightcolor);}



/************************************ VIDEOS ************************************************/
video {display: block; width: 100%; height: auto; object-fit: contain; margin: var(--margin-l) 0; border: var(--darkborder); border-radius: var(--radius); background: var(--darkcolor);}
video:fullscreen {padding: 0; border: 0; border-radius: 0; object-fit: contain;}



/************************************ IMAGES ************************************************/
.fit {display: grid; align-items: center; width: 100%; height: auto; object-fit: contain; border: var(--darkborder); border-radius: var(--radius); text-align: center; font-style: italic; color: var(--linkcolor); background: var(--darkcolor);}

.screenshots {position: relative; background: black; position: relative;}
.screenshots .fit {display: block; width: 100%; height: auto; aspect-ratio: 16/9; overflow: hidden; position: relative;}
.screenshots .fit img {width: 100%; height: auto; object-fit: contain; border: 0; aspect-ratio: 16/9;}
.screenshots .fit img:first-of-type {display: block; animation: focus .5s ease-out;}
.screenshots .fit img:not(:first-of-type) {visibility: hidden; position: absolute; top: 0; left: 0;}
.screenshots button {display: block; position: absolute; top: 50%; z-index: 8; border-radius: 999px; background: none; cursor: pointer; transition: .15s ease-out;}
.screenshots button img {display: block; width: 50px; height: 50px; margin: auto; border-radius: 999px; padding: 15px; background: var(--lightcolor); transition: .2s ease-out;}
.screenshots button:hover img {padding: 10px; background-color: white; box-shadow: 0 0 25px #0005;}

@keyframes focus {
	from {transform: scale(1.1); opacity: .25;}
	to {transform: scale(1); opacity: 1;}
}

.prev {left: 0; transform: scale(1.1) translate(-40%, -50%);}
.next {right: 0; transform: scale(1.1) translate(40%, -50%);}

.zoom {cursor: zoom-in; transition: .15s ease-out;}
.zoom:hover {filter: brightness(.85);}

.lightbox {display: flex; justify-content: center; align-items: center; position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; z-index: 999; background: #0009; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); opacity: 0; transition: opacity .15s ease-out; pointer-events: none; cursor: zoom-out;}
.lightbox.opened {pointer-events: inherit; opacity: 1; transition: 0;}
.lightbox img {width: calc(100% - var(--margin-s) - var(--margin-s)); height: auto; border: var(--lightborder); border-radius: var(--radius); object-fit: contain; object-position: center center; transform: scale(.8); transition: transform .15s ease-out;}
.lightbox.opened img {transform: scale(1); border-color: var(--lightcolor); background: var(--lightcolor);}



/************************************ BUTTONS ************************************************/
.button {display: block; width: max-content; align-self: end; padding: .15em 1em; border: var(--darkborder); border-color: currentColor; border-radius: 99px; text-decoration: none; font-weight: 650; text-decoration: none !important; color: var(--linkcolor); background: var(--darkcolor); cursor: pointer;}
.button:hover {color: var(--lightcolor);}

li .button, .rss .button {padding: .25em .75em; border: 2px solid #000; font-size: smaller; color: var(--darkcolor); background: none; box-shadow: 0 0 0 #0006; transition: box-shadow .2s ease-out;}
li .button:hover, .rss .button:hover {color: var(--darkcolor); background: white; border-color: white; box-shadow: 2px 2px 5px #0006;}


.downloads {display: grid; gap: var(--margin-s); margin: var(--margin-s) 0;}
.downloads h3 {margin-bottom: var(--margin-s);}
.downloads .block:has(.files) {grid-row: 1 / -1; margin: 0;}
.downloads .action {display: grid; grid-template-columns: 1fr 3fr; gap: 1em; text-wrap: balance; padding: 1rem; margin: 0; border-radius: var(--radius); font-size: smaller; line-height: normal; text-decoration: none; color: var(--darkcolor); background: var(--lightcolor); box-shadow: 0 0 0 #0005; transition: transform .2s ease-out, box-shadow .2s ease-out;}
.downloads .action:hover {color: var(--darkcolor); background: white; box-shadow: 25px 25px 25px #0005; position: relative; position: relative; z-index: 1;}
.downloads .action img {width: 75%; height: auto; margin: auto;}
.downloads .action:hover img {transform: scale(1.1);}



/************************************ IMAGES ************************************************/
.rss {display: grid; margin: 0 auto;}
.rss div {display: flex; justify-content: space-between; align-items: center;}
.rss date {font-style: italic; font-size: .8em; font-weight: bold; opacity: .33;}



/************************************ POPUP ************************************************/
.popup {display: none; text-align: center; position: fixed; right: var(--margin-l); top: 50%; color: var(--lightcolor); transform: translateY(-50%); z-index: 9999;}
.popup:hover {transform: translateY(-50%) scale(1.1); color: white;}
.popup a {display: grid; align-items: center; width: 220px; height: 220px; position: relative; padding: 30px; z-index: 10; font-family: var(--displayfont); font-weight: 800; font-size: 1.4rem; line-height: .85em; color: currentColor; text-transform: uppercase;}
.popup:hover a {color: white;}
.popup svg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; stroke: currentColor; animation: popup 30s infinite forwards linear; pointer-events: none;}

@keyframes popup {to {transform: rotate(360deg);}}



/************************************ 3d MODEL ************************************************/
model-viewer {width: 500px; height: 500px; margin: -50px auto;}
body:has(model-viewer) {display: flex; flex-direction: column; justify-content: space-between;}



/************************************ FOOTER ************************************************/
footer {max-width: max-content; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: var(--margin-l) auto var(--margin-l);}
footer a {color: var(--lightcolor); color: currentColor; padding: 6px 20px; border: var(--darkborder); border-radius: 999px; color: var(--linkcolor); background: black;}
footer a:hover {color: var(--lightcolor); border-color: var(--lightcolor);}



/************************************ FOCUS ************************************************/
*:focus-visible, li:has(a:focus-visible) {outline: 5px solid lime;}
li a:focus-visible {outline: none;}



/************************************ MEDIA QUERIES ************************************************/
@media (min-width: 900px) {
	html {line-height: 1.5rem;}
	body {padding: 0 50px 50px; margin: var(--margin-m); border: var(--darkborder); overflow-x: visible; border-radius: calc(var(--radius) * 2);}
	header {margin-top: -4px;}
	header a {padding-top: 0;}
	main {max-width: 60vw;}
	.welcome {display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: var(--margin-m); margin: var(--margin-l) 0;}
	.welcome h2 {margin: 0;}
	.welcome p {font-size: larger; line-height: 1.4em;margin: 0;}
	.block {padding: var(--margin-m);}
	h2 {margin-right: var(--margin-xl);}
	h2 + .block {margin: var(--margin-l)  var(--margin-xl);}
	.games {grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--margin-m);}
	.games div > * {font-size: .66rem;}
	.game_data {grid-template-columns: 2fr 1fr;}
	.game_credits {position: sticky; top: var(--margin-m); margin: 0;}
	.game_credits dl {grid-template-columns: 1fr; gap: 0; line-height: normal;}
	.game_credits dt:not(:first-child) {padding-top: 1ex; border-top: 1px solid #0003;}
	.game_credits dd {margin-bottom: 1ex;}
	.game_credits img {width: 50%;}
	.lightbox img {width: auto; height: 90vh;}
	.screenshots button img {width: 70px; height: 70px;}
	.prev {transform: translate(-50%, -50%);}
	.next {transform: translate(50%, -50%);}
	.centered {max-width: 66%;}
	.facts {column-count: 3;}
	.downloads {grid-template-columns: 3fr 2fr; grid-template-rows: auto auto 1fr;}
	.logos {grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));}
	.minigames {gap: var(--margin-m);}
	.stories {gap: var(--margin-m);}
	.stories li {margin-bottom: var(--margin-m);}
	.popup {display: block;}
	footer {margin-bottom: var(--margin-m);}
}