/**
 * Grafixyy Card Identity
 * Experience: مليون مقابل مليار
 * Engine: million-vs-billion
 */

.grafixyy-home-door--scale-lab {
	border-color:
		rgba(202, 255, 49, 0.18);

	background:
		radial-gradient(
			circle at 84% 20%,
			rgba(202, 255, 49, 0.09),
			transparent 31%
		),
		linear-gradient(
			145deg,
			#0b0d0a,
			#050704
		);
}


.grafixyy-home-door--scale-lab::before {
	content: "";

	position: absolute;
	inset: 0;

	opacity: 0.08;

	background-image:
		linear-gradient(
			#caff31 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			#caff31 1px,
			transparent 1px
		);

	background-size:
		28px
		28px;

	mask-image:
		linear-gradient(
			to bottom,
			black,
			transparent 65%
		);

	pointer-events: none;
}


.grafixyy-home-scale-signal {
	position: relative;

	display: flex;

	flex-direction: column;
	align-items: center;

	gap: 18px;

	width:
		min(100%, 320px);
}


.grafixyy-home-scale-mini-grid {
	display: grid;

	grid-template-columns:
		repeat(7, 1fr);

	gap: 5px;

	width: 100%;
}


.grafixyy-home-scale-mini-grid > span {
	aspect-ratio: 1;

	border:
		1px solid rgba(202, 255, 49, 0.13);

	border-radius: 3px;

	background:
		rgba(202, 255, 49, 0.045);
}


.grafixyy-home-scale-mini-grid
> span.is-origin {
	opacity: 1;

	border-color: #caff31;

	background: #caff31;

	box-shadow:
		0 0 18px
		rgba(202, 255, 49, 0.52);
}


.grafixyy-home-scale-signal > strong {
	color: #caff31;

	font-family:
		Arial,
		sans-serif;

	font-size: 34px;
	font-weight: 900;

	letter-spacing: -1px;
}


.grafixyy-home-door--scale-lab
.grafixyy-home-door-copy > p {
	color: #a9c754;
}


.grafixyy-home-door--scale-lab
.grafixyy-home-door-link:hover {
	border-color:
		rgba(202, 255, 49, 0.3);
}


@media (max-width: 700px) {

	.grafixyy-home-scale-signal {
		width:
			min(100%, 270px);
	}


	.grafixyy-home-scale-mini-grid {
		gap: 4px;
	}


	.grafixyy-home-scale-signal > strong {
		font-size: 28px;
	}
}