@layer extend {

@font-face {
	/* trimmed-down version of Picopian, not for general use */
	font-family: "Picopian-PICO:3";
	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);
}
@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-red);
		--body-background-stripe-colour: var(--light-peach);

		--rating-colour-pos: var(--light-blue);
		--rating-colour-neg: var(--red);
	}
}
:root {
	--main-column-max-inline-size: 70ch;
	--default-font-stack: monospace;
	--line-width: 2px;
	--cartridge-scale: 1;
	image-rendering: pixelated;
}

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

body {
	container-name: body;
	container-type: inline-size;
	font-family: var(--default-font-stack);
	background-image: repeating-linear-gradient(-45deg, var(--body-background-stripe-colour) 0 5px, transparent 5px 10px);
}
#banner {
	background-color: var(--back-colour);
}
[data-page-type="index"] main {
	--cartridge-scale: 2;
	& > header {
		margin-block-end: 48px;
	}
	& > footer {
		margin-block-start: 48px;
	}
}
main > :is(#index-header, #index-footer, #review-container) {
	padding: 1.2em;
	background-color: var(--back-colour);
	border-width: var(--line-width);
	border-style: solid;
	border-color: var(--fore-colour);
	border-end-end-radius: 1em;
	corner-end-end-shape: bevel;
	filter: drop-shadow(0 var(--line-width) var(--box-shadow-colour));
}
#controls-container {
	box-shadow: 0 var(--line-width) var(--box-shadow-colour) inset;
}
.control-group {
	margin-block-end: 0;
}
#items {
	max-inline-size: unset;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	& > li {
		display: grid;
		justify-content: center;
		text-align: center;
	}
}
#banner, select, .text-input, #review-container > header {
	box-shadow: 0 var(--line-width) var(--box-shadow-colour);
}
#review-container > header {
	display: grid;
	gap: 16px;
	padding-block-end: 20px;
	border-block-end-width: var(--line-width);
	border-block-end-style: solid;
	border-block-end-color: var(--fore-colour);
	& > .meta > :last-child {
		margin-block-end: 0;
	}
	@media (min-width: 70ch) {
		grid-template-columns: max-content auto;
		align-items: end;
		& > .meta {
			margin-block-end: 8px;
		}
	}
}

/* ---------
	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;
}
[rel="index"] {
	font-size: 1.7em;
	font-family: "Picopian-PICO:3";
	font-synthesis: none;
	-webkit-font-smoothing: none;
	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
---------- */

#review-container {
	& h1 {
		margin-block-start: 0;
		margin-block-end: 0.5em;
		line-height: 1.2;
		font-size: unset;
		font-weight: bold;
	}
	& dl {
		display: grid;
		gap: 0.5em;
		margin-block: 0;
	}
	& dt {
		display: inline;
		font-weight: bold;
	}
	& dd {
		display: inline;
		margin-inline-start: 0.5em;
	}
	& > :last-child {
		margin-block-end: 0;
	}
}

/* CARTRIDGES */

.cartridge {
	position: relative;
	width: calc(var(--cartridge-scale) * 10rem); /* 160px */
	height: calc(var(--cartridge-scale) * 12.8125rem); /* 205px */
	background-image: url("cartridge-bg.53e5f7b5cd.png");
	background-size: 100%;
	background-repeat: no-repeat;
	& > .label {
		--size-x: calc(var(--cartridge-scale) * 8rem); /* 128px */
		--size-y: var(--size-x);
		--pos-x: 0;
		--pos-y: 0;
		position: absolute;
		top: calc(var(--cartridge-scale) * 1.5rem); /* 24px */
		left: calc(var(--cartridge-scale) * 1rem); /* 16px */
		height: var(--size-y);
		width: var(--size-x);
		background-image: url("covers.8647ac9c29.png");
		background-size: 1000%;
		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
			*/
	}
}
@container body (min-inline-size: 36rem) {
	#items {
		--cartridge-scale: 1;
	}
}
#items a:is(:hover, :focus) {
	--cartridge-hover-height: 8px;
	transform: translateY(calc(-1 * var(--cartridge-hover-height)));
	& .cartridge {
		z-index: -1; /* this puts the drop-shadow underneath the focus ring */
		filter: drop-shadow(0 var(--cartridge-hover-height) 0 var(--cartridge-shadow-colour));
	}
}

/* RATINGS */

[data-rating] {
	vertical-align: middle;
	font-family: "Picopian-PICO:3";
	font-synthesis: none;
	-webkit-font-smoothing: none;
}
#items > li {
	position: relative;
}
#items [data-rating] {
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	line-height: 1;
	font-size: calc(var(--cartridge-scale) * 3rem);
	text-shadow:
		calc(-1 * var(--line-width)) calc(-1 * var(--line-width)) var(--black),
		var(--line-width) calc(-1 * var(--line-width)) var(--black),
		var(--line-width) var(--line-width) var(--black),
		calc(-1 * var(--line-width)) var(--line-width) var(--black);
}
#review-container [data-rating] {
	line-height: 0;
	font-size: 1.75rem;
}
[data-rating="1"] {
	color: var(--rating-colour-pos);
}
[data-rating="-1"] {
	color: var(--rating-colour-neg);
}

}