/* 2048 网页版 - 样式限定在 .gaming.area 内，通用见 biz.css */

:root {
	--page-bg: #E8F0E0;
	--btn-primary: #6B8E5C;
	--btn-secondary: #8FA87A;
	--merge-duration: 0.2s;
}

/* 滑动动画层：.cell 为绝对定位的“飞格”，.unit 填满整格滑动 */
.gaming.area .slide-layer .cell > .unit {
	transition: left 0.08s linear, top 0.08s linear;
}

.unit img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.unit > .new-badge {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 14px;
	height: 14px;
	padding: 0 3px;
	background: #C00;
	color: #FFF;
	border-radius: 50%;
	font-size: 10px;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	pointer-events: none;
	z-index: 2;
}

.gaming.area .slide-layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: var(--board-radius);
	padding: var(--board-padding);
}

.gaming.area .slide-layer .cell {
	position: absolute;
}

/* 自定义数字显示区域 */
.customize.unit.display.area .list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
	gap: 10px;
	margin: 8px 0 12px;
	max-height: 70vh;
	overflow-y: auto;
}

/* 弹框内预览格：.cell 需固定尺寸，否则被 biz 的 .cell > .unit 绝对定位撑开导致布局塌陷 */
.customize.unit.display.area .cell {
	width: var(--cell-size, 80px);
	height: var(--cell-size, 80px);
	min-width: 48px;
	min-height: 48px;
	flex-shrink: 0;
}

/* 预览态：固定尺寸方框，与棋盘/滑层“填满格”不同 */
.cell .unit.preview {
	width: var(--cell-size, 80px);
	height: var(--cell-size, 80px);
	min-width: 48px;
	min-height: 48px;
	overflow: hidden;
	font-size: clamp(12px, 3vw, 20px);
}

.cell .unit.preview-error { background: #F8D7DA !important; }