@charset "utf-8";

@layer game {
/* ====== 游戏：游戏页面必须声明一个带有.game类的根元素 ====== */
.game {
	--lv-1-color: #303133;
	--lv-2-color: #606266;
	--lv-3-color: #909399;

	--red-color: #d43d3d;
	--black-color: #333;
	--white-color: #f0f0f0;
	--blue-color: #409eff;
	--green-color: #67c23a;
	--orange-color: #e6a23c;
	--yellow-color: #ffeb3b;
	--gold-color: #ffd700;

	--lime-0: #f4fce3;
	--lime-1: #e9fac8;
	--lime-2: #d8f5a2;
	--lime-3: #c0eb75;
	--lime-4: #a9e34b;
	--lime-5: #94d82d;
	--lime-6: #82c91e;
	--lime-7: #74b816;
	--lime-8: #66a80f;
	--lime-9: #5c940d;

	/* ====== 场地 ====== */
	& .gaming.area {
		margin: 0;
		padding: 0;
		gap: 0.5rem;

		/* ====== 游戏信息 ====== */
		.gaming.info {
			&.list {
				padding: 0;
				margin: 0 0 8px 0;

			}
			&.one {
				padding: 4px 0;
				font-size: 0.9rem;
				color: #4a4a4a;
			}
		}

		/* ====== 计分板 ====== */
		& .scoreboard {
			& header, & .header {
				padding: 8px 12px;
			}

			& .score {
				font-size: clamp(1.75rem, 5vw, 2.5rem);
				font-weight: 700;
				text-align: center;
				line-height: 1.2;
				color: inherit;
			}
		}

		/* ====== 记录区 ====== */
		& .record.area {
			/* ====== 操作区 ====== */
			& .op.area {
				margin-bottom: 4px;
			}
		}

		/* ====== 结算界面 ====== */
		& .result {
			min-width: 420px;

			/* ------ 变体：窄版 */
			&.narrow {
				width: 300px;
			}

			& .outcome {
				font-size: 60px;
				font-weight: bold;
				text-align: center;
				text-shadow: 0 0 10px white;
				/* 胜利/赢家 */
				&.win {
					color: #4caf50;
				}
				/* 失败/输家 */
				&.lose {
					color: #f56c6c;
				}
				/* 平局 */
				&.draw {
					color: var(--lv-3-color);
				}
			}

			& .stats {
				font-size: 40px;
				margin-top: 10px;
				text-align: center;
			}
		}

		/* ------ 不得不做的杂项 ------ */
		&:focus {
			outline: none;/* 获得焦点时不显示选中框 */
		}
	}/* .game .gaming.area */

	/* ============ 跟回合有关的，适合于有回合的游戏 ============*/
	& .round {
		/* ====== 回合列表：回合列表记录的默认样式表。不局限于场地。建议用ol ====== */
		&.list {
			min-height: 100px;
			max-height: 330px;
			overflow-y: auto;
			padding-inline-start: 20px;

			& .summary {
				font-size: 0.8rem;
				color: var(--lv-2-color);
				margin: 4px 0 0;
			}
		}

		/* ====== 单个回合：单个回合记录的默认样式表。不局限于回合列表内。建议用li ====== */
		&.one {
			padding: 6px 8px;

			&:last-child {
				border-bottom: none;
			}

			/* ====== 回合内对玩家行动的描述 ====== */
			& .player.action {
				align-items: center;
				gap: 6px;
			}
		}

		/* ====== 回合序号 ====== */
		&.num {
			font-size: var(--intro-font-size, 0.75em);
			color: var(--lv-3-color);
		}
	}

	/* ====== 地图：有地图的游戏内，地图的默认样式表。不局限于场地，也可以是一局游戏之外的展示信息 ====== */
	& .map {
		/* ------------ 定位 ------------ */
		position: relative;/* 默认可偏移，可作为子元素定位依据 */
		/* ------------ 外观 ------------ */
		margin: 0 auto;/* 水平居中 */
		width: fit-content;/* 宽度由内容撑开 */
		/* ------------ 交互 ------------ */
		/* ------ 防止选中文字内容 ------ */
		user-select: none;
		-webkit-user-select: none;
		/* ------------ 浏览器 ------------ */
		contain: content; /* 声明内部变化不影响外部元素，外部变化也不影响内部元素。可以提升浏览器性能 */
		&:focus {
			outline: none;/* 获得焦点时不显示选中框 */
		}
	}

	/* ====== 单位：有单位的游戏内，单位的默认样式表，如棋子、数字方块等。不局限于地图内，也可以是一局游戏之外的展示信息 ====== */
	& .unit {
		/* ------------ 定位 ------------ */
		position: relative;/* 默认可偏移，可作为子元素定位依据 */
		z-index: var(--unit-z, 100);/* 给背景、纹理等留层叠空间 */
		/* ------------ 交互 ------------ */
		/* ------ 防止选中文字内容 ------ */
		user-select: none;
		-webkit-user-select: none;

		/* ====== 上一个行动的单位的标记 ====== */
		&.last.action::after {
			content: '';
			position: absolute;
			width: 8px;
			height: 8px;
			background-color: var(--last-action-color, rgba(255, 0, 0, 0.7));
			border-radius: 50%;
			z-index: var(--last-action-z, 15);
			top: 0;
			right: 0;
		}
		/* ====== 单位名字 ====== */
		& .name {
			z-index: 10;
		}
		/* ====== 标记/徽章 ====== */
		& .badge {
			/* ------------ 定位 ------------ */
			position: absolute;
			top: calc(var(--unit-size) * 0.03);
			right: calc(var(--unit-size) * 0.03);
			z-index: var(--badge-z, 22);
			/* ------------ 外观：圆形 ------------ */
			height: calc(var(--unit-size) * 0.2);
			min-width: calc(var(--unit-size) * 0.2);
			/* ------ 圆角：实现圆形 ------ */
			border-radius: 50%;
			padding: 0 calc(var(--unit-size) * 0.04);
			/* ------------ 布局 ------------ */
			display: flex;
			place-items: center;
			justify-content: center;
			/* ------------ 内容 ------------ */
			font-size: calc(var(--unit-size) * 0.14);
			font-weight: bold;
			line-height: 1;
			/* ------------ 交互 ------------ */
			pointer-events: none;/* 默认不触发事件 */

			/* ====== "新"标记：红底白字 ====== */
			&.new {
				background: #C00;
				color: #FFF;

				&::after {
					content: var(--badge-content, '!');
				}
			}
		}

		/* ====== 单位的图像 ====== */
		& svg {
			width: 100%;
			height: 100%;
		}

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

	/* ====== 当前状态 ====== */
	.cur {
		outline: 3px solid var(--cur-color, var(--blue-color));
		outline-offset: -3px;
		box-shadow: 0 0 8px color-mix(in srgb, var(--cur-color, var(--blue-color)) 50%, transparent), 0 0 0 3px color-mix(in srgb, var(--cur-color, var(--blue-color)) 30%, transparent);
		scale: 1.1;
	}

	/* ====== 快捷键列表 ====== */
	& .shortcut.list {
		& .one.shortcut {
			display: flex;
			align-items: baseline;
			gap: 4px;
			font-size: 0.85rem;

			& kbd {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				min-width: 24px;
				height: 24px;
				padding: 2px 6px;
				font-family: inherit;
				font-size: var(--intro-font-size, 0.75em);
				font-weight: 600;
				background: #f5f7fa;
				border: 1px solid #dcdfe6;
				border-radius: 4px;
				box-shadow: 0 1px 0 #dcdfe6;
				color: var(--lv-2-color);
			}
		}
	}

	/* ======================== 通用业务语义 ======================== */
	/* ====== 通用的"id" ====== */
	& .id {
		font-size: var(--id-font-size, 0.7em);
		color: var(--id-color, var(--lv-3-color));
	}

	/* ====== 通用的"名字" ====== */
	& .name {
		/* ------------ 定位 ------------ */
		position: relative;/* 默认可偏移，可作为子元素定位依据 */
		/* ------------ 外观 ------------ */
		min-width: fit-content;/* 确保内容完整显示 */
		flex: none;/* 被放在flex布局中时阻止伸缩。 */
		/* ------------ 布局 ------------ */
		text-align: center;/* 名字是核心标识，默认居中 */
		/* ------------ 文字 ------------ */
		font-weight: bold;
		color: var(--name-color, var(--lv-1-color));
	}

	/* ====== 通用的"标志" ====== */
	--logo-width: 100%;
	--logo-height: 100%;
	& .logo {
		/* ------------ 外观 ------------ */
		width: var(--logo-width);
		height: var(--logo-height);
		aspect-ratio: 1/1;/* 默认宽高相等（1:1） */
		flex: none;/* 被放在flex布局中时阻止伸缩。 */
		/* ------------ 布局 ------------ */
		/* 通常为单个子元素，所以默认用grid+center */
		display: grid;
		place-items: center;
		justify-content: center;/* 改为flex布局时也确保居中 */
		text-align: center; /* 确保在仅有文字子元素时文本水平居中 */

		/* 兼容：".logo本身是<img>"和".logo子元素是<img>" */
		&:is(img), > img {
			object-fit: contain;/* 图片完整显示，可能有留白 */
		}
	}

	/* ====== 通用的"简介/介绍" ====== */
	& .intro {
		/* ------------ 布局 ------------ */
		text-align: left;/* 辅助信息，默认靠左 */
		/* ------------ 文字 ------------ */
		font-size: var(--intro-font-size, 0.75em);
		color: var(--intro-color, var(--lv-3-color));
		line-height: 1.5;/* 默认1.5倍行间距，避免多行难看 */
	}

	/* ====== 通用的"档案" ======
		结构：
			.profile
				.summary（可选包装）
					.id
					.logo
					.name
					.intro
				其他子元素
		例：
			.unit.profile
				.summary
					.id
					.logo
					.name
					.intro
					.skill.list
					.friend.list
		变体：横向（.items-go-x）、纵向（.items-go-y）
	*/
	& .profile {
		position: relative;/* 默认可偏移，可作为子元素定位依据 */
		display: flex;

		> .summary {
			position: relative;/* 默认可偏移，可作为子元素定位依据 */
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 0.5rem;
			padding: 1rem;
			border-radius: 8px;
			background-color: rgba(255, 255, 255, 0.6);
		}

		&.items-go-x {
			align-items: flex-start;
			gap: 1rem;

			>.summary {
				flex: none;/* 被放在flex布局中时阻止伸缩。 */
				width: 180px;
			}
		}

		&.items-go-y {
			gap: 0.75rem;

			>.summary {
				width: 100%;
			}
		}

		/*
		>.id, >.summary>.id {
			position: absolute;
			暂未设计样式
		}
		*/

		/*
		>.logo, >.summary>.logo {
			默认无覆盖样式
		}
		>.name, >.summary>.name {
			默认无覆盖样式
		}
		>.intro, >.summary>.intro {
			默认无覆盖样式
		}
		*/

		/* 档案四要素，若为空则隐藏 */
		& :is(.logo:not(img), .id, .name, .intro):empty {
			display: none;
		}

		/* ====== 玩家 ====== */
		&.player {
			align-items: center;
			gap: 0.5rem;

			/* ====== 头像 ====== */
			--player-logo-size: 32px;
			& .logo {
				--logo-width: var(--player-logo-size);
				--logo-height: var(--player-logo-size);
			}

			/* ====== 玩家所属队伍：在玩家信息区内展示队伍信息的基础样式 ====== */
			& .team {
				--team-logo-size: 16px;
				--team-flag-width: 12px;
				--team-flag-height: 8px;
			}
		}/* .game .player.profile */

		/* ====== 队伍 ====== */
		&.team {
			align-items: center;
			gap: 0.5rem;

			/* ====== 队标 ====== */
			--team-logo-size: 24px;
			& .logo {
				--logo-width: var(--team-logo-size);
				--logo-height: var(--team-logo-size);
				border-radius: 4px;
			}

			/* ====== 队名 ====== */
			& .name {
				--name-color: var(--lv-2-color);
			}

			/* ====== 旗帜 ====== */
			--team-flag-width: 20px;
			--team-flag-height: 12px;
			--team-flag-color: transparent;
			& .flag {
				width: var(--team-flag-width);
				height: var(--team-flag-height);
				border-radius: 2px;
				background-color: var(--team-flag-color);
				/* ------ 盒模型 ------ */
				flex: none;/* 被放在flex布局中时阻止伸缩。 */
			}

			/* ====== 成员列表 ====== */
			& .member.list {
				gap: 0.25rem;
				flex-wrap: wrap;
			}
		}/* .game .team.profile */
	}/* .game .profile */

	/* ====== 暂停 ====== */
	& .paused {
		cursor: pointer; /* 默认：被暂停的可以通过点击取消暂停，所以设置光标为手型 */
	}

	/* ====== 通用的"操作区"：放按钮之类的地方 ====== */
	& .op.area {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		align-items: center;
	}

	/* ====== 正在提示的元素 ====== */
	& .hinting {
		outline: 3px solid var(--hint-color, var(--orange-color));
		outline-offset: -3px;
	}

	/* ====== 遮罩 ====== */
	/* 后代有遮罩元素时，为遮罩层提供定位基准 */
	& :has(.overlay) {
		position: relative;
	}

	/* 遮罩本身 */
	& .overlay {
		position: absolute;
		inset: 0;
		z-index: var(--overlay-z, 1000);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 1rem;
		background: rgba(0, 0, 0, 0.5);
		border-radius: inherit;
		pointer-events: auto;

		> .title {
			font-size: clamp(1.25rem, 4vw, 2rem);
			font-weight: 600;
			color: #fff;
			text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
		}

		& .tip {
			color: rgba(255, 255, 255, 0.85);
		}
	}

	/* ====== 提示 ====== */
	& .tip {
		font-size: 0.8rem;
		color: var(--tip-color, var(--lv-2-color));

		/* ------ 变体：不同位置 ------ */
		&.at-top { margin: 0; }
		&.at-bottom { margin-top: 6px; }
	}

	/* ====== 强提示闪现：常用于暴击、将军、阵亡等 ====== */
	& .callout {
		position: fixed;
		inset: 0;
		z-index: var(--callout-z, 1000);
		display: flex;
		justify-content: center;
		align-items: center;
		pointer-events: none;
		animation: become-bigger-and-transparent var(--callout-duration, 1s) ease-out;
	}

	/* ====== 描述 ====== */
	& .description {
		color: var(--lv-2-color);
	}

	& .list {
		list-style: none;
	}

	/* ====== 形状修饰类 ====== */
	& .circle {
		width: var(--circle-size, 80px);
		height: var(--circle-size, 80px);
		aspect-ratio: 1/1;/* 避免宽高变量未定义的兜底 */
		border-radius: 50%;
	}
	& .rounded { border-radius: 8px; }

	/* ======================== 非业务通用 ======================== */
	/* ====== 颜色 ====== */
	& .red { --color: var(--red-color); }
	& .black { --color: var(--black-color); }
	& .white { --color: var(--white-color); }
	& .blue { --color: var(--blue-color); }
	& .green { --color: var(--green-color); }
	& .orange { --color: var(--orange-color); }
	& .yellow { --color: var(--yellow-color); }
	& .gold { --color: var(--gold-color); }

	/* 简单使用搭配。例：
		<div class="red text-color">红色文字</div>
		<div class="black bg-color">黑色背景</div>
		<div class="red piece">红棋子</div>
		一个元素若同时有两个颜色类，--color会以最后一个为准。若要多个颜色，必须分为两层元素。
		<div class="black bg-color"><div class="red piece">黑色背景红棋子</div></div>
	*/
	& .bg-color { background-color: var(--color); }
	& .text-color { color: var(--color); }

	/* ====== 收折卡片的通用/基础样式 ====== */
	& details {
		border: 1px solid #ebeef5;
		border-radius: 4px;
		margin-bottom: 8px;
		background: #fff;
		padding: 12px 16px;

		&:last-of-type {
			margin-bottom: 0;
		}

		> summary {
			font-weight: 600;
			font-size: 1rem;
			cursor: pointer;
			list-style: none;
			position: relative;/* 默认可偏移，可作为子元素定位依据 */

			&::-webkit-details-marker {
				display: none;
			}

			/* "展开/收起"箭头 */
			&::after {
				content: '';
				position: absolute;
				right: 0;
				top: 50%;
				width: 8px;
				height: 8px;
				border-right: 2px solid var(--lv-3-color);
				border-bottom: 2px solid var(--lv-3-color);
				transform: translateY(-50%) rotate(-45deg);
				transform-origin: center center;
				transition: transform 0.2s;
			}

			/* ------ 不得不做的杂项 ------ */
			&:focus {
				outline: none;/* 获得焦点时不显示选中框 */
			}
		} /* .game details > summary */

		&[open] > summary::after {
			transform: translateY(-50%) rotate(45deg);
		}

		&[open] > summary {
			margin-bottom: 12px;
		}
	}/* .game details */

	/* ------ 不得不做的杂项 ------ */
	& input {
		/* input默认有自己的 font-family，需显式继承才能使用到.game等处定义的字体 */
		font-family: inherit;
	}
}/* .game */

/* ====== 棋盘类游戏特需 ====== */
.board.game {
	/* ====== 棋盘类游戏的单位 ====== */
	& .unit {
		/* ------------ 外观 ------------ */
		/* ------ 盒模型 ------ */
		flex: none;/* 被放在flex布局中时阻止伸缩。 */
		/* ------------ 布局 ------------ */
		/* 子元素（不管是啥）：默认在中间 */
		display: flex;
		place-items: center;
		justify-content: center;
		text-align: center;
	}

	/* ====== 格子：棋盘格子，不限于在棋盘内。 ====== */
	& .cell {
		/* ------------ 定位 ------------ */
		position: relative;/* 默认可偏移，可作为子元素定位依据 */
		/* ------------ 外观 ------------ */
		/* ------ 尺寸：默认为方形 ------ */
		width: var(--cell-size);
		height: var(--cell-size);
		aspect-ratio: 1/1;/* 避免宽高变量未定义的兜底 */
		/* ------ 盒模型 ------ */
		flex: none;/* 被放在flex布局中时阻止伸缩。 */
		/* ------ 背景 ------ */
		background: #d4e0c8;
		/* 默认背景色，非必需 */
		/* ------------ 布局 ------------ */
		/* ------ 子元素（单位）：默认在中间 ------ */
		display: flex;
		place-items: center;
		justify-content: center;

		/* ====== 棋盘类游戏的格子里的单位 ====== */
		> .unit {
			/* ------------ 外观 ------------ */
			/* ------ 尺寸：默认占满格子空间。 ------ */
			width: 100%;
			height: 100%;
		}
	}

	/* ====== 棋盘。继承.map ====== */
	--cell-size-min: 20px;
	--cell-size-max: 80px;
	& .board.map {
		--board-cols: 4;
		--board-rows: 4;
		--board-fixed-height: 200px;/* 预留网站header+游戏toolbar空间 */
		--board-fixed-width: 280px;/* 预留sidebar空间 */
		--board-padding: 10px;/* 棋盘边框+padding开销：border(4px)+padding(6px) */
		--cell-size: max(var(--cell-size-min), min(calc((100vh - var(--board-fixed-height) - var(--board-padding)) / var(--board-rows)),
					calc((100vw - var(--board-fixed-width) - var(--board-padding)) / var(--board-cols)),
					var(--cell-size-max)));
		--line-color: #9bad8f;
		--unit-size: var(--cell-size);
		/* ------------ 外观 ------------ */
		/* ------ 尺寸 ------ */
		width: fit-content;/* 确保被内容撑开不撑破 */
		height: fit-content;/* 确保被内容撑开不撑破 */
		/* ------ 盒模型：非必需 ------ */
		border: 2px solid var(--line-color);
		border-radius: 8px;
		padding: 6px;
		/* ------ 背景 ------ */
		background: #b8c9a8;
		/* ------------ 布局 ------------ */
		display: grid;
		grid-template-columns: repeat(var(--board-cols), var(--cell-size));
		grid-template-rows: repeat(var(--board-rows), var(--cell-size));
		gap: 0;
		/* ------------ 交互 ------------ */
		/* ------ 防止选中文字内容 ------ */
		user-select: none;
		-webkit-user-select: none;

		/* ====== 特指出现在棋盘内的格子 ====== */
		& .cell {
			/* ------------ 外观 ------------ */
			border: 1px solid var(--line-color);
			border-radius: 0;/* 默认无圆角 */
			background: #d4e0c8;

			/* ====== 格子内的状态标记 ====== */
			& .target.mark {
				position: absolute;
				width: 100%;
				height: 100%;
				z-index: var(--mark-z, 120);
				pointer-events: none;

				/* ====== 可作为移动目标的格子 ====== */
				&.movable::after {
					content: "";
					position: absolute;
					width: 40%;
					height: 40%;
					top: 30%;
					left: 30%;
					border-radius: 50%;/* 默认为圆形 */
					background-color: rgba(40, 167, 69, 0.5);
				}

				/* ====== 禁止目标 ====== */
				&.blocked {
					&::before, &::after {
						content: "";
						position: absolute;
						box-sizing: border-box;
					}
					&::before {
						width: 70%;
						height: 15%;
						top: 42.5%;
						left: 15%;
						background-color: var(--blocked-color, rgba(220, 53, 69, 0.9));
						transform: rotate(45deg);
						border-radius: 2px;
					}
					&::after {
						width: 60%;
						height: 60%;
						top: 20%;
						left: 20%;
						border-radius: 50%;
						border: 4px solid var(--blocked-color, rgba(220, 53, 69, 0.9));
						background-color: rgba(255, 0, 0, 0.3);
					}
				}

				/* ====== 可攻击单位 ====== */
				&.attackable {
					&::before, &::after {
						content: "";
						position: absolute;
						z-index: var(--mark-z, 20);
						width: 60%;
						height: 15%;
						top: 42.5%;
						left: 20%;
						background-color: var(--attackable-color, rgba(255, 0, 0, 0.7));
						border-radius: 2px;
					}

					&::before { transform: rotate(45deg); }
					&::after { transform: rotate(-45deg); }
				}
			} /* .game .board.map .cell .target.mark */

			/* ====== 棋盘内格子内的单位 ====== */
			& .unit {
				/* ====== 可移动的单位 ====== */
				&.movable {
					cursor: pointer;
				}
			}
		} /* .board.game .board.map .cell */
	} /* .board.game .board.map */

	/* ====== 棋子：继承.unit ====== */
	& .piece.unit {
		/* ------------ 外观：默认为圆形，有阴影 ------------ */
		/* ------ 尺寸 ------ */
		width: var(--unit-size);
		height: var(--unit-size);
		aspect-ratio: 1/1;/* 避免宽高变量未定义的兜底 */
		/* ------ 圆角：4个圆角默认1/4圆，配合相同的宽高得到圆形 ------ */
		border-radius: 50%;
		/* ------ 阴影：非必需 ------ */
		box-shadow: var(--piece-shadow, 0 1px 3px rgba(0, 0, 0, 0.3));
		/* ------ 盒模型 ------ */
		flex: none;/* 被放在flex布局中时阻止伸缩。 */
		/* ------------ 布局 ------------ */
		display: inline-flex;
		justify-content: center;
		align-items: center;
		/* ------------ 交互 ------------ */
		cursor: pointer; /* 手型光标 */
	}

	/* ====== 单位可移动的棋盘类游戏 ====== */
	&.unit.movable {
		& .cell {

			/* ====== 棋盘类游戏的格子里的单位 ====== */
			>.unit {
				/* ------------ 定位 ------------ */
				position: absolute;/* 绝对定位以便移动 */
				inset: 0;/* 默认覆盖满整个格子 */
			}
		}
	} /* .unit.movable.board.game */
} /* .board.game */

/* ============ 动画关键帧。@keyframes不能嵌套在内层 ============ */
@keyframes become-bigger-and-transparent {
	0% {
		scale: 1;
		opacity: 1;
	}

	50% {
		scale: 1.5;
		opacity: 0.7;
	}

	100% {
		scale: 2;
		opacity: 0;
	}
}

}/* @layer game */