/*
	SPDX-FileCopyrightText: 2026 tromino <trominode@pm.me>

	SPDX-License-Identifier: MPL-2.0
*/

@font-face {
	font-family: "Adwaita Sans";
	font-weight: normal;
	font-style: normal;
	font-display: block;
	src: url("/fonts/AdwaitaSans-Regular.woff2");
}

@font-face {
	font-family: "Adwaita Sans";
	font-weight: normal;
	font-style: italic;
	font-display: block;
	src: url("/fonts/AdwaitaSans-Italic.woff2");
}

@font-face {
	font-family: "Adwaita Mono";
	font-weight: normal;
	font-style: normal;
	font-display: block;
	src: url("/fonts/AdwaitaMono-Regular.woff2");
}

@font-face {
	font-family: "Adwaita Mono";
	font-weight: bold;
	font-style: normal;
	font-display: block;
	src: url("/fonts/AdwaitaMono-Bold.woff2");
}

@font-face {
	font-family: "Adwaita Mono";
	font-weight: normal;
	font-style: italic;
	font-display: block;
	src: url("/fonts/AdwaitaMono-Italic.woff2");
}

@font-face {
	font-family: "Adwaita Mono";
	font-weight: bold;
	font-style: italic;
	font-display: block;
	src: url("/fonts/AdwaitaMono-BoldItalic.woff2");
}

* {
	all: unset;
	box-sizing: border-box;
}

