@layer reset, defaults, theme, extend, utilities, accessibility;



/* ====================================
	RESET
==================================== */

@layer reset {

*,
::before,
::after {
	box-sizing: border-box;
}
select, .text-input {
	display: block;
	padding: 0;
	font-family: inherit;
	font-size: 1em;
	color: inherit;
	background-color: unset;
	border: unset;
}
::marker {
	font-family: inherit;
}

/* ===================== END RESET */ }



/* ====================================
	THEME
==================================== */

@layer theme {

:root {
	--fore-colour: black;
	--back-colour: white;
	--hot-colour: blue;
	--cold-colour: purple;
}
@media (prefers-color-scheme: dark) {
	:root {
		--fore-colour: #eee;
		--back-colour: #181818;
		--hot-colour: #8df;
		--cold-colour: #aaf;
	}
}

/* ================= END THEME */ }



/* ====================================
	ACCESSIBILITY
==================================== */

@layer accessibility {

@media (prefers-reduced-motion) {
	*,
	::before,
	::after {
		transition: unset;
		animation-name: no-animation;
	}
}

/* ================= END ACCESSIBILITY */ }



/* ====================================
	UTILITIES
==================================== */

@layer utilities {

[hidden] {
	display: none;
}

/* ================= END UTILITIES */ }



/* ====================================
	DEFAULTS
==================================== */

@layer defaults {

:root {
	--main-column-max-inline-size: 60ch;
	--gap-size: 1.5rem;
	--main-column-margin-block: calc(2 * var(--gap-size));
	--mid-back-colour: color-mix(in srgb, var(--fore-colour) 10%, var(--back-colour));
	--line-width: 0.1rem;
	--line: var(--line-width) solid var(--fore-colour);
	font-size: 100%;
	accent-color: var(--hot-colour);
}
body {
	margin: 0;
	line-height: 1.5;
	font-size: 1.2rem;
	color: var(--fore-colour);
	background-color: var(--back-colour);
}

/* -----------
	LAYOUT
----------- */

#banner {
	display: flex;
	align-items: center;
	padding: 1rem;
	& > * {
		flex-grow: 0;
	}
	& > nav {
		flex-grow: 1;
	}
}
main {
	max-inline-size: var(--main-column-max-inline-size);
	margin-block: var(--main-column-margin-block);
	margin-inline: auto;
	padding-inline: 1rem;
	& > :not(:first-child) {
		margin-block-start: var(--gap-size);
		margin-block-end: 0;
	}
}
header {
	margin-block-end: var(--gap-size);
	padding-block-end: var(--gap-size);
	border-block-end: var(--line);
}
footer {
	margin-block-start: var(--gap-size);
	padding-block-start: var(--gap-size);
	border-block-start: var(--line);
}

/* ------------
	GENERAL
------------ */

h1 {
	margin-block: 0;
	line-height: 1;
}
hr {
	max-inline-size: 50%;
	margin-block: 1em;
	margin-inline: auto;
	border: unset;
	border-block-end: var(--line);
}
svg {
	fill: var(--fore-colour);
	stroke: var(--fore-colour);
}
a {
	color: var(--hot-colour);
	text-underline-offset: 0.15em;
}
a:visited {
	color: var(--cold-colour);
}
a:active {
	color: var(--cold-colour);
}
a:visited:active {
	color: var(--hot-colour);
}

/* -------------
	CONTROLS
------------- */

#index-header {
	display: grid;
	gap: var(--gap-size);
	& p {
		margin-block: 0;
	}
}
#controls {
	display: grid;
	gap: 1rem;
	align-items: center;
	padding-block-start: var(--gap-size);
	border-block-start: var(--line);
}
.control-group {
	display: grid;
}
label {
	display: block;
	padding-block-end: 0.1rem;
	font-weight: bold;
}
select, .text-input {
	padding-block: 0.25em;
	padding-inline: 0.5em;
	line-height: 1;
	border: var(--line);
	border-radius: 0;
}
:is(select, .text-input):hover {
	background-color: var(--mid-back-colour);
}

/* ----------
	ITEMS
---------- */

#items {
	display: grid;
	gap: var(--gap-size);
	padding-inline-start: 0;
	& > li {
		list-style-type: "";
	}
	& a {
		text-underline-offset: 0.3em;
	}
}
.meta {
	display: grid;
	grid-template:
		"	title	title		"
		"	rating	review-date	" / max-content 1fr;
	gap: 1rem;
	align-items: center;
	& > .item-title {
		grid-area: title;
	}
	& > [data-rating] {
		grid-area: rating;
	}
	& > .review-date {
		grid-area: review-date;
	}
}
#items > .meta {
	gap: 0.5rem;
}

