/* 基本页面样式 */
body {
    font-family: 'Arial', sans-serif; /* 字体设置为Arial和无衬线字体 */
    background-image: url('image/01.png'); /* 设置背景图片 */
    background-size: cover; /* 背景图片覆盖整个页面 */
    background-position: center; /* 背景图片居中显示 */
    display: flex; /* 使用弹性布局 */
    justify-content: center; /* 水平居中对齐 */
    align-items: center; /* 垂直居中对齐 */
    height: 100vh; /* 高度占满视口高度 */
    margin: 0; /* 去除默认边距 */
    overflow: hidden; /* 隐藏溢出内容 */
    position: relative; /* 定位上下文 */
}

/* 容器样式 */
.container {
    width: 90%; /* 容器宽度为视口宽度的90% */
    max-width: 1200px; /* 最大宽度为1200px */
    text-align: center; /* 文本居中对齐 */
    background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
    padding: 20px; /* 内边距设置为20px */
    border-radius: 15px; /* 圆角边框 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    position: relative; /* 定位上下文 */
    z-index: 1; /* 确保在其他元素之上 */
}

/* 标题样式 */
h1 {
    color: #ff6f61; /* 标题颜色 */
    font-size: 36px; /* 字体大小 */
    animation: bounce 2s infinite; /* 添加弹跳动画 */
}

/* 弹跳动画定义 */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);} /* 初始和结束位置 */
    40% {transform: translateY(-30px);} /* 最高点 */
    60% {transform: translateY(-15px);} /* 中间点 */
}

/* 难度按钮样式 */
.difficulty-buttons button {
    padding: 15px 30px; /* 内边距设置 */
    margin: 10px; /* 外边距设置 */
    cursor: pointer; /* 鼠标悬停时显示手型光标 */
    border: none; /* 无边框 */
    border-radius: 50px; /* 圆形边角 */
    background-color: #ffcc5c; /* 按钮背景颜色 */
    color: white; /* 字体颜色 */
    font-size: 18px; /* 字体大小 */
    transition: background-color 0.3s, transform 0.3s; /* 过渡效果 */
}

/* 按钮悬停效果 */
.difficulty-buttons button:hover {
    background-color: #ff9966; /* 悬停时改变背景颜色 */
    transform: scale(1.1); /* 悬停时放大按钮 */
}

/* 开始按钮样式 */
.start-button {
    margin-top: 20px; /* 顶部外边距 */
    padding: 15px 30px; /* 内边距设置 */
    cursor: pointer; /* 显示手型光标 */
    border: none; /* 无边框 */
    border-radius: 50px; /* 圆形边角 */
    background-color: #ff6f61; /* 背景颜色 */
    color: white; /* 字体颜色 */
    font-size: 18px; /* 字体大小 */
    transition: background-color 0.3s, transform 0.3s; /* 过渡效果 */
}

/* 开始按钮悬停效果 */
.start-button:hover {
    background-color: #ff4d4d; /* 悬停时改变背景颜色 */
    transform: scale(1.1); /* 悬停时放大按钮 */
}

/* 定时器样式 */
.timer {
    margin-top: 20px; /* 顶部外边距 */
    font-size: 24px; /* 字体大小 */
    color: #ff6f61; /* 字体颜色 */
    animation: glow 2s infinite alternate; /* 添加闪烁动画 */
}

