body {
    font-family: 'Arial', sans-serif;
    background-color: #fce4ec; /* 楽しいピンク系の背景 */
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    text-align: center;
}

/* ⭐ 修正箇所: コンテナの幅とパディングを調整し、はみ出しを解消 */
.container {
    background-color: #fff;
    padding: 30px; /* パディングを少し減らす */
    border-radius: 20px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    width: 90%; /* 幅を広げ、レスポンシブに対応 */
    max-width: 550px; /* 最大幅を少し狭くして余裕を持たせる */
}

header h1 {
    color: #e91e63; /* マゼンタ */
    font-size: 2.5em;
    margin-bottom: 30px;
    border-bottom: 3px solid #f06292;
    padding-bottom: 10px;
}

#quiz-info h2 {
    font-size: 1.8em;
    color: #880e4f;
    margin-bottom: 30px;
}

#button-group {
    display: flex;
    justify-content: space-around;
    gap: 10px;
    margin-bottom: 25px;
}

.play-button, .control-button {
    color: white;
    padding: 15px 10px;
    font-size: 1.1em;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s;
    box-shadow: 0 4px rgba(0, 0, 0, 0.2);
    width: 30%; /* 3つ並べるため */
}

/* 再生ボタンのスタイル */
#play10Button { background-color: #2196f3; } /* 青 */
#play10Button:active { background-color: #1565c0; }

#play18Button { background-color: #4caf50; } /* 緑 */
#play18Button:active { background-color: #2e7d32; }

#playFullButton { background-color: #ff9800; } /* オレンジ */
#playFullButton:active { background-color: #f57c00; }


/* 答え合わせ/次の曲ボタンのスタイル */
#checkAnswerButton, #nextTrackButton {
    background-color: #e91e63; /* マゼンタ */
    padding: 15px 30px;
    font-size: 1.5em;
    width: 95%; /* 広く使う */
    margin-top: 10px;
    box-shadow: 0 5px #c2185b;
}
#checkAnswerButton:active, #nextTrackButton:active {
    background-color: #ad1457;
    box-shadow: 0 2px #c2185b;
    transform: translateY(3px);
}

/* ボタンが押せない状態のデザイン */
.play-button:disabled, .control-button:disabled {
    background-color: #bdbdbd !important;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* --- メッセージ/表示エリア --- */
#message-area p {
    margin-top: 25px;
    font-size: 1.2em;
    color: #880e4f;
    font-weight: bold;
}

hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
    margin: 20px 0;
}

/* --- 画面切り替え用 --- */
.hidden {
    display: none !important;
}

/* --- 答え合わせ画面のスタイル --- */
#answer-view {
    padding: 10px; /* ⭐ 修正箇所: パディングを減らす */
}

#answer-view header h1 {
    color: #4caf50; /* 緑色で正解を目立たせる */
    border-bottom: 3px solid #81c784;
}

#answer-details {
    margin: 20px 0; /* ⭐ 修正箇所: マージンを減らす */
    padding: 15px; /* ⭐ 修正箇所: パディングを減らす */
    background-color: #f1f8e9; /* 薄い緑の背景 */
    border-radius: 10px;
    border: 1px solid #c8e6c9;
}

.answer-label {
    font-size: 1.1em;
    color: #555;
    margin-top: 15px;
    margin-bottom: 3px;
}

/* ⭐ 修正箇所: 曲名/歌手名のフォントサイズを調整 */
#answer-song, #answer-artist {
    font-size: 2.0em; /* 2.2em から 2.0em へ縮小 */
    color: #333;
    margin: 0;
    word-wrap: break-word; /* 長いテキストがはみ出さないように */
}