body {
    font-family: Arial,sans-serif;
    text-align: center;
    background: linear-gradient(rgba(30,60,114,0.3),rgba(42,82,152,0.6)),url('https://www.dotsource.de/fileadmin/hp_editors/Hintergrundbilder/Cloud_Services_IT.jpg') no-repeat center center fixed;
    background-size: cover;
    background-attachment: fixed;
    color: #fff;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
}

h1 {
    margin-top: 20px;
    font-size: 3em;
    text-shadow: 2px 2px 10px rgba(0,0,0,.5)
}

/* 修改描述文本背景和样式 */
h2 {
    font-size: 1.3em;
    color: #fff; /* 保持白色字体 */
    text-align: center;
    margin-top: 10px;
    margin-bottom: 20px;
    line-height: 1.4;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* 轻微阴影效果 */
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(50, 50, 50, 0.6); /* 调整为较浅的灰色半透明背景 */
    padding: 15px 30px; /* 调整内边距，使文本看起来更宽松 */
    border-radius: 10px; /* 添加圆角 */
}



#gameBoard {
    display: grid;
    grid-template-columns: repeat(10,50px);
    grid-template-rows: repeat(5,50px);
    gap: 5px;
    margin: 20px auto;
    position: relative;
    width: 550px;
    height: 275px;
    background: rgba(255,255,255,.2);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,.3)
}

.cell {
    width: 50px;
    height: 50px;
    background-color: rgba(255,255,255,.7);
    border-radius: 5px
}

.player {
    width: 50px;
    height: 50px;
    position: absolute;
    transition: all .5s
}

#feedback {
    margin-top: 10px;
    font-size: 16px;
    text-shadow: 1px 1px 5px rgba(0,0,0,.3)
}

#feedback.correct {
    color: #4caf50
}

#feedback.incorrect {
    color: #ffc107
}

#startButton,#pauseButton,#homeButton,#submitAnswer {
    padding: 12px 25px;
    font-size: 18px;
    background: #ff9800;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin: 5px;
    box-shadow: 0 4px 6px rgba(0,0,0,.2);
    transition: all .3s ease
}

#startButton:hover,#pauseButton:hover,#homeButton:hover,#submitAnswer:hover {
    background: #e68900
}

#startButton:active,#pauseButton:active,#homeButton:active,#submitAnswer:active {
    background: #d97600;
    transform: scale(.98)
}

#startButton {
    display: block;
    margin: 20px auto
}

#questionContainer {
    margin-top: 20px;
    background: rgba(255,255,255,.2);
    padding: 20px;
    border-radius: 10px;
    display: inline-block;
    box-shadow: 0 4px 8px rgba(0,0,0,.3)
}

#question {
    font-size: 20px;
    margin-bottom: 10px
}

#answerInput {
    padding: 12px;
    font-size: 18px;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    width: 90%;
    max-width: 135px;
    box-sizing: border-box
}

#level {
    font-size: 22px;
    margin-top: 20px;
    text-shadow: 1px 1px 5px rgba(0,0,0,.3)
}

#gameOptions {
    margin-top: 20px;
    background: rgba(255, 255, 255, 0.3); /* 使背景透明度稍微加深 */
    padding: 30px 0; /* 增加内边距，让内容显得更加宽松 */
    border-radius: 15px; /* 调整圆角，使容器显得更柔和 */
    width: 80%;
    max-width: 800px;
    margin: 30px auto; /* 增加上下间距，提升页面整体视觉效果 */
    box-sizing: border-box;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* 增强阴影，显得更加立体 */
    border: 1px solid rgba(255, 255, 255, 0.2); /* 添加轻微的白色边框，增强对比 */
}

#gameOptions p {
    font-size: 20px; /* 适当增大字体，使其更清晰 */
    margin-bottom: 15px; /* 增加底部间距，确保排版美观 */
    text-align: center; /* 让文本居中，提高可读性 */
    color: #fff; /* 保持白色字体，与背景形成对比 */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4); /* 减弱阴影，让文本更精致 */
}


.options-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 600px;
    margin: 0 auto;
    gap: 20px; /* 增加按钮之间的间距 */
}

.options-container button {
    width: 45%; /* 控制按钮宽度，使其在两列中均匀分布 */
    padding: 15px 0; /* 增加按钮的内边距 */
    background: linear-gradient(135deg, #6fa3ef, #3b82d1); /* 使用较亮的渐变蓝色 */
    color: #fff;
    border: none;
    border-radius: 10px; /* 圆角，让按钮看起来更柔和 */
    cursor: pointer;
    font-size: 17px; /* 调整字体大小，确保可读性 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 减弱阴影，让按钮更轻盈 */
    transition: all 0.3s ease; /* 平滑的过渡效果 */
    text-align: center; /* 居中对齐文本 */
}

.options-container button:hover {
    background: linear-gradient(135deg, #5d92da, #2c71bb); /* 悬停时的渐变效果 */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* 悬停时稍微增强阴影 */
    transform: translateY(-3px); /* 悬停时轻微上升 */
}

.options-container button:active {
    background: #2c71bb; /* 点击时颜色变深 */
    transform: scale(0.98); /* 点击时轻微缩小 */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); /* 点击时阴影稍微减弱 */
}





#controlButtons {
    margin-top: 10px
}

#readAloudContainer {
    margin-top: 20px;
    background: rgba(255,255,255,.2);
    padding: 20px;
    border-radius: 10px;
    display: inline-block;
    box-shadow: 0 4px 8px rgba(0,0,0,.3);
    width: 80%;
    max-width: 600px;
    margin: 20px auto
}

#text-output {
    margin: 20px 0;
    padding: 15px;
    font-size: 24px;
    font-weight: 700;
    color: #00509e;
    border: 2px solid #00509e;
    border-radius: 8px;
    background-color: #e7f3ff
}

#result {
    margin-top: 20px;
    font-size: 20px;
    font-weight: 700
}

#score-feedback {
    margin-top: 10px;
    font-size: 18px;
    color: #555
}

#retry-btn {
    margin: 10px;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background-color: #28a745;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    outline: none;
    transition: background-color .3s;
    box-shadow: 0 4px 6px rgba(0,0,0,.2)
}

#retry-btn:hover {
    background-color: #218838
}

#retry-btn:active {
    background-color: #1e7e34
}

@media(max-width: 600px) {
    .options-container button {
        width:90%;
        margin: 10px 5%
    }

    #gameBoard {
        width: 90%;
        height: auto
    }

    .player {
        width: 40px;
        height: 40px
    }

    #text-output {
        font-size: 20px
    }

    #result {
        font-size: 18px
    }

    #score-feedback {
        font-size: 16px
    }
}

#start-reading-btn {
    background-color: #4caf50;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color .3s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,.1)
}

#start-reading-btn:hover {
    background-color: #45a049
}