/* ===============================
   🎨 商业小游戏 · 可爱风主题变量
   =============================== */

:root {
	--bg-main: #FFF6E5;

	--card-bg: #FFFFFF;
	--primary: #FF8C42;
	--primary-dark: #FF6A00;

	--text-main: #5A3E2B;
	--text-sub: #9C7A5B;

	--shadow: 0 8px 0 rgba(0,0,0,0.08);
	--radius: 20px;
}

/* ===============================
   🔧 基础重置
   =============================== */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

body {
	background: var(--bg-main);
	color: var(--text-main);
	font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
	min-height: 100vh;
	overflow-x: hidden;
}

/* ===============================
   📦 页面结构
   =============================== */

.page-container {
	max-width: 100%;
	margin: 0 auto;
	padding: 16px;
	height: 100vh;
	display: flex;
	flex-direction: column;
}

.page {
	display: none;
	flex: 1;
	flex-direction: column;
}

.page.active {
	display: flex;
}

/* ===============================
   🐱 首页
   =============================== */

.start-page {
	background: var(--bg-main) url('static/images/dumb_cat_game/bg6.png') no-repeat center center fixed;
	background-size: cover; /* 保持背景图比例并覆盖整个容器 */
	background-size: auto 100vh; /* 高度充满屏幕，宽度按比例自适应（可能超出屏幕） */
	background-position: center; /* 水平居中，确保左右裁剪对称 */
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* ===============================
   🎮 按钮（统一风格）
   =============================== */

.start-buttons {
	width: 60%;
	margin-top: 280px; /* 增加顶部距离实现下移 */
	max-width: 250px; /* 适当缩小最大宽度 */
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.start-btn {
	padding: 18px;
	border-radius: var(--radius);
	font-size: 1.3rem;
	font-weight: 700;
	border: none;
	cursor: pointer;
	box-shadow: var(--shadow);
	transition: transform 0.1s ease;
}

.start-btn:active {
	transform: translateY(3px);
	box-shadow: 0 4px 0 rgba(0,0,0,0.08);
}

.primary-btn {
	background: var(--primary);
	color: #fff;
}

.secondary-btn {
	background: #FFD6B0;
	color: var(--text-main);
}

/*声音设置弹窗开关*/

.sound-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 14px 0;
	font-size: 1rem;
}

/* iOS Switch */
.ios-switch {
	position: relative;
	width: 46px;
	height: 26px;
}

.ios-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.ios-switch .slider {
	position: absolute;
	cursor: pointer;
	inset: 0;
	background-color: #ccc;
	border-radius: 20px;
	transition: 0.25s;
}

.ios-switch .slider::before {
	content: "";
	position: absolute;
	height: 22px;
	width: 22px;
	left: 2px;
	top: 2px;
	background-color: white;
	border-radius: 50%;
	transition: 0.25s;
	box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.ios-switch input:checked + .slider {
	background-color: var(--primary);
}

.ios-switch input:checked + .slider::before {
	transform: translateX(20px);
}

/* ===============================
   📚 关卡选择
   =============================== */

.level-select-page {
	align-items: center;
}

.level-select-title {
	margin-top: -40px !important;
	font-size: 2.2rem;
	font-weight: 800;
	margin: 20px 0 24px;
	color: var(--primary);
	margin-bottom: 24px; /* 保持底部距离不变 */
}

.level-grid {
	width: 100%;
	max-width: 420px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}

.level-card {
	background: var(--card-bg);
	border-radius: var(--radius);
	padding: 15px;
	box-shadow: var(--shadow);
	text-align: center;
	cursor: pointer;
	transition: transform 0.12s ease;
}

.level-card:active {
	transform: translateY(4px);
	box-shadow: 0 4px 0 rgba(0,0,0,0.08);
}

.level-number {
	font-size: 2rem;
	font-weight: 800;
	color: var(--primary);
}

.level-name {
	font-size: 1.1rem;
	font-weight: 700;
	margin-top: 4px;
}

/* ===============================
   🎯 游戏中状态
   =============================== */

.level-indicator {
	font-size: 1.1rem;
	font-weight: 800;
	color: var(--primary);
}

.target-emoji {
	font-size: 2.6rem;
}

/* ===============================
   🧩 游戏场景
   =============================== */

.game-scene {
	flex: 1;
	background: #FFE9CC;
	border-radius: var(--radius);
	position: relative;
	overflow: hidden;
	box-shadow: inset 0 0 0 2px #FFD6B0;
}

/* ===============================
   🐾 游戏物品
   =============================== */

.emoji-item {
	position: absolute;
	font-size: 3rem;
	cursor: pointer;
	user-select: none;
	transition: transform 0.12s ease;
}

.emoji-item,
.target-emoji {
	position: relative;
	display: inline-block;

	/* 原有大小你可以保留 */
	line-height: 1;

	/* 关键：白色软描边 */
	text-shadow:
		-2px -2px 0 #fff,
		 2px -2px 0 #fff,
		-2px  2px 0 #fff,
		 2px  2px 0 #fff,

		/* 轻投影，增加浮起感 */
		 0 6px 8px rgba(0, 0, 0, 0.15);
}

.target-emoji-wrapper {
	position: relative;
	display: inline-flex; /* 使用flex确保内部元素对齐 */
	align-items: center;  /* 垂直居中对齐 */
	justify-content: center; /* 水平居中对齐 */
}

/* 调整数量标记的位置 */
.target-count {
	position: relative; /* 改为相对定位，与emoji形成整体 */
	font-size: 1.1rem;
	font-weight: 800;
	color: var(--primary);
	margin-left: 4px; /* 与emoji保持适当距离 */
}



.emoji-item:active {
	transform: scale(0.85);
}

.emoji-item.wrong {
	animation: shake 0.5s ease;
}

.emoji-item.wrong:active {
	transform: none !important;
}

@keyframes pop {
	0% { transform: scale(1); }
	50% { transform: scale(1.4); }
	100% { transform: scale(1); }
}

@keyframes shake {
  0%, 100% { 
	transform: translate(-50%, -50%) translateX(0) rotate(var(--rotate, 0deg)); 
  }
  25% { 
	transform: translate(-50%, -50%) translateX(-6px) rotate(var(--rotate, 0deg)); 
  }
  75% { 
	transform: translate(-50%, -50%) translateX(6px) rotate(var(--rotate, 0deg)); 
  }
}

.emoji-item.wrong {
	animation: shake 0.5s ease;
}

/* ===============================
   🎉 弹窗
   =============================== */

.result-modal {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: all 0.2s ease;
}

.result-modal.show {
	opacity: 1;
	visibility: visible;
}

.result-content {
	background: var(--card-bg);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 24px;
	width: 90%;
	max-width: 340px;
	text-align: center;
}

.result-emoji {
	font-size: 3.5rem;
	margin-bottom: 12px;
}

.result-title {
	font-size: 1.4rem;
	font-weight: 800;
	margin-bottom: 6px;
}

.result-message {
	font-size: 1rem;
	color: var(--text-sub);
	margin-bottom: 16px;
}

.result-buttons {
	display: flex;
	gap: 12px;
	width: 100%;
	justify-content: space-between;
}

.result-buttons .start-btn {
	/* 按钮平分父容器宽度，减去gap间距 */
	flex: 1;
	/* 统一按钮内边距，与其他按钮保持一致 */
	padding: 16px 0;
	/* 去除默认按钮样式，确保样式统一 */
	border: none;
	outline: none;
}

/* ===============================
   🔝 头部按钮（统一优化样式）
   =============================== */
.header-btn {
	/* 核心：按钮样式贴合页面主题 */
	background: var(--card-bg);
	color: var(--primary);
	border: none;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 12px 16px;
	cursor: pointer;
	font-size: 1.2rem; /* 图标大小适中 */
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
	/* 去除默认按钮样式 */
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

/* 点击下沉效果，和页面其他按钮保持一致 */
.header-btn:active {
	transform: translateY(3px);
	box-shadow: 0 4px 0 rgba(0,0,0,0.08);
}

/* 头部容器：确保按钮固定在右上角 */
.header-container {
	width: 100%;
	display: flex;
	justify-content: flex-end; /* 靠右对齐（核心：实现右上角布局） */
	align-items: center;
	margin-bottom: 15px; /* 和原有间距保持一致 */
	padding: 0;
}

/* 特殊处理：首页顶部头部（原有绝对定位布局） */
.start-page-header {
	position: absolute;
	top: 20px;
	right: 20px; /* 直接固定到右上角，替代原有左侧布局 */
	left: auto; /* 取消左侧定位 */
	width: auto; /* 自适应宽度，不占满屏幕 */
	padding: 0;
	display: flex;
	justify-content: flex-end;
}

/* ===============================
   🎮 游戏信息卡（合并版）
   =============================== */

.game-info-card {
	background: var(--card-bg);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 14px 16px;
	margin-bottom: 12px;

	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
}

.game-info-left {
	font-size: 1.3rem;
	font-weight: 800;
	color: var(--primary);
}

.game-info-center {
	text-align: center;
	line-height: 1.1;
}

.game-info-center .find-text {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--text-sub);
}

.game-info-center .target-emoji {
	font-size: 2.6rem;
}

.game-info-right {
	display: flex;
	align-items: center;
}

.game-scene {
	position: relative;
	overflow: hidden;

	/* 关键：给一个“物理安全区” */
	padding: 12%;
	box-sizing: border-box;
}

.emoji-item {
	position: absolute;
	left: 0;
	top: 0;
	transform: translate(-50%, -50%);
}

/*倒计时*/
/* 添加倒计时样式 */
.countdown-timer {
	font-size: 1.5rem;
	color: var(--primary);
	margin-right: 16px;
	padding: 8px 12px;
	background-color: var(--card-bg);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	min-width: 65px;
	width: 65px; /* 固定宽度 */
	text-align: center;
	transition: color 0.3s ease;
}

/* 倒计时警告效果 */
.countdown-timer.warning {
	color: #FF3B30;
	animation: pulse 1s infinite alternate;
}

@keyframes pulse {
	from { transform: scale(1); }
	to { transform: scale(1.1); }
}

/* 关卡锁样式 */
.level-card {
	position: relative; /* 新增：为锁图标提供定位基准 */
}

.level-lock {
	position: absolute;
	top: 0;
	bottom: 0;
	margin-top: auto;  
	margin-bottom: auto;  
	right: 8px;  
	font-size: 1.2rem;
	color: var(--text-sub);
	display: none;
	height: fit-content; 
}

.level-card.locked .level-lock {
	display: block; /* 锁定状态显示锁图标 */
}

.level-card.locked {
	opacity: 0.6; /* 锁定状态半透明 */
	cursor: not-allowed; /* 鼠标指针显示禁止 */
}

.level-card.locked:active {
	transform: none !important; /* 锁定状态禁用点击效果 */
	box-shadow: var(--shadow) !important;
}



/* ===============================
   📱 移动端优化
   =============================== */

@media (max-width: 480px) {
	.level-grid {
		grid-template-columns: 1fr;
	}

	.emoji-item {
		font-size: 2.6rem;
	}
}