@keyframes glow {
    0% { border-color: #ff00de; box-shadow: 0 0 10px #ff00de; }
    25% { border-color: #00ff00; box-shadow: 0 0 10px #00ff00; }
    50% { border-color: #00ddff; box-shadow: 0 0 10px #00ddff; }
    75% { border-color: #ffff00; box-shadow: 0 0 10px #ffff00; }
    100% { border-color: #ff00de; box-shadow: 0 0 10px #ff00de; }
}

body {
    background-color: white; font-family: "Comic Sans MS", cursive, sans-serif; display: flex;
    justify-content: center; align-items: center; min-height: 100vh; margin: 0; padding: 20px 0;
}
.container { width: 1100px; text-align: center; }
.heading { font-size: 24px; font-weight: bold; color: #1a5d1a; margin-bottom: 10px; }
#gameCanvas {
    background-image: url('image/background.jpg'); background-size: cover; background-position: center;
    border: 4px solid #336699; width: 960px; height: 360px; cursor: pointer;
}
.bottom-frame { display: flex; justify-content: center; margin-top: 10px; }
.target-frame {
    width: 460px; height: 200px; background-color: white; display: flex; justify-content: center;
    align-items: center; margin-right: 15px; border: 5px solid; animation: glow 4s linear infinite;
}
.target-letter { font-size: 110px; font-weight: bold; color: #006600; transition: color 0.2s; }
.result-frame {
    width: 460px; height: 200px; background-color: #fff0b3; display: flex; flex-direction: column;
    justify-content: center; align-items: center; padding: 10px; margin-left: 15px;
    border: 5px solid; animation: glow 4s linear infinite;
}
.result-label { font-size: 24px; font-weight: bold; color: #b37400; text-align: center; margin-bottom: 10px; }
#score-display { font-size: 22px; font-weight: bold; color: #c92c00; }
.progress-container { width: 400px; height: 20px; background-color: #e0e0e0; border-radius: 10px; margin: 15px auto; overflow: hidden; }
.progress-bar { width: 0%; height: 100%; background-color: #4caf50; transition: width 0.5s; }

.game-controls { margin-top: 15px; }
.control-button {
    font-family: "Comic Sans MS", cursive, sans-serif; font-size: 18px; font-weight: bold;
    color: white; border: none; padding: 10px 25px; border-radius: 8px; cursor: pointer;
    margin: 0 10px; transition: transform 0.2s;
}
.control-button:hover { transform: scale(1.05); }
#stop-button { background-color: #ffc107; }
#main-restart-button { background-color: #28a745; }

.restart-button {
    font-family: "Comic Sans MS", cursive, sans-serif; font-size: 16px; font-weight: bold;
    background-color: #28a745; color: white; border: none; padding: 10px 20px;
    border-radius: 5px; cursor: pointer; display: none; margin-top: 10px;
}
.footer { font-size: 16px; font-style: italic; color: gray; margin-top: 10px; }