@charset "utf-8";

.gamesSection {
	padding-bottom: 0;
}

.gamesSection h2 {
	font-family: "Silkscreen", monospace;
}

.gamesArchive {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--mg-gap);
	justify-items: center;
}

.gameEntry {
	--game-mac-gray: #e0ddd7;
	--game-card-width: clamp(
		290px,
		calc(85dvh - var(--WRAP-margin) - (var(--mg-gap) * 1.8)),
		760px
	);
	width: min(100%, var(--game-card-width));
	background: var(--game-mac-gray);
	border: var(--stack-border-w) solid var(--br-col);
	border-radius: 10px;
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(12px, 1.6vw, 20px);
	padding: clamp(10px, 1.2vw, 14px) clamp(10px, 1.4vw, 14px) clamp(16px, 2vw, 24px);
	font-family: "Silkscreen", monospace;
	box-sizing: border-box;
}

.gameThumb {
	aspect-ratio: 1 / 1;
	border: var(--stack-border-w) solid var(--br-col);
	overflow: hidden;
	background: #101114;
	border-radius: 5px;
	position: relative;
}

.gameThumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gameThumbAuto {
	position: relative;
	background: #0a111f;
}

.gameThumbAuto .gameThumbBg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.82);
}

.gameThumbAuto .gameThumbTitle {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 58%;
	height: auto;
	transform: translate(-50%, -50%);
	object-fit: contain;
	image-rendering: pixelated;
}

.gameThumbPlaceholder {
	display: grid;
	place-items: center;
	color: var(--txt-col-bk2);
	font-family: "Silkscreen", monospace;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
}

.gameContent {
	min-width: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"title actions"
		"meta actions";
	column-gap: clamp(10px, 1.5vw, 22px);
	row-gap: 0.35rem;
	align-items: start;
	padding-bottom: 20px;
}

.gameTitle {
	grid-area: title;
	font-size: clamp(1.6rem, 3vw, 2rem);
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin: 0;
	overflow-wrap: anywhere;
}

.gameMeta {
	grid-area: meta;
	font-size: clamp(0.9rem, 1.45vw, 1rem);
	font-weight: 700;
	color: var(--txt-col-bk1);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.gameActions {
	grid-area: actions;
	display: flex;
	align-items: end;
	justify-content: flex-end;
	/*gap: clamp(0.55rem, 1.1vw, 0.95rem);*/
	min-width: 0;
}

.gameAction {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.45rem 0.75rem;
	border: var(--stack-border-w) solid var(--br-col);
	background: transparent;
	color: var(--br-col);
	font-size: clamp(0.9rem, 1.15vw, 1.1rem);
	letter-spacing: 0.08em;
	text-transform: lowercase;
	font-family: "Silkscreen", monospace;
	line-height: 1;
}

.gameActionPrimary {
	background: var(--br-col);
	color: #fff;
	text-transform: uppercase;
	padding: 0.62rem 0.92rem;
	min-width: clamp(6.8rem, 11vw, 8.1rem);
}

.gameActionSecondary {
	border: 0;
	padding: 0.48rem 0 0;
	min-width: clamp(7rem, 14vw, 10.5rem);
	max-width: clamp(7rem, 14vw, 10.5rem);
	justify-content: flex-start;
	position: relative;
}

.gameActionSecondary::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0.1rem;
	border-top: var(--stack-border-w) solid var(--br-col);
}

.gameActionSecondary:hover,
.gameActionPrimary:hover {
	filter: brightness(1.05);
}

.gameActionDisabled {
	opacity: 0.5;
	cursor: default;
}

.gameInlineFrame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: none;
	background: #000;
	z-index: 2;
}

.gameEntry.isPlaying .gameInlineFrame {
	display: block;
}

.gameMobilePad {
	display: none;
	grid-area: mobile;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding-top: 6px;
}

.gameMobilePadMove {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.gameMobileBtn {
	min-width: 3.4rem;
	height: 3.4rem;
	border: var(--stack-border-w) solid var(--br-col);
	background: var(--br-col);
	color: #fff;
	font-family: "Silkscreen", monospace;
	line-height: 1;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	position: relative;
	padding: 0;
}

.gameMobileBtnTri {
	border: 0;
	background: transparent;
}

.gameMobileBtnTri::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--br-col);
	border: var(--stack-border-w) solid var(--br-col);
	border-radius: 5px;
}

.gameMobileBtnTriRight::before {
	clip-path: polygon(18% 10%, 18% 90%, 92% 50%);
}

.gameMobileBtnTriLeft::before {
	clip-path: polygon(82% 10%, 82% 90%, 8% 50%);
}

.gameMobileBtnShoot {
	min-width: 3.4rem;
	width: 3.4rem;
	height: 3.4rem;
	border-radius: 999px;
	box-shadow: 0 2px 0 #0002;
}

.gameMobileBtnShoot::before {
	content: none;
}

.gameMobileBtn:active {
	filter: brightness(0.94);
}

@media (max-width: 600px) {
	.gameEntry {
		padding: clamp(10px, 3.4vw, 12px) clamp(10px, 3.4vw, 12px) clamp(14px, 4vw, 18px);
	}
	.gameActionSecondary {
		min-width: 6.8rem;
	}
	.gameActionPrimary {
		min-width: 6.7rem;
		padding: 0.55rem 0.78rem;
	}
}

@media (hover: none) and (pointer: coarse) {
	.gameEntry.isPlaying .gameContent {
		grid-template-columns: 1fr;
		grid-template-areas:
			"actions"
			"mobile";
		row-gap: 0.55rem;
	}
	.gameEntry.isPlaying .gameTitle,
	.gameEntry.isPlaying .gameMeta,
	.gameEntry.isPlaying .gameActionSecondary {
		display: none;
	}
	.gameEntry.isPlaying .gameActions {
		width: 100%;
		justify-content: flex-end;
	}
	.gameEntry.isPlaying .gameMobilePad {
		display: flex;
	}
	.gameEntry.isPlaying,
	.gameEntry.isPlaying * {
		user-select: none;
		-webkit-user-select: none;
		-webkit-touch-callout: none;
	}
}