body:has(#rating:checked) .inline-list.contains-ufo-cartridges > li > button > .cartridge-bg { 
	&.rated-0 { background-image: url("/assets/images/ufo50/cartridges/dusty.png"); }
	&.rated-1 { background-image: url("/assets/images/ufo50/cartridges/dusty.png"); }
	&.rated-2 { background-image: url("/assets/images/ufo50/cartridges/black.png"); }
	&.rated-3 { background-image: url("/assets/images/ufo50/cartridges/standard-issue.png"); }
	&.rated-4 { background-image: url("/assets/images/ufo50/cartridges/golden.png"); }
	&.rated-5 { background-image: url("/assets/images/ufo50/cartridges/cherry.png"); }
}

body:has(:popover-open) button.cartridge {
	pointer-events: none !important;
}

.inline-list.contains-ufo-cartridges {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;

	& > li {
		& > button {
			background: none;
			border: none;
			padding: 0;
			cursor: pointer;

			&:hover, &:focus-visible {
				outline: none;

				@media (prefers-reduced-motion: no-preference) {
					animation: cartridge-hover .6s infinite;
					animation-timing-function: step-start;
				}
			}

			&:is(&:active, &:focus-visible) > .cartridge-bg {
				background-image: url("/assets/images/ufo50/cartridges/blinky.png") !important;
			}

			& > .cartridge-bg {
				width: 96px;
				height: 108px;
				background-image: url("/assets/images/ufo50/cartridges/standard-issue.png");
				background-size: contain;
				image-rendering: pixelated;

				&.unplayed { background-image: url("/assets/images/ufo50/cartridges/dusty.png"); }
				&.completed { background-image: url("/assets/images/ufo50/cartridges/golden.png"); }
				&.cherry { background-image: url("/assets/images/ufo50/cartridges/cherry.png"); }

				&::before {
					content: ' ';
					background-image: url("/assets/images/ufo50/cartridges/shadow.png");
					width: 96px;
					height: 108px;
					display: block;
					position: absolute;
					background-size: cover;
					z-index: -1;
					opacity: .5;
				}

				& > .cartridge-icon {
					width: 72px;
					height: 72px;
					position: relative;
					left: -3px;
					top: 3px;
				}
			}
		}

		p-ct.card {
			border-image: var(--ufo-50-card-border);
			border-image-slice: 10;
			border-image-width: 10px;
			border-width: 8px;

			& .card-title {
				margin-top: -8px;
			}

			& .number {
				/*font-family: "UFO 50 Digital";*/
			}

			& > h3 {
				all: unset;
			}

			& .rating {
				position: absolute;
				top: 2px;
				right: 6px;
				width: 24px;
				height: 24px;
				image-rendering: pixelated;
			}

			/*& .card-tabs {

			}*/
		}
	}
}

@keyframes cartridge-hover {
	0% { transform: translateY(0px); }
	25% { transform: translateY(-3px); }
	50% { transform: translateY(0px); }
	75% { transform: translateY(3px); }
	100% { transform: translateY(0px); }
}