/* CSS */
:root {
	--wa-cube-size: 352px; /* розмір одного боку кубика */
	--wa-cube-half: calc(var(--wa-cube-size) / 2);
}

/* Сцена з перспективою */
.wa-scene {
	width: 780px;
	height: 780px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Куб */
.wa-cube {
	width: var(--wa-cube-size);
	height: var(--wa-cube-size);
	position: relative;
	transform-style: preserve-3d;
	transform: rotateX(25deg) rotateY(-45deg);
	transition: transform .35s ease;
	cursor: pointer;
	outline: none;
}

/* Грані — ми робимо тільки 3 видимі грані */
.wa-cube-face {
	position: absolute;
	width: var(--wa-cube-size);
	height: var(--wa-cube-size);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 10px rgba(0,0,0,0.15);
	font-family: system-ui, sans-serif;
	font-weight: 700;
	font-size: calc(var(--wa-cube-size) * 0.24);
	color: #000;
	background: #000;
	user-select: none;
	transform-origin: center center;
	border: 1px solid #000;
	border-radius: 5px;
}


/* Верхня грань — піднімаємо вгору і повертаємо її щоб "лежала" */
.wa-face-top {
	transform: rotateX(90deg) translateZ(var(--wa-cube-half));
}

/* Ліва грань */
.wa-face-left {
	transform: rotateY(-90deg) translateZ(var(--wa-cube-half));
}

/* Права грань */
.wa-face-right {
	transform: rotateY(180deg) translateZ(var(--wa-cube-half));
}




.wa-cube-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	width: 100%;
	height: 100%;
}

.wa-cube-cell {
	display: flex;
	align-items: center;
	justify-content: center;
	transform-style: preserve-3d;
	box-sizing: border-box;
	border: 2px solid #000;
	border-radius: 4px;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);
}


.wa-cube-cell.wa-top-one {
	background: #f30f18;
}
.wa-cube-cell.wa-top-two {
	background: #0097e7;
}
.wa-cube-cell.wa-top-three {
	background: #ff6f17;
}
.wa-cube-cell.wa-top-four {
	background: #fff;
}
.wa-cube-cell.wa-top-five {
	background: #fff001;
}
.wa-cube-cell.wa-top-six {
	background: #f30f18;
}
.wa-cube-cell.wa-top-seven {
	background: #0097e7;
}
.wa-cube-cell.wa-top-eight {
	background: #fff;
}
.wa-cube-cell.wa-top-nine {
	background: #49ba6f;
}


.wa-cube-cell.wa-left-one {
	background: linear-gradient(90deg, #0d68b2, #005ba4);
}
.wa-cube-cell.wa-left-two {
	background: linear-gradient(90deg, #32894f, #016a29);
}
.wa-cube-cell.wa-left-three {
	background: linear-gradient(90deg, #f6e80a, #ffce00);
}
.wa-cube-cell.wa-left-four {
	background: linear-gradient(90deg, #32894f, #016a29);
}
.wa-cube-cell.wa-left-five {
	background: linear-gradient(90deg, #d80a12, #cd191f);
}
.wa-cube-cell.wa-left-six {
	background: linear-gradient(90deg, #ff6f17, #ff6000);
}
.wa-cube-cell.wa-left-seven {
	background: linear-gradient(90deg, #ff6f17, #ff6000);
}
.wa-cube-cell.wa-left-eight {
	background: linear-gradient(90deg, #f6e80a, #ffce00);
}
.wa-cube-cell.wa-left-nine {
	background: linear-gradient(90deg, #32894f, #016a29);
}


.wa-cube-cell.wa-right-one {
	background: linear-gradient(90deg, #ffce00, #f6e80a);
}
.wa-cube-cell.wa-right-two {
	background: linear-gradient(90deg, #ff6000, #ff6f17);
}
.wa-cube-cell.wa-right-three {
	background: linear-gradient(90deg, #ddd, #fff);
}
.wa-cube-cell.wa-right-four {
	background: linear-gradient(90deg, #ddd, #fff);
}
.wa-cube-cell.wa-right-five {
	background: linear-gradient(90deg, #016a29, #32894f);
}
.wa-cube-cell.wa-right-six {
	background: linear-gradient(90deg, #cd191f, #d80a12);
}
.wa-cube-cell.wa-right-seven {
	background: linear-gradient(90deg, #005ba4, #0d68b2);
}
.wa-cube-cell.wa-right-eight {
	background: linear-gradient(90deg, #cd191f, #d80a12);
}
.wa-cube-cell.wa-right-nine {
	background: linear-gradient(90deg, #ddd, #fff);
}


.wa-face-top .wa-letter {
	transform: rotateZ(90deg) rotateY(180deg);
}
.wa-face-left .wa-letter,
.wa-face-right .wa-letter {
	transform: rotateY(180deg);
}

.wa-cube:hover, .wa-cube:focus {
	transform: rotateX(18deg) rotateY(-18deg) translateZ(10px);
	will-change: transform;
}


@media screen and (max-width: 992px) {
	:root {
		--wa-cube-size: 220px; 
	}
	.wa-scene {
		width: 100%;
		height: 400px;
	}
}