body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    text-align: center;
    overflow: hidden; /* 防止滚动条 */
    background-image: url('css/background.jpg'); /* 添加背景图片 */
    background-size: cover; /* 让背景图片覆盖整个页面 */
    background-position: center; /* 居中对齐背景图片 */
    background-attachment: fixed; /* 背景图片固定，不随页面滚动 */
}

/* 新增的上部标题样式 */
#upper-title {
    font-size: 1.5em;
    position: fixed;
    top: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.8); /* 半透明背景色 */
    z-index: 1100; /* 确保在最前面 */
    padding: 5px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    margin: 0;
}

/* 原有的游戏标题样式 */
#title {
    font-size: 2em;
    position: fixed;
    top: 40px; /* 调整位置到上部标题下方 */
    width: 100%;
    background-color: rgba(255, 255, 255, 0.8); /* 半透明背景色 */
    z-index: 1000;
    padding: 10px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    margin: 0;
}

.control-area {
    position: fixed;
    top: 100px; /* 距离顶部一定距离，使其在标题下方 */
    width: 100%;
    background-color: rgba(255, 255, 255, 0.8); /* 半透明背景色 */
    z-index: 900; /* 保证在游戏区域上层，但在标题下方 */
    padding: 10px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

div.gamearea {
    white-space: nowrap;
}

span.mineblock {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: #AAA;
    margin: 2px;
    cursor: pointer;
    text-align: center;
    vertical-align: top;
    font-weight: bold;
}

span.mineblock.clicked {
    background: #DDD;
    cursor: default;
}

span.mineblock.clicked.boom {
    background: #F00;
    color: #FFF;
}

span.mineblock.notmined {
    color: #FFF;
}

#gamearea {
    margin-top: 160px; /* 留出两个标题和控制区域的空间 */
    margin-bottom: 40px; /* 留出底部空间 */
}

#gameover {
    font-size: 1.5em;
    font-weight: bold;
    margin-top: 10px;
}

#footer {
    position: fixed; /* 固定在底部 */
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1em;
    z-index: 1000; /* 确保在最前面显示 */
    background-color: rgba(255, 255, 255, 0.8); /* 半透明背景色，防止遮挡内容 */
    padding: 5px;
}

#footer a {
    text-decoration: none;
    color: #00F;
}