/* 闪烁动画定义 */
@keyframes glow {
    from {text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #ff6f61, 0 0 20px #ff6f61, 0 0 25px #ff6f61, 0 0 30px #ff6f61, 0 0 35px #ff6f61;} /* 开始状态 */
    to {text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ff6f61, 0 0 40px #ff6f61, 0 0 50px #ff6f61, 0 0 60px #ff6f61, 0 0 70px #ff6f61;} /* 结束状态 */
}

/* 游戏面板样式 */
.game-board {
    margin-top: 20px; /* 顶部外边距 */
    display: grid; /* 使用网格布局 */
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); /* 自适应列数 */
    gap: 10px; /* 网格间隙 */
}

/* 网格单元格样式 */
.cell {
    width: 90px; /* 固定宽度 */
    height: 40px; /* 固定高度 */
    border: 2px solid #ffc3a0; /* 边框样式 */
    border-radius: 15px; /* 圆角边框 */
    display: flex; /* 使用弹性布局 */
    justify-content: center; /* 内容水平居中 */
    align-items: center; /* 内容垂直居中 */
    margin: 5px; /* 外边距 */
    line-height: normal; /* 使用正常行高 */
    vertical-align: middle; /* 垂直对齐 */
    cursor: pointer; /* 显示手型光标 */
    background-color: #90EE90; /* 浅绿色背景 */
    transition: transform 0.2s, box-shadow 0.2s; /* 过渡效果 */
    position: relative; /* 定位上下文 */
    background-image: url('https://img.alicdn.com/tfs/TB1kWZKQXXXXXcuaXXXXXXXXXXX-64-64.png'); /* 卡通兔子图标 */
    background-size: 24px 24px; /* 缩小背景图片大小 */
    background-repeat: no-repeat; /* 不重复背景图片 */
    background-position: center; /* 背景图片居中 */
    background-blend-mode: multiply; /* 背景混合模式 */
}

/* 网格单元格伪元素，用于阴影效果 */
.cell::before {
    content: ''; /* 伪元素内容为空 */
    position: absolute; /* 绝对定位 */
    top: 0; /* 顶部对齐 */
    left: 0; /* 左侧对齐 */
    right: 0; /* 右侧对齐 */
    bottom: 0; /* 底部对齐 */
    background-color: #ffffff; /* 白色背景 */
    opacity: 0.2; /* 半透明效果 */
    border-radius: 15px; /* 圆角边框 */
}

/* 网格单元格内的文本样式 */
.cell span {
    font-weight: bold; /* 加粗文本 */
    color: #2F4F4F; /* 深灰色字体 */
    font-size: 24px; /* 增加字号以适应较大的卡片 */
}

/* 网格单元格悬停效果 */
.cell:hover {
    transform: scale(1.1); /* 悬停时放大 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
}

/* 匹配后的样式 */
.matched {
    background-color: #c8e6c9 !important; /* 匹配后背景颜色 */
    color: #2e7d32; /* 匹配后字体颜色 */
    pointer-events: none; /* 禁用点击事件 */
    animation: disappear 0.5s forwards; /* 匹配后消失动画 */
}

/* 消失动画定义 */
@keyframes disappear {
    to { opacity: 0; transform: scale(0); } /* 最终状态：透明且缩小 */
}

/* 选中状态样式 */
.selected {
    background-color: #bbdefb; /* 选中时背景颜色 */
}

/* 弹出框样式 */
.popup {
    position: fixed; /* 固定定位 */
    top: 50%; /* 垂直居中 */
    left: 50%; /* 水平居中 */
    transform: translate(-50%, -50%); /* 通过平移实现居中效果 */
    background-color: white; /* 背景颜色为白色 */
    padding: 20px; /* 内边距 */
    border-radius: 15px; /* 圆角边框 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
    z-index: 1000; /* 确保在其他元素之上 */
    display: none; /* 默认隐藏 */
    text-align: center; /* 文本居中对齐 */
    animation: fadeIn 0.5s; /* 添加淡入动画 */
}

/* 弹出框淡入动画定义 */
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9); } /* 开始状态 */
    to { opacity: 1; transform: scale(1); } /* 结束状态 */
}

/* 遮罩层样式 */
.overlay {
    position: fixed; /* 固定定位 */
    top: 0; /* 顶部对齐 */
    left: 0; /* 左侧对齐 */
    width: 100%; /* 100%宽度 */
    height: 100%; /* 100%高度 */
    background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
    display: none; /* 默认隐藏 */
    z-index: 999; /* 确保在弹出框下面 */
}

/* 关闭弹出框按钮样式 */
.close-popup {
    margin-top: 10px; /* 顶部外边距 */
    padding: 15px 30px; /* 内边距设置 */
    border: none; /* 无边框 */
    border-radius: 50px; /* 圆形边角 */
    background-color: #ff6f61; /* 背景颜色 */
    color: white; /* 字体颜色 */
    font-size: 18px; /* 字体大小 */
    cursor: pointer; /* 显示手型光标 */
    transition: background-color 0.3s, transform 0.3s; /* 过渡效果 */
}

/* 关闭按钮悬停效果 */
.close-popup:hover {
    background-color: #ff4d4d; /* 悬停时改变背景颜色 */
    transform: scale(1.1); /* 悬停时放大按钮 */
}

/* 烟花容器样式 */
.fireworks-container {
    position: absolute; /* 绝对定位 */
    top: 0; /* 顶部对齐 */
    left: 0; /* 左侧对齐 */
    width: 100%; /* 100%宽度 */
    height: 100%; /* 100%高度 */
    pointer-events: none; /* 禁用鼠标事件 */
    z-index: 100; /* 确保在其他元素之上 */
}

/* 单个烟花样式 */
.firework {
    position: absolute; /* 绝对定位 */
    width: 10px; /* 宽度 */
    height: 10px; /* 高度 */
    border-radius: 50%; /* 圆形 */
    background-color: white; /* 背景颜色为白色 */
    opacity: 0; /* 初始透明度 */
    animation: firework-animation 2s ease-in-out forwards; /* 添加烟花动画 */
}

/* 烟花动画定义 */
@keyframes firework-animation {
    0% {
        opacity: 1; /* 初始状态完全可见 */
        transform: translateY(0) scale(1); /* 初始位置 */
    }
    50% {
        opacity: 0.5; /* 中间状态半透明 */
        transform: translateY(-200px) scale(2); /* 向上移动并放大 */
    }
    100% {
        opacity: 0; /* 最终状态完全透明 */
        transform: translateY(-400px) scale(4); /* 向上移动并进一步放大 */
    }
}

/* 卡通图片容器样式 */
.cartoon-images {
    display: flex; /* 使用弹性布局 */
    justify-content: space-around; /* 图片之间均匀分布 */
    margin-top: 20px; /* 顶部外边距 */
}

/* 卡通图片样式 */
.cartoon-images img {
    width: 100px; /* 固定宽度 */
    height: 100px; /* 固定高度 */
    border-radius: 15px; /* 圆角边框 */
}