/* shared/css/quiz-assessment.css */

/* --- クイズゲーム汎用スタイル --- */
.game-container {
  background-color: #ffffff;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 700px;
  margin: 20px auto;
  text-align: center;
  border-top: 5px solid var(--bws-green); /* from bellwood-theme.css */
}
.game-container .game-title {
  font-family: 'Press Start 2P', cursive;
  color: var(--brand-text-dark, #1e3a8a); /* Fallback to output.css blue-800 or similar */
  font-size: 20px;
  margin-bottom: 20px;
  line-height: 1.4;
}
@media (min-width: 768px) {
  /* md */
  .game-container .game-title {
    font-size: 22px;
  }
}
.game-container .game-title .bws-title-accent {
  color: var(--bws-gold); /* from bellwood-theme.css */
}

.story-text,
.character-dialog .story-text,
.question-text,
.option-button,
.explanation-text {
  font-family: 'Motoyama Bellri', 'Noto Sans JP', 'Inter', sans-serif; /* from bellwood-theme.css */
}

.character-dialog {
  background-color: var(--bws-lighter-green); /* from bellwood-theme.css */
  border-left: 5px solid var(--bws-green); /* from bellwood-theme.css */
  padding: 15px;
  margin-bottom: 25px;
  border-radius: 8px;
  text-align: left;
}
.character-name {
  font-weight: bold;
  color: var(--bws-green); /* from bellwood-theme.css */
  margin-bottom: 8px;
}
.question-text {
  font-size: 1.125rem; /* Tailwind: text-lg */
  font-weight: 600; /* Tailwind: font-semibold */
  color: var(--brand-text-dark, #1f2937); /* Fallback to output.css slate-800 or similar */
  margin-bottom: 20px;
  line-height: 1.6;
}
.options-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 25px;
}
.option-button {
  background-color: var(--brand-background-light, #f8fafc); /* Fallback to output.css slate-50 */
  color: var(--brand-text-dark, #1f2937);
  border: 2px solid #cbd5e1; /* output.css slate-300 */
  padding: 12px 18px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: left;
  font-size: 1rem; /* Tailwind: text-base */
}
.option-button:hover {
  background-color: #e9ecef; /* output.css gray-200 or slate-200 */
  border-color: #adb5bd; /* output.css gray-400 or slate-400 */
}
.option-button.selected {
  background-color: var(--brand-secondary-color); /* from bellwood-theme.css */
  color: white;
  border-color: var(--brand-primary-color); /* from bellwood-theme.css */
}
.option-button.correct {
  background-color: #d1fae5; /* output.css green-100 */
  color: #065f46; /* output.css green-800 */
  border-color: #a7f3d0; /* output.css green-200 */
}
.option-button.incorrect {
  background-color: #fee2e2; /* output.css red-100 */
  color: #991b1b; /* output.css red-800 */
  border-color: #fecaca; /* output.css red-200 */
}

.game-container .action-button {
  /* Overrides for quiz context if needed */
  font-family: 'Press Start 2P', cursive !important;
  background-color: var(--bws-green);
}
.game-container .action-button#submit-answer {
  background-color: var(--bws-green);
}
.game-container .action-button#submit-answer:hover {
  background-color: #004d33; /* Darker BWS Green */
}
.game-container .action-button#next-question,
.game-container .action-button#restart-quiz-button {
  background-color: var(--brand-secondary-color);
}
.game-container .action-button#next-question:hover,
.game-container .action-button#restart-quiz-button:hover {
  background-color: var(--brand-primary-color);
}

