/* ============================================================
   CELL LAYOUT
   Each cell uses a 3D card-flip effect:
   - .cell-wrapper        → outer wrapper, handles positioning
   - .cell-card → the flipping card (3D transform)
   - .cell-front             → card FRONT (face-down, plain color)
   - .cell-back            → card BACK (image + word display)
   ============================================================ */

/* --- Outer Wrapper --- */
.cell-wrapper {
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transform-origin: 0% 0%;

	display: flex;
	align-items: flex-end;
	justify-content: center;

	width: 100%;
	height: 100%;
	container-type: inline-size;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	perspective: var(--cell-perspective, 700px);
	opacity: 0;
	z-index: 3;
	transition: 
		opacity 0.6s linear;
}
.cell-wrapper:hover {
	z-index: 4;
}

/* --- Flipping Card --- */
/* Make the card a positioning context for pseudo-elements */
.cell-card {
	position: absolute;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition:
		transform 0.5s ease-out,
		box-shadow 0.3s linear;
	will-change: transform;
}

.cell-card:hover {
	box-shadow: 0px 0px 18px 4px rgba(0, 0, 0, 0.16);
	/*transform: scale(1.025);*/
}

.cell-card.unhide {
	transform: rotateX(-180deg);
}

.cell-card.scale.unhide {
	transform: rotateX(-180deg) scale(1.02);
}

/* --- Card Front: Mask (face-down state) --- */
.cell-front {
	font-family: "Google Sans";
	font-size: 20cqi;
	display: flex;
    align-items: center;
    justify-content: center;
	position: absolute;
	width: 100%;
	height: 100%;

	background-color: rgb(237, 237, 237);
	background-size: cover;

	/* Faces forward by default; hidden after flip */
	transform: rotateX(0deg);
	backface-visibility: hidden;
}

/* --- Card Back: Image (revealed state) --- */
.cell-back {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: white;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	
	/* Starts rotated so it's hidden until the card flips */
	transform: rotateX(180deg);
	backface-visibility: hidden;
}

/* --- Word Label (sits on top of card back) --- */
.cell-label-bg {
	position: absolute;
	width: 100%;
	height: 100%;
	color: white;
	
	background-color: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(0.8px);
	opacity: 0;

	transition: opacity 0.6s linear, transform 0.6s ease-out;
}
.cell-label {
	font-family: "Google Sans";
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 10px;
	word-break: break-word;
	overflow-wrap: break-word;
	pointer-events: none;
	opacity: 1;

	font-size: 16cqi;

	transition: opacity 0.8s linear;
}
.cell-number {
	font-family: "Google Sans";
	font-size: 30cqi;
	display: flex;
    align-items: center;
    justify-content: center;
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	color: white;
	pointer-events: none;
	transition: opacity 0.8s linear;
}
@media (min-width: 600px) {
	.cell-label-bg:hover .cell-label.fade-out {
		opacity: 1 !important;
	}
	.cell-label-bg:hover .cell-number.fade-in {
		opacity: 0 !important;
	}
}
.cell-label-buffer {
	font-family: "Google Sans";
	position: fixed;
	top: 0;
	left: 0;
	padding: 10px;
	word-break: break-word;
	overflow-wrap: break-word;

	pointer-events: none;
	visibility: hidden;
	color: white;
	background-color: black;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes shake {
	0% {
		transform: translateX(3%);
	}

	50% {
		transform: translateX(-6%);
	}

	100% {
		transform: translateX(3%);
	}
}