/* 重置所有元素的默认样式 */
* {
    margin: 0;            /* 移除所有元素的外边距 */
    padding: 0;          /* 移除所有元素的内边距 */
    box-sizing: border-box; /* 使元素的宽度和高度包含padding和border */
}

/* 设置页面的基本样式 */
body {
    background-color: #1a1a1a;    /* 设置深色背景 */
    font-family: Arial, sans-serif; /* 设置字体为Arial，如果不可用则使用系统默认无衬线字体 */
    color: white;                  /* 设置文字颜色为白色 */
    min-height: 100vh;            /* 设置最小高度为视口高度 */
    display: flex;                /* 使用弹性布局 */
    justify-content: center;      /* 水平居中对齐 */
    align-items: center;          /* 垂直居中对齐 */
}

/* 游戏容器的样式 */
.game-container {
    text-align: center;    /* 文本居中对齐 */
    padding: 20px;         /* 设置内边距为20像素 */
}

/* 游戏标题的样式 */
h1 {
    color: #4CAF50;        /* 设置标题颜色为绿色 */
    margin-bottom: 20px;   /* 底部外边距为20像素 */
    font-size: 2.5em;      /* 字体大小为基准字体的2.5倍 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 添加文字阴影效果 */
}

/* 分数显示区域的样式 */
.score-container {
    margin-bottom: 20px;   /* 底部外边距为20像素 */
    font-size: 1.2em;      /* 字体大小为基准字体的1.2倍 */
}

/* 当前分数和最高分数的样式 */
#current-score, #high-score {
    color: #4CAF50;        /* 设置分数颜色为绿色 */
    font-weight: bold;     /* 设置字体为粗体 */
    margin: 0 10px;        /* 左右外边距为10像素 */
}

/* 游戏画布的样式 */
#gameCanvas {
    border: 3px solid #4CAF50;  /* 设置3像素宽的绿色边框 */
    border-radius: 5px;         /* 设置边框圆角为5像素 */
    background-color: #000;     /* 设置画布背景为黑色 */
    margin-bottom: 20px;        /* 底部外边距为20像素 */
    touch-action: none;         /* 禁用默认的触摸行为 */
    -webkit-tap-highlight-color: transparent; /* 移除点击时的高亮效果 */
    user-select: none;          /* 防止文本选择 */
    -webkit-user-select: none;  /* Safari支持 */
}

/* 控制按钮容器的样式 */
.controls {
    display: flex;              /* 使用弹性布局 */
    justify-content: center;    /* 水平居中对齐 */
    gap: 20px;                 /* 设置按钮之间的间距为20像素 */
}

/* 按钮的基本样式 */
button {
    padding: 10px 20px;        /* 设置内边距：上下10像素，左右20像素 */
    font-size: 1.1em;          /* 字体大小为基准字体的1.1倍 */
    background-color: #4CAF50; /* 设置按钮背景为绿色 */
    color: white;              /* 设置按钮文字为白色 */
    border: none;              /* 移除边框 */
    border-radius: 5px;        /* 设置边框圆角为5像素 */
    cursor: pointer;           /* 鼠标悬停时显示手型光标 */
    transition: background-color 0.3s; /* 添加背景色过渡动画 */
}

/* 按钮悬停效果 */
button:hover {
    background-color: #45a049;  /* 悬停时改变背景色为深绿色 */
}

/* 按钮点击效果 */
button:active {
    transform: scale(0.98);     /* 点击时按钮略微缩小 */
}

/* 游戏消息（暂停/结束）的样式 */
.game-message {
    position: absolute;         /* 绝对定位 */
    top: 50%;                  /* 距顶部50% */
    left: 50%;                 /* 距左侧50% */
    transform: translate(-50%, -50%); /* 居中定位调整 */
    background-color: rgba(0, 0, 0, 0.8); /* 半透明黑色背景 */
    padding: 20px;             /* 内边距为20像素 */
    border-radius: 10px;       /* 边框圆角为10像素 */
    font-size: 2em;            /* 字体大小为基准字体的2倍 */
    color: #fff;               /* 文字颜色为白色 */
    text-align: center;        /* 文本居中对齐 */
    display: none;             /* 默认隐藏 */
}

/* 响应式设计：针对小屏幕设备的样式调整 */
@media (max-width: 650px) {
    #gameCanvas {
        width: 90vw;           /* 画布宽度设为视口宽度的90% */
        height: 90vw;          /* 画布高度设为视口宽度的90%，保持正方形 */
    }
    
    .game-container {
        padding: 10px;         /* 减小容器内边距为10像素 */
    }
    
    h1 {
        font-size: 1.8em;      /* 减小标题字体大小 */
    }
    
    .controls {
        flex-direction: column; /* 按钮改为垂直排列 */
        gap: 10px;             /* 减小按钮间距为10像素 */
    }
}