.screen { display: none; }
.screen.active { display: block; }
#game-container { max-width: 600px; margin: auto; text-align: center; }

/* --- 通用按钮样式调整 --- */
/* 为主菜单应用flex布局，方便控制间距 */
#main-menu .button-container {
    display: flex;
    flex-direction: column; /* 让按钮垂直排列 */
    align-items: center;    /* 水平居中 */
    gap: 15px;              /* 【核心】设置按钮之间的垂直间距 */
}

#main-menu .button-container button {
    font-size: 1.2em;
    padding: 12px 24px;
    min-width: 200px;
}

.game-description {
    max-width: 500px;
    margin: 15px auto 25px auto;
    padding: 15px;
    background-color: #f8f9fa;
    border-left: 4px solid #007bff;
    text-align: left;
    font-size: 0.95em;
    line-height: 1.6;
}
.game-description p {
    margin: 0 0 10px 0;
}
.game-description p:last-child {
    margin-bottom: 0;
}

/* --- 第一关输入区域的专属样式 --- */
/* 新建一个容器来包裹输入框和按钮，方便控制布局和间距 */
.level1-controls {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直对齐（当高度不一时很有用）*/
    gap: 15px;               /* 【核心】设置元素之间的间距 */
    margin-top: 20px;        /* 与上方的题目拉开距离 */
}

/* 放大第一关的输入框 */
.level1-controls input[type="number"] {
    font-size: 1.8em;        /* 显著增大字体 */
    padding: 10px;           /* 增加内边距 */
    width: 120px;            /* 固定宽度 */
    text-align: center;      /* 数字居中显示 */
    border: 2px solid #ccc;
    border-radius: 8px;
}

/* 放大第一关的提交按钮 */
.level1-controls button {
    font-size: 1.2em;        /* 增大字体 */
    padding: 14px 25px;      /* 增大内边距以匹配输入框高度 */
    border-radius: 8px;
    cursor: pointer;
}

/* 第二关色块的特定样式 */
.color-grid {
    display: grid;
    /* 创建一个2列的网格，每列宽度平分 */
    grid-template-columns: repeat(2, 1fr);
    /* 设置网格项之间的间距 */
    gap: 15px;
    max-width: 320px; /* 限制最大宽度，让布局更好看 */
    margin: 20px auto; /* 居中显示 */
}

.color-block {
    /* 关键：设置宽高比为1:1，让它成为一个正方形 */
    aspect-ratio: 1 / 1;
    border-radius: 8px; /* 轻微的圆角 */
    cursor: pointer; /* 鼠标悬停时显示为手形 */
    transition: transform 0.2s ease; /* 添加一个简单的交互动画 */
}

.color-block:hover {
    transform: scale(1.05); /* 鼠标悬停时稍微放大 */
}

/* 第三关单词按钮的特定样式 */
.word-btn {
    padding: 10px 15px;
    font-size: 1em;
    cursor: pointer;
    border-radius: 6px;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
}
.word-btn:hover {
    background-color: #e0e0e0;
}

/* --- 用于分数反馈的样式 --- */
#feedback {
    margin-top: 20px;
    font-size: 1.2em;
    font-weight: bold;
    height: 30px; /* 给一个固定高度防止页面跳动 */
}
#feedback.correct {
    color: #28a745; /* 绿色 */
}
#feedback.wrong {
    color: #dc3545; /* 红色 */
}

/* --- 返回主菜单按钮--- */
.back-btn-container {
    width: 100%;
    text-align: center; /* 确保按钮在容器内居中 */
    padding: 20px 0;    /* 给按钮上下一些空间 */
}

/* 返回按钮本身的样式 */
.back-btn-container button {
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #f2f2f2;
}
.back-btn-container button:hover {
    background-color: #e0e0e0;
}