Nihongo Challenge N3 -

.score-box, .question-counter background: white; padding: 0.3rem 1rem; border-radius: 40px; box-shadow: inset 0 0 0 1px #ede3c8, 0 2px 4px rgba(0,0,0,0.02);

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

.next-btn:active transform: scale(0.97); .question-counter background: white

// すべてのオプションボタンを再レンダリング (状態反映) renderQuestionWithFeedback(selectedIdx, correctIdx, explanationText, isCorrect); padding: 0.3rem 1rem

// メイン: 問題をレンダリング＋フィードバック表示 (回答後も再利用) function renderQuestionWithFeedback(selectedIdx, correctIdx, explanation, isUserCorrect) const q = currentQuestionObj; if (!q) return;

// フィードバックメッセージ let feedbackMsg = ""; if (answerLocked) if (isUserCorrect) feedbackMsg = `✅ 正解！ $escapeHtml(explanation)`; else const correctAnswerText = q.options[correctIdx]; feedbackMsg = `❌ 不正解... 正解は「$escapeHtml(correctAnswerText)」です。 $escapeHtml(explanation)`; else feedbackMsg = "🤔 選択肢をクリックして答えましょう！";

.restart-btn background: #e6d5b3; color: #5e3a22; border: none; margin-top: 1rem; padding: 0.7rem; border-radius: 40px; font-weight: 600; width: 100%; cursor: pointer; font-family: inherit; transition: 0.1s;