/*
 * The reusable game-case component is a small 3D coordinate system. Its pixel values are
 * intentional raster seams, face rules, and anti-z-fighting offsets—not page
 * spacing. Keep the physical directions and transform order stable: changing
 * them can open gaps between faces or alter the projection.
 */

@property --shine-x {
	syntax: "<percentage>";
	inherits: true;
	initial-value: 42%;
}

@property --glare-x {
	syntax: "<percentage>";
	inherits: true;
	initial-value: 38%;
}

@property --glare-y {
	syntax: "<percentage>";
	inherits: true;
	initial-value: 50%;
}

.game-case-frame {
	container-type: inline-size;
	position: relative;
	isolation: isolate;
	margin: 0;
	aspect-ratio: 3 / 4;
	perspective: 53.125rem;
}

.game-case {
	/* Interactive inputs updated by case-tilt.js. */
	--glare-x: 38%;
	--glare-y: 50%;
	--rotate-x: -5deg;
	--rotate-y: 24deg;
	--shine-x: 42%;
	--_game-case-depth: var(--game-case-depth, 5.625rem);

	/* Exact rendering geometry. Pixels are deliberate in this component. */
	--case-overlay-offset: 1px;
	--case-hairline: 1px;
	--case-outline: 3px;
	--case-spine-rule: 7px;
	--case-label-block-inset: 30px;
	--case-label-inline-inset: 12px;
	--case-logo-offset: 13px;

	/* Component palette and compositing values. */
	--case-glare-faint: rgb(255 255 255 / 7%);
	--case-glare-soft: rgb(255 255 255 / 8%);
	--case-glare-medium: rgb(255 255 255 / 11%);
	--case-glare-strong: rgb(255 255 255 / 28%);
	--case-glare-peak: rgb(255 255 255 / 42%);
	--case-overlay-border: rgb(255 255 255 / 24%);
	--case-overlay-highlight: rgb(255 255 255 / 44%);
	--case-overlay-shadow: rgb(0 0 0 / 8%);

	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	transform: rotateX(var(--rotate-x)) rotateY(var(--rotate-y));
	transform-style: preserve-3d;

	&::before {
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: var(--_game-case-depth);
		border: var(--case-outline) solid var(--color-ink);
		background:
			linear-gradient(rgb(255 255 255 / 13%), transparent 40%),
			linear-gradient(
				90deg,
				var(--color-ink) 0 11%,
				var(--color-accent) 11% 22%,
				var(--color-highlight) 22% 100%
			);
		backface-visibility: hidden;
		content: "";
		transform: rotateX(90deg);
		transform-origin: center top;
	}

	&::after {
		position: absolute;
		inset: 0;
		border: var(--case-hairline) solid var(--case-overlay-border);
		background:
			linear-gradient(
				112deg,
				transparent calc(var(--shine-x) - 15%),
				var(--case-glare-soft) calc(var(--shine-x) - 10%),
				var(--case-glare-peak) var(--shine-x),
				var(--case-glare-medium) calc(var(--shine-x) + 8%),
				transparent calc(var(--shine-x) + 15%)
			),
			radial-gradient(
				circle at var(--glare-x) var(--glare-y),
				var(--case-glare-strong),
				var(--case-glare-faint) 28%,
				transparent 56%
			);
		box-shadow:
			inset var(--case-hairline) 0 var(--case-overlay-highlight),
			inset calc(var(--case-hairline) * -1) 0 var(--case-overlay-shadow);
		content: "";
		opacity: 0.62;
		pointer-events: none;
		transform: translateZ(calc(var(--_game-case-depth) + var(--case-overlay-offset)));
	}
}

:where(
	.game-case-front,
	.game-case-spine
) {
	position: absolute;
	display: block;
	backface-visibility: hidden;
}

.game-case-front {
	inset: 0;
	width: 100%;
	height: 100%;
	border: var(--case-outline) solid var(--color-ink);
	object-fit: cover;
	transform: translateZ(var(--_game-case-depth));
}

.game-case-spine {
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--_game-case-depth);
	height: 100%;
	background:
		linear-gradient(var(--color-ink), var(--color-ink)) top / 100% var(--case-outline) no-repeat,
		linear-gradient(var(--color-ink), var(--color-ink)) bottom / 100% var(--case-outline) no-repeat,
		linear-gradient(var(--color-ink), var(--color-ink)) left / var(--case-spine-rule) 100% no-repeat,
		linear-gradient(var(--color-ink), var(--color-ink)) right / var(--case-outline) 100% no-repeat,
		var(--color-highlight);
	color: var(--color-ink);
	transform: rotateY(-90deg);
	transform-origin: left center;

	> .game-case-spine-title {
		height: calc(100% - var(--case-label-block-inset));
		max-width: calc(var(--_game-case-depth) - var(--case-label-inline-inset));
		font-family: var(--font-sans);
		font-size: clamp(0.5625rem, 7cqi, 0.875rem);
		font-weight: 900;
		letter-spacing: 0.08em;
		line-height: 1.05;
		overflow-wrap: anywhere;
		text-align: center;
		text-transform: uppercase;
		transform: translateX(calc(var(--_game-case-depth) * 0.04));
		writing-mode: vertical-rl;
	}

	> .long {
		font-size: clamp(0.5rem, 5cqi, 0.625rem);
		letter-spacing: 0.05em;
	}

	> .game-case-spine-logo {
		position: absolute;
		bottom: var(--case-logo-offset);
		left: 50%;
		width: 31%;
		height: auto;
		filter:
			drop-shadow(var(--case-hairline) 0 0 var(--color-ink))
			drop-shadow(calc(var(--case-hairline) * -1) 0 0 var(--color-ink));
		transform: translateX(-50%);
	}
}

.game-case-spine ::selection {
	background-color: rgb(16 42 120 / 78%);
	color: var(--color-on-dark);
}

@media (forced-colors: active) {
	.game-case-front,
	.game-case::before {
		border-color: CanvasText;
	}

	.game-case-spine {
		outline: 1px solid CanvasText;
		outline-offset: -1px;
	}

	.game-case::after {
		display: none;
	}
}