:root {
	--sans-font: "Adwaita Sans", sans-serif;
	--mono-font: "Adwaita Mono", monospace;

	--accent: #f16567;
	--accent-dull: oklch(from var(--accent) l calc(c * 0.5) h);
	--weak: light-dark(#fdfefe, #040405);
	--strong: light-dark(#040405, #fdfefe);

	--link-text: color-mix(in oklab, var(--accent) 80%, var(--strong) 20%);
	--link-underline: color-mix(in oklab, var(--accent) 80%, var(--weak) 20%);
	--link-hover-text: color-mix(in oklab, var(--accent) 40%, var(--strong) 60%);
	--link-hover-underline: color-mix(in oklab, var(--accent) 40%, var(--strong) 60%);
	--button-background: color-mix(in oklab, var(--accent) 80%, var(--weak) 20%);
	--button-text: var(--strong);
	--button-hover-background: color-mix(in oklab, var(--accent) 60%, var(--weak) 40%);
	--button-hover-text: var(--strong);
	--focus-outline: color-mix(in oklab, var(--accent) 80%, var(--weak) 20%);
	--selection-background: color-mix(in oklab, var(--accent) 60%, var(--weak) 40%);
	--selection-text: var(--strong);
	--outer-background: color-mix(in oklab, var(--accent-dull) 10%, var(--weak) 90%);
	--outer-text: color-mix(in oklab, var(--accent-dull) 40%, var(--strong) 60%);
	--main-border: color-mix(in oklab, var(--accent-dull) 80%, var(--weak) 20%);
	--main-background: var(--weak);
	--main-text: var(--strong);
	--field-border: color-mix(in oklab, var(--accent-dull) 60%, var(--weak) 40%);
	--field-background: color-mix(in oklab, var(--accent-dull) 10%, var(--weak) 90%);
	--field-name: color-mix(in oklab, var(--accent-dull) 40%, var(--strong) 60%);
	--game-background: color-mix(in oklab, var(--accent-dull) 20%, var(--weak) 80%);
	--game-text: color-mix(in oklab, var(--accent-dull) 40%, var(--strong) 60%);
	--game-links-background: alpha(from var(--weak) / 0.6);
	--heading: color-mix(in oklab, var(--accent-dull) 40%, var(--strong) 60%);

	@media (prefers-contrast: more) {
		--link-text: color-mix(in oklab, var(--accent) 60%, var(--strong) 40%);
		--link-underline: color-mix(in oklab, var(--accent) 60%, var(--strong) 40%);
		--link-hover-text: var(--strong);
		--link-hover-underline: var(--strong);
		--focus-outline: color-mix(in oklab, var(--accent) 60%, var(--strong) 40%);
		--outer-background: var(--weak);
		--outer-text: var(--strong);
		--main-border: color-mix(in oklab, var(--accent-dull) 40%, var(--strong) 60%);
		--field-border: color-mix(in oklab, var(--accent-dull) 40%, var(--strong) 60%);
		--field-background: var(--weak);
		--field-name: var(--strong);
		--game-text: var(--strong);
		--heading: var(--strong);
	}

	color-scheme: light dark;
}

::selection {
	background: var(--selection-background);
	color: var(--selection-text);
}

html {
	background: var(--outer-background);
	color: var(--outer-text);
	font-family: var(--sans-font);
	line-height: 1.5;
}

head, style, script {
	display: none;
}

a {
	outline: 1px solid transparent;
	outline-offset: 2px;
	cursor: pointer;

	&:focus-visible {
		outline-color: var(--focus-outline);
	}

	&.button {
		background: var(--button-background);
		color: var(--button-text);
		font-family: var(--mono-font);
		text-align: center;
		padding: 4px 12px;
		border-radius: 6px;
		display: inline-block;
		transition: background-color 0.1s, color 0.1s, outline-color 0.1s;

		&:hover, &:focus-visible {
			background: var(--button-hover-background);
			color: var(--button-hover-text);
		}
	}

	&:not(.button) {
		color: var(--link-text);
		text-decoration: underline var(--link-underline);
		border-radius: 2px;
		transition: color 0.1s, outline-color 0.1s, text-decoration-color 0.1s;

		&:hover, &:focus-visible {
			color: var(--link-hover-text);
			text-decoration-color: var(--link-hover-underline);
		}
	}
}

header {
	margin: 30px 0;
	font-size: min(320%, 9vw);
	font-family: var(--mono-font);
	text-align: center;
	text-wrap: nowrap;
	display: block;
}

main {
	background: var(--main-background);
	color: var(--main-text);
	max-width: 720px;
	margin: 0 auto;
	border: 2px solid var(--main-border);
	border-radius: 20px;
	display: block;

	@media (max-width: 720px) {
		border-left: none;
		border-right: none;
		border-radius: 0;
	}
}

section {
	padding: 20px 30px;
	display: block;

	@media (max-width: 360px) {
		padding: 20px;
	}

	+ section {
		border-top: 2px solid var(--main-border);
	}
}

h1 {
	color: var(--heading);
	font-size: 160%;
	font-family: var(--mono-font);
	display: block;

	+ p {
		margin-top: 0.5em;
	}
}

p {
	display: block;

	+ p {
		margin-top: 1em;
	}
}

dl {
	margin-top: 20px;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;

	> div {
		background: var(--field-background);
		padding: 8px 12px;
		border: 1px solid var(--field-border);
		border-radius: 10px;
		display: block;
		flex: 1;
	}
}

dt {
	color: var(--field-name);
	font-size: 80%;
	font-family: var(--mono-font);
	text-wrap: nowrap;
	display: block;
}

dd {
	display: block;
}

ol.games-list {
	margin-top: 20px;
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

	> li {
		aspect-ratio: 2 / 3;
		border-radius: 10px;
		overflow: hidden;
		position: relative;
		display: block;

		&:hover, &:has(:focus-visible) {
			> img {
				opacity: 0.6;
			}

			> div {
				opacity: 1;
			    bottom: 0;
			}
		}

		> img {
			background: var(--game-background);
			color: var(--game-text);
			font-family: var(--mono-font);
			text-align: center;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			transition: opacity 0.2s;
		}

		> div {
			background: var(--game-links-background);
			width: 100%;
			padding: 4px;
			opacity: 0;
			position: absolute;
			display: grid;
			gap: 4px;
			transition: opacity 0.2s;

			> a {
				display: block;
			}
		}
	}
}

footer {
	margin: 30px 20px;
	font-family: var(--mono-font);
	text-align: center;
	display: block;
}