.result-message {
  padding: 15px;
  margin-top: 20px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
}
.result-message.correct {
  background-color: #d1fae5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}
.result-message.correct .bws-gold-star {
  color: var(--bws-gold);
  margin-left: 5px;
}
.result-message.incorrect {
  background-color: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}
.explanation-text {
  font-size: 0.875rem;
  color: var(--text-medium, #374151); /* Fallback to output.css slate-700 */
  margin-top: 10px;
  text-align: left;
  padding: 10px 12px;
  background-color: var(--brand-background-light, #f8fafc);
  border-radius: 6px;
  border: 1px solid var(--brand-border-color, #e2e8f0);
}
.score-text {
  font-size: 1.25rem;
  font-weight: bold;
  margin-top: 20px;
  color: var(--bws-green);
}
.score-text .bws-gold-score {
  color: var(--bws-gold);
  font-size: 1.5rem;
}
.progress-bar-container {
  width: 100%;
  background-color: #e9ecef;
  border-radius: 8px;
  margin-bottom: 20px;
  overflow: hidden;
  border: 1px solid #bdc3c7; /* output.css gray-400 or slate-400 */
}
.progress-bar {
  width: 0%; /* JS controls this */
  height: 20px;
  background-color: var(--bws-green);
  text-align: center;
  line-height: 20px;
  color: white;
  font-size: 12px;
  transition: width 0.5s ease;
}

.quiz-header-logo-motto {
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
}
.logo-placeholder {
  width: 150px;
  height: 75px;
  background-color: #e0e0e0; /* output.css gray-300 */
  border: 2px dashed var(--bws-green);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 10px auto;
  color: var(--bws-green);
  font-size: 14px;
  font-weight: bold;
  border-radius: 8px;
}
/* .motto-text from bellwood-theme.css */

/* --- アセスメントフォーム汎用スタイル --- */
/* <form> タグに class="assessment-form" を適用 */
/* <fieldset> タグに class="assessment-question-card" を適用 */
/* ラジオボタンのコンテナdivに class="radio-group" を適用 */

.assessment-form .assessment-question-card {
  /* 基本スタイルはHTML側のTailwindクラスや components.css の .section-card で定義 */
  /* 左ボーダーはHTML側で border-l-4 border-color-500 のように指定 */
}

.assessment-form legend.assessment-label {
  /* フォントは bellwood-theme.css の .font-kosugi-maru などでHTML側で指定 */
  /* 色はHTML側で <legend style="color: var(--color-indigo-500);"> のように指定 */
  /* または、.brand-green-text などのクラスをHTML側で適用 */
}

/* アセスメント ラジオボタンのカスタムスタイル (ボタン風UI) */
.assessment-form .radio-group input[type='radio'] {
  opacity: 0;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.assessment-form .radio-group label {
  font-family: 'Noto Sans JP', 'Inter', sans-serif; /* 基本フォント */
  padding: 0.5rem 1rem; /* ボタン風のパディング */
  border: 1px solid #d1d5db; /* output.css --color-slate-300 または --color-gray-300 */
  border-radius: 0.375rem; /* Tailwind: rounded-md */
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  background-color: #f9fafb; /* output.css --color-slate-50 または --color-gray-50 */
  color: #374151; /* output.css --color-slate-700 または --color-gray-700 */
  display: inline-block; /* レイアウトのため */
  margin: 0.25rem; /* ラベル間のマージン */
  min-width: 40px; /* 数字だけの場合の最小幅 */
  text-align: center; /* 数字を中央揃え */
}

.assessment-form .radio-group label:hover {
  background-color: #e5e7eb; /* output.css --color-slate-200 または --color-gray-200 */
  border-color: #9ca3af; /* output.css --color-slate-400 または --color-gray-400 */
}

.assessment-form .radio-group input[type='radio']:checked + label {
  /* chapter2 (cookbook_chapter2) の青系UIを基準とする */
  background-color: var(--brand-secondary-color, #0066cc); /* from bellwood-theme.css or fallback */
  color: white;
  border-color: var(--brand-primary-color, #004a8d); /* from bellwood-theme.css or fallback */
  /* box-shadow: 0 0 0 2px color-mix(in oklab, var(--brand-secondary-color, #0066cc) 40%, transparent); /* Optional shadow */
}

.assessment-form .radio-group input[type='radio']:focus + label {
  /* :focus-visibleが望ましい */
  border-color: var(--brand-secondary-color, #0066cc);
  /* box-shadow: 0 0 0 2px color-mix(in oklab, var(--brand-secondary-color, #0066cc) 40%, transparent); /* Optional shadow */
}

/* アセスメントチャートコンテナ */
#assessment-charts-container {
  margin-top: 2rem;
  padding: 1.5rem;
  background-color: var(--brand-background-light, #f9fafb); /* output.css slate-50 or gray-50 */
  border-radius: 0.5rem; /* Tailwind: rounded-lg */
  border: 1px solid var(--brand-border-color, #e5e7eb); /* output.css slate-200 or gray-200 */
}
#assessment-charts-container .chart-title {
  /* または汎用クラス .chart-title を使用 */
  font-family: 'Fredoka One', 'Fredoka', cursive; /* from bellwood-theme.css */
  color: var(--bws-green); /* from bellwood-theme.css */
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 1.5rem; /* Tailwind: text-2xl */
}