/* ================== END DEFAULTS */ }
@layer extend {

@font-face {
	/* a special pixel font I made for the logotype and rating icons */
	font-family: Picolon3;
	font-weight: normal;
	font-style: normal;
	src:
		url("data:application/font+woff2;base64,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")
		format("woff2");
}

:root {
	/* regular PICO-8 palette */
	--black: #000000;
	--dark-blue: #1d2b53;
	--purple: #7e2553;
	--dark-green: #008751;
	--brown: #ab5236;
	--dark-grey: #5f574f;
	--light-grey: #c2c3c7;
	--white: #fff1e8;
	--red: #ff004d;
	--orange: #ffa300;
	--yellow: #ffec27;
	--light-green: #00e436;
	--light-blue: #29adff;
	--lavender: #83769c;
	--pink: #ff77a8;
	--light-peach: #ffccaa;

	/* secret PICO-8 palette */
	--brownish-black: #291814;
	--darker-blue: #111d35;
	--darker-purple: #422136;
	--blue-green: #125359;
	--dark-brown: #742f29;
	--darker-grey: #49333B;
	--medium-grey: #a28879;
	--light-yellow: #f3ef7d;
	--dark-red: #be1250;
	--dark-orange: #ff6c24;
	--lime-green: #a8e72e;
	--medium-green: #00b543;
	--true-blue: #065ab5;
	--mauve: #754665;
	--dark-peach: #ff6e59;
	--peach: #ff9d81;
}
:root{
	--fore-colour: var(--white);
	--back-colour: var(--darker-blue);
	--hot-colour: var(--peach);
	--cold-colour: var(--light-peach);

	--logo-colour-r: var(--pink);
	--logo-colour-br: var(--lavender);
	--logo-colour-b: var(--light-blue);
	--logo-colour-bl: var(--light-green);
	--logo-colour-l: var(--yellow);
	--logo-colour-tl: var(--orange);
	--logo-colour-t: var(--red);
	--logo-colour-tr: var(--light-peach);

	--box-shadow-colour: var(--dark-red);
	--cartridge-shadow-colour: var(--true-blue);
	--body-background-stripe-colour: var(--dark-blue);

	--rating-colour-pos: var(--lime-green);
	--rating-colour-neg: var(--pink);
	--rating-colour-neutral: var(--light-yellow);
}
@media (prefers-color-scheme: light) {
	:root {
		--fore-colour: var(--black);
		--back-colour: var(--white);
		--hot-colour: var(--true-blue);
		--cold-colour: var(--purple);

		--logo-colour-r: var(--dark-peach);
		--logo-colour-br: var(--mauve);
		--logo-colour-b: var(--true-blue);
		--logo-colour-bl: var(--medium-green);
		--logo-colour-l: var(--orange);
		--logo-colour-tl: var(--dark-orange);
		--logo-colour-t: var(--dark-red);
		--logo-colour-tr: var(--red);

		--box-shadow-colour: var(--dark-peach);
		--cartridge-shadow-colour: var(--dark-blue);
		--body-background-stripe-colour: var(--light-peach);

		--rating-colour-pos: var(--dark-red);
		--rating-colour-neg: var(--dark-blue);
		--rating-colour-neutral: var(--mauve);
	}
}
:root {
	--main-column-max-inline-size: 60ch;
	--default-font-stack: monospace;
	--line-width: 0.15rem;
	image-rendering: pixelated;
}

/* -----------
	LAYOUT
----------- */

body {
	font-family: var(--default-font-stack);
}
#banner {
	margin-block: 0;
	background-color: var(--back-colour);
}
body {
	background-image: repeating-linear-gradient(-45deg, var(--body-background-stripe-colour) 0 0.3rem, transparent 0.3rem 0.6rem);
}
main:has(#items) {
	max-inline-size: unset;
	& > header {
		max-inline-size: var(--main-column-max-inline-size);
		margin-block-end: 3rem;
		margin-inline: auto;
	}
	& > footer {
		max-inline-size: max-content;
		margin-inline: auto;
		text-align: center;
	}
}

main:has(#items) > header,
main:has(#items) > footer,
main:not(:has(#items)) {
	padding: 1.25rem;
	background-color: var(--back-colour);
	border-width: var(--line-width);
	border-style: solid;
	border-color: var(--fore-colour);
	border-end-end-radius: 1rem;
	corner-end-end-shape: bevel;
	filter: drop-shadow(0 var(--line-width) var(--box-shadow-colour));
}
#controls {
	box-shadow: 0 var(--line-width) var(--box-shadow-colour) inset;
}
#items {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	& > li {
		display: grid;
		justify-content: center;
		text-align: center;
	}
}
#banner, input, select, .review-header {
	box-shadow: 0 var(--line-width) var(--box-shadow-colour);
}
.review-header {
	display: grid;
	gap: 1rem;
	padding-block-end: 1.7rem;
	border-block-end-width: var(--line-width);
	border-block-end-style: solid;
	border-block-end-color: var(--fore-colour);
	@media (min-width: 60ch) {
		grid-template-columns: max-content auto;
		align-items: end;
		& > .meta {
			margin-block-end: 0.5rem;
		}
	}
}

