/*
 * 魔方展开图（Cube 公用）—— 结构与 Cube/cube-net/cube-net.js 一一对应。
 *
 * 规则一律收在 .cubeNet 作用域内：face / sticker 是通用词，别的页面也可能有同名类，
 * 不加作用域会互相串味。
 */

.cubeNet {
	display: grid;
	grid-template-columns: repeat(4, auto);
	grid-template-rows: repeat(3, auto);
	gap: 0.375rem;
	justify-content: center;
}

/* 十字排布：U 在 F 上方，L/F/R/B 一行，D 在 F 下方 */
.cubeNet .face {
	display: grid;
	grid-template-columns: repeat(3, 18px);
	grid-template-rows: repeat(3, 18px);
	gap: 0.125rem;
}
.cubeNet .face[data-face="U"] { grid-column: 2; grid-row: 1; }
.cubeNet .face[data-face="L"] { grid-column: 1; grid-row: 2; }
.cubeNet .face[data-face="F"] { grid-column: 2; grid-row: 2; }
.cubeNet .face[data-face="R"] { grid-column: 3; grid-row: 2; }
.cubeNet .face[data-face="B"] { grid-column: 4; grid-row: 2; }
.cubeNet .face[data-face="D"] { grid-column: 2; grid-row: 3; }

.cubeNet .sticker { border-radius: 3px; }