Nihongo Challenge N3 -

.question-text background: #fef3da; padding: 1.2rem; border-radius: 2rem; font-size: 1.6rem; font-weight: 600; text-align: center; margin-bottom: 2rem; box-shadow: inset 0 1px 4px #ede0c2, 0 4px 8px rgba(0,0,0,0.05); word-break: break-word; color: #2c221b; line-height: 1.4;

const html = ` <div class="quiz-main"> <div class="question-text">$escapeHtml(q.text)</div> <div class="options-area" id="optionsArea"> $optionsHtml </div> <div class="feedback-area" id="feedbackMsg">$feedbackMsg</div> <button class="next-btn" id="nextButton" $nextDisabled>次��題 ➡</button> <button class="restart-btn" id="restartButton">🔄 �ャレンジをやり直�</button> </div> `;

dynamicContainer.innerHTML = html;

// ------------------- App State ------------------- let currentQuestions = []; // 実際�使用�る�題リスト (シャッフル済�) let currentIndex = 0; // �在��題番� (0�ら) let userScore = 0; // 正解数 let answerLocked = false; // 回答済���択��� let selectedOptionIndex = null; // �在��題��ん��択肢インデックス let currentQuestionObj = null;

.header h1 font-size: 2rem; letter-spacing: 2px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;