/* ---------
	LOGO
--------- */

/* multiplier for distance of dots from centre */
@property --d {
	syntax: "<number>";
	inherits: true;
	initial-value: 1;
}
/* angle of rotation of dots */
@property --t {
	syntax: "<angle>";
	inherits: true;
	initial-value: 0turn;
}
#index-link {
	font-size: 2rem;
	font-family: Picolon3;
	color: inherit;
	text-decoration: unset;
	&::before {
		--d: 1;
		--t: 0turn;
		--r: 0.24em * var(--d);
		content: "\2022";
		display: inline-block;
		padding-inline: 0.5em;
		text-shadow:
			calc(cos(var(--t) + 0turn) * var(--r))
			calc(sin(var(--t) + 0turn) * var(--r))
			var(--logo-colour-r),
			calc(cos(var(--t) + 0.125turn) * var(--r))
			calc(sin(var(--t) + 0.125turn) * var(--r))
			var(--logo-colour-br),
			calc(cos(var(--t) + 0.25turn) * var(--r))
			calc(sin(var(--t) + 0.25turn) * var(--r))
			var(--logo-colour-b),
			calc(cos(var(--t) + 0.375turn) * var(--r))
			calc(sin(var(--t) + 0.375turn) * var(--r))
			var(--logo-colour-bl),
			calc(cos(var(--t) + 0.5turn) * var(--r))
			calc(sin(var(--t) + 0.5turn) * var(--r))
			var(--logo-colour-l),
			calc(cos(var(--t) + 0.625turn) * var(--r))
			calc(sin(var(--t) + 0.625turn) * var(--r))
			var(--logo-colour-tl),
			calc(cos(var(--t) + 0.75turn) * var(--r))
			calc(sin(var(--t) + 0.75turn) * var(--r))
			var(--logo-colour-t),
			calc(cos(var(--t) + 0.875turn) * var(--r))
			calc(sin(var(--t) + 0.875turn) * var(--r))
			var(--logo-colour-tr);
		transition-property: --d;
		transition-duration: 0.5s;
		transition-timing-function: ease-in-out;
		animation-name: spin;
		animation-duration: 3s;
		animation-delay: 0s;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
	}
	&:hover::before {
		--d: 2;
	}
}
@keyframes spin {
	from {
		--t: 0turn;
	}
	to {
		--t: 1turn;
	}
}

/* ----------
	OTHER
---------- */

.meta {
	display: block;
	& > h1 {
		margin-block-start: 0;
		margin-block-end: 1rem;
		line-height: 1.2;
		font-size: unset;
		font-weight: bold;
	}
	& > dl {
		display: grid;
		gap: 0.5rem;
		margin-block: 0;
	}
	& dt {
		display: inline;
		font-weight: bold;
	}
	& dd {
		display: inline;
		margin-inline-start: 0.5rem;
	}
}

/* CARTRIDGES */

.cartridge {
	position: relative;
	width: 160px;
	height: 205px;
	background-image: url("cartridge-bg.png?v=b97ccf2946");
	background-repeat: no-repeat;
	& > .label {
		--size-x: 128px;
		--size-y: var(--size-x);
		--pos-x: 0;
		--pos-y: 0;
		position: absolute;
		top: 24px;
		left: 16px;
		height: var(--size-y);
		width: var(--size-x);
		background-image: url("covers.png?v=877fe19e81");
		background-position:
			left calc(-1 * var(--size-x) * var(--pos-x))
			top calc(-1 * var(--size-y) * var(--pos-y));
			/* 
				times -1 because we're not moving the viewport *right*,
				we're moving the background *left* and same for up/down
			*/
	}
}
#items a:hover .cartridge {
	--cartridge-hover-height: 8px;
	transform: translateY(calc(-1 * var(--cartridge-hover-height)));
	filter: drop-shadow(0 var(--cartridge-hover-height) 0 var(--cartridge-shadow-colour));
}

/* RATINGS */

[data-rating] {
	vertical-align: middle;
	font-size: 1.75rem;
	font-family: Picolon3;
}
#items [data-rating] {
	font-size: 3rem;
}
.meta [data-rating] {
	line-height: 0;
}
[data-rating="-2"],
[data-rating="-1"] {
	color: var(--rating-colour-neg);
}
[data-rating="0"] {
	color: var(--rating-colour-neutral);
}
[data-rating="1"],
[data-rating="2"] {
	color: var(--rating-colour-pos);
}

}