/*
 * styles-editorial.css
 * デザインコンセプト: Editorial × Terminal ハイブリッド
 *
 * A (Editorial): セリフ見出し・罫線・生成り背景・余白
 * C (Terminal):  モノスペース数値・// プレフィックス・コード的記法
 */

/* ============================================================
   0. フォント変数 & カラーパレット上書き
   ============================================================ */
:root {
  --ed-bg:          #F5F2EC;   /* 生成り */
  --ed-surface:     #EDE9E1;   /* やや暗いサーフェス */
  --ed-text:        #1C1814;   /* 墨色 */
  --ed-subtext:     #5C564E;   /* 中間グレー */
  --ed-rule:        #C8C2B8;   /* 罫線色 */
  --ed-red:         #8C1C13;   /* 深紅（アクセント） */
  --ed-amber:       #A85400;   /* 琥珀（C由来） */
  --ed-correct:     #1E4D35;   /* 正解の深緑 */
  --ed-mono:        'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;
  --ed-serif:       'Noto Serif JP', 'Georgia', 'Yu Mincho', '游明朝', serif;
  --ed-sans:        'Inter', system-ui, -apple-system, sans-serif;

  /* 既存変数を上書き */
  --primary-color:  #8C1C13;
  --bg-primary:     #F5F2EC;
  --bg-secondary:   #EDE9E1;
  --text-primary:   #1C1814;
  --text-secondary: #5C564E;
  --border-color:   #C8C2B8;
}

/* ダークモード */
[data-theme="dark"],
.dark-mode {
  --ed-bg:      #111009;
  --ed-surface: #1B1915;
  --ed-text:    #E8E4DC;
  --ed-subtext: #928B80;
  --ed-rule:    #3A3630;
  --ed-red:     #C43028;
  --ed-amber:   #D07020;
  --ed-correct: #2E7D52;

  --bg-primary:   #111009;
  --bg-secondary: #1B1915;
  --text-primary: #E8E4DC;
  --border-color: #3A3630;
}

/* ============================================================
   1. ベース — パーティクルとデコ的な背景を除去
   ============================================================ */
body {
  background: var(--ed-bg);
  color: var(--ed-text);
  font-family: var(--ed-sans);
  -webkit-font-smoothing: antialiased;
}

/* パーティクル無効化 */
.particles { display: none !important; }

/* ============================================================
   2. ローディング — ターミナルブート風
   ============================================================ */
.loading-screen {
  background: #111009;
  font-family: var(--ed-mono);
}

.loading-logo { display: none; }

.loading-text {
  font-family: var(--ed-mono);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--ed-amber);
  margin-bottom: 1.5rem;
}
.loading-text::before { content: '> '; color: var(--ed-rule); }

.loading-bar {
  width: min(400px, 80vw);
  height: 2px;
  background: #2A2720;
  border-radius: 0;
  border: none;
}
.loading-progress {
  background: var(--ed-amber);
  height: 100%;
  border-radius: 0;
}

.loading-subtitle {
  font-family: var(--ed-mono);
  font-size: 0.78rem;
  color: #5C564E;
  letter-spacing: 0.08em;
}

/* ============================================================
   3. ヒーローヘッダー — Editorial 軸
   ============================================================ */
.hero-header {
  background: var(--ed-bg);
  border-bottom: 1px solid var(--ed-rule);
  box-shadow: none;
  padding: 3rem 2rem 2.5rem;
}

/* バッジ（絵文字アイコン）を非表示 */
.hero-badge { display: none; }

/* タイトル */
.hero-title {
  text-align: left;
  margin: 0 0 0.75rem;
}

.title-main {
  display: block;
  font-family: var(--ed-serif);
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ed-text);
  background: none;
  -webkit-text-fill-color: initial;
}

.title-accent {
  display: block;
  font-family: var(--ed-mono);
  font-size: clamp(0.7rem, 1.5vw, 0.85rem);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ed-subtext);
  margin-top: 0.5rem;
}
.title-accent::before { content: '// '; color: var(--ed-rule); }

/* サブタイトル */
.hero-subtitle {
  font-family: var(--ed-mono);
  font-size: 0.82rem;
  color: var(--ed-subtext);
  letter-spacing: 0.06em;
  margin: 0 0 2rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--ed-rule);
  border-bottom: 1px solid var(--ed-rule);
}
.hero-subtitle::before { content: '$ '; color: var(--ed-amber); }
.subtitle-emoji { display: none; }

/* ============================================================
   4. 統計エリア — モノスペース数値
   ============================================================ */
.hero-stats {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  margin: 0 0 2.5rem;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}

.stat-item {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  border-right: 1px solid var(--ed-rule);
  padding-right: 2.5rem;
}
.stat-item:last-child {
  border-right: none;
  padding-right: 0;
}

.stat-icon { display: none; }

.stat-number {
  font-family: var(--ed-mono);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  color: var(--ed-text);
  line-height: 1;
  letter-spacing: -0.02em;
  background: none;
  -webkit-text-fill-color: initial;
}

.stat-label {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ed-subtext);
  font-family: var(--ed-sans);
}

/* ============================================================
   5. クイックアクション — ボーダーなし角丸ゼロ
   ============================================================ */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--ed-rule);
  margin: 0 0 2rem;
}

.quick-btn {
  background: none;
  border: none;
  border-right: 1px solid var(--ed-rule);
  border-radius: 0;
  box-shadow: none;
  padding: 1.2rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
  color: var(--ed-text);
}
.quick-btn:last-child { border-right: none; }
.quick-btn:nth-child(3) { border-right: none; }
.quick-btn:nth-child(n+4) { border-top: 1px solid var(--ed-rule); }

.quick-btn:hover {
  background: var(--ed-surface);
}

.quick-btn-icon {
  font-size: 1rem;
  width: 1.4rem;
  flex-shrink: 0;
}

.quick-btn-text strong {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: var(--ed-sans);
  color: var(--ed-text);
}
.quick-btn-text small {
  font-size: 0.7rem;
  color: var(--ed-subtext);
  font-family: var(--ed-mono);
}

/* 共通テストボタン: 末尾2カラム幅 */
.quick-btn-kyotsu {
  grid-column: span 2;
  border-right: none;
  border-top: 1px solid var(--ed-rule);
}
.quick-btn-kyotsu .quick-btn-text strong {
  color: var(--ed-red);
}

/* ============================================================
   6. 共通テストバナー
   ============================================================ */
.kyotsu-banner {
  border: 1px solid var(--ed-red);
  border-radius: 0;
  background: none;
  box-shadow: none;
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
}

.kyotsu-badge {
  font-family: var(--ed-mono);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  background: var(--ed-red);
  color: #FAF7F2;
  padding: 0.2em 0.5em;
  border-radius: 0;
}

.kyotsu-start-btn {
  font-family: var(--ed-mono);
  font-size: 0.8rem;
  background: none;
  color: var(--ed-red);
  border: 1px solid var(--ed-red);
  border-radius: 0;
  padding: 0.45rem 1rem;
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: background 0.15s, color 0.15s;
}
.kyotsu-start-btn:hover {
  background: var(--ed-red);
  color: #FAF7F2;
}

/* ============================================================
   7. セットアップ画面 — カードを廃止、罫線で区切る
   ============================================================ */
#setup-screen {
  background: var(--ed-bg);
}

.setup-container {
  max-width: 820px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
}

.setup-header h2 {
  font-family: var(--ed-serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ed-text);
  border-bottom: 2px solid var(--ed-text);
  padding-bottom: 0.6rem;
  margin-bottom: 0.4rem;
}
.setup-header h2::first-letter { color: var(--ed-red); }
.setup-description {
  font-family: var(--ed-mono);
  font-size: 0.77rem;
  color: var(--ed-subtext);
  letter-spacing: 0.05em;
}
.setup-description::before { content: '// '; }

.setup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 2rem 0;
  border: 1px solid var(--ed-rule);
}

/* 分野選択は全幅（上段） */
.setup-card.category-card {
  grid-column: 1 / -1;
  border-bottom: 1px solid var(--ed-rule);
}

/* 難易度と問題数は横並び（下段） */
.setup-card.difficulty-card {
  border-right: 1px solid var(--ed-rule);
}

.setup-card.count-card {
  /* 右端 — border不要 */
}

.setup-card {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 1.5rem;
}

@media (max-width: 540px) {
  .setup-grid {
    grid-template-columns: 1fr;
  }
  .setup-card.category-card {
    grid-column: auto;
  }
  .setup-card.difficulty-card {
    border-right: none;
    border-bottom: 1px solid var(--ed-rule);
  }
}

.card-header h3 {
  font-family: var(--ed-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ed-subtext);
  margin: 0 0 0.3rem;
}
.card-header p {
  font-size: 0.78rem;
  color: var(--ed-subtext);
  margin: 0 0 1rem;
}

/* カテゴリチェックボックス */
.category-option {
  border: 1px solid var(--ed-rule);
  border-radius: 0;
  box-shadow: none;
  background: none;
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
  transition: background 0.12s, border-color 0.12s;
}
.category-option:hover {
  background: var(--ed-surface);
  border-color: var(--ed-text);
}
.category-option.selected,
.category-option input:checked ~ .category-name {
  background: var(--ed-text);
  color: var(--ed-bg);
}
.category-option.selected {
  background: var(--ed-text);
  color: var(--ed-bg);
  border-color: var(--ed-text);
}

/* ラジオ選択肢（難易度） */
.radio-option {
  border: none;
  border-bottom: 1px solid var(--ed-rule);
  border-radius: 0;
  box-shadow: none;
  padding: 0.85rem 0.5rem;
  background: none;
}
.radio-option:last-child { border-bottom: none; }
.radio-option:hover { background: var(--ed-surface); }
.radio-option input:checked + .option-content .option-title {
  color: var(--ed-red);
}
.option-icon { display: none; }

/* 問題数セレクトボックス */
.count-select {
  border: 1px solid var(--ed-rule);
  border-radius: 0;
  background: var(--ed-bg);
  font-family: var(--ed-mono);
  font-size: 0.88rem;
  color: var(--ed-text);
  padding: 0.5rem 0.75rem;
  width: 100%;
  appearance: none;
  cursor: pointer;
}
.count-select:focus {
  outline: 2px solid var(--ed-text);
  outline-offset: 0;
}

/* モード選択 */
.mode-title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ed-subtext);
  margin: 0 0 0.75rem;
}

.mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0;
  border: 1px solid var(--ed-rule);
}

.mode-card {
  border: none;
  border-right: 1px solid var(--ed-rule);
  border-radius: 0;
  box-shadow: none;
  background: none;
  padding: 1rem 0.75rem;
  cursor: pointer;
  transition: background 0.12s;
}
.mode-card:last-child { border-right: none; }
.mode-card:hover { background: var(--ed-surface); }

.mode-icon { font-size: 1.1rem; margin-bottom: 0.3rem; }
.mode-name { font-size: 0.78rem; font-weight: 600; }
.mode-desc { font-size: 0.68rem; color: var(--ed-subtext); font-family: var(--ed-mono); }

.mode-card input:checked ~ .mode-content .mode-name {
  color: var(--ed-red);
}
.mode-card-kyotsu input:checked ~ .mode-content .mode-name {
  color: var(--ed-red);
}

/* スタートボタン */
.start-section {
  margin-top: 2rem;
  display: flex;
  justify-content: flex-start;
}

.btn-primary.start-btn {
  background: var(--ed-text);
  color: var(--ed-bg);
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--ed-mono);
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  padding: 0.9rem 2.5rem;
  cursor: pointer;
  transition: background 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  position: relative;
  overflow: hidden;
}
.btn-primary.start-btn:hover {
  background: var(--ed-red);
}
.btn-primary.start-btn .btn-icon { display: none; }
.btn-primary.start-btn .btn-text::before { content: '$ run '; color: var(--ed-rule); }
.btn-shine { display: none !important; }

/* ============================================================
   8. クイズ画面 — Editorial Question Layout
   ============================================================ */
#quiz-screen {
  background: var(--ed-bg);
}

.quiz-container {
  max-width: 820px;
  margin: 0 auto;
  padding: 1.5rem;
}

/* プログレス */
.quiz-header {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--ed-rule);
  padding-bottom: 0.75rem;
}

.progress-info {
  font-family: var(--ed-mono);
  font-size: 0.78rem;
  color: var(--ed-subtext);
  letter-spacing: 0.06em;
  display: flex;
  gap: 1.5rem;
  margin-bottom: 0.5rem;
}

.progress-bar {
  height: 2px;
  background: var(--ed-rule);
  border-radius: 0;
}
.progress-fill {
  background: var(--ed-text);
  border-radius: 0;
  height: 100%;
  transition: width 0.4s ease;
}
.progress-glow { display: none; }

/* 問題カード — カードを捨てて罫線のみ */
.question-card {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0;
  border-top: 2px solid var(--ed-text) !important;
}

.question-header {
  padding: 1rem 0 0.75rem;
  border-bottom: 1px solid var(--ed-rule);
  margin-bottom: 1.75rem;
}

.question-metadata {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.question-category,
.question-difficulty {
  font-family: var(--ed-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--ed-subtext);
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
}
.question-category::before { content: '// '; color: var(--ed-rule); }
.category-icon, .difficulty-icon { display: none; }

/* 問題文 */
.question-content {
  position: relative;
  margin-bottom: 2rem;
}

.question-actions {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  gap: 0.25rem;
}
.action-btn {
  background: none;
  border: 1px solid var(--ed-rule);
  border-radius: 0;
  padding: 0.25rem 0.4rem;
  font-size: 0.8rem;
  cursor: pointer;
  color: var(--ed-subtext);
  transition: border-color 0.12s;
}
.action-btn:hover { border-color: var(--ed-text); color: var(--ed-text); }

.question-title {
  font-family: var(--ed-serif);
  font-size: clamp(1.05rem, 2.5vw, 1.3rem);
  font-weight: 500;
  line-height: 1.75;
  color: var(--ed-text);
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

/* コードブロック（疑似言語） */
.question-title pre.q-code {
  background: var(--ed-surface);
  border: none;
  border-left: 3px solid var(--ed-amber);
  border-radius: 0;
  font-size: 0.84rem;
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
}
.question-title pre.q-code code {
  color: var(--ed-text);
}

/* ============================================================
   9. 選択肢 — 罫線リスト、角丸ゼロ
   ============================================================ */
.options {
  gap: 0;
  margin-bottom: 2rem;
  border: 1px solid var(--ed-rule);
}

.option {
  border: none;
  border-bottom: 1px solid var(--ed-rule);
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 1rem 1.25rem;
  gap: 1rem;
  background: none;
  transition: background 0.1s;
  cursor: pointer;
}
.option:last-child { border-bottom: none; }
.option:hover { background: var(--ed-surface); }

.option-letter {
  font-family: var(--ed-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ed-subtext);
  background: none;
  border: none;
  border-radius: 0;
  width: 1.5rem;
  min-width: 1.5rem;
  padding: 0;
  display: flex;
  align-items: center;
}
.option-letter::before { content: '['; }
.option-letter::after  { content: ']'; }

.option-text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ed-text);
}

/* コード選択肢 */
.option-code-text {
  font-family: var(--ed-mono);
  font-size: 0.83rem;
  background: var(--ed-surface);
  border: 1px solid var(--ed-rule);
  border-radius: 0;
  padding: 0.25em 0.5em;
  color: var(--ed-text);
}

/* 正解・不正解状態 */
.option.correct {
  background: color-mix(in srgb, var(--ed-correct) 12%, transparent);
  border-color: var(--ed-correct);
  border-bottom-color: var(--ed-correct);
}
.option.correct .option-letter { color: var(--ed-correct); }

.option.incorrect {
  background: color-mix(in srgb, var(--ed-red) 10%, transparent);
}
.option.incorrect .option-letter { color: var(--ed-red); }

/* ============================================================
   10. クイズコントロールボタン
   ============================================================ */
.quiz-controls {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.btn-primary.quiz-btn {
  background: var(--ed-text);
  color: var(--ed-bg);
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--ed-mono);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  padding: 0.75rem 1.75rem;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-primary.quiz-btn:hover:not(:disabled) { background: var(--ed-red); }
.btn-primary.quiz-btn:disabled {
  background: var(--ed-rule);
  color: var(--ed-subtext);
}
.btn-primary.quiz-btn .btn-icon { display: none; }

.btn-secondary.quiz-btn {
  background: none;
  color: var(--ed-subtext);
  border: 1px solid var(--ed-rule);
  border-radius: 0;
  box-shadow: none;
  font-family: var(--ed-mono);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.btn-secondary.quiz-btn:hover { border-color: var(--ed-text); color: var(--ed-text); }
.btn-secondary.quiz-btn .btn-icon { display: none; }

/* ============================================================
   11. 解説エリア
   ============================================================ */
.explanation {
  background: none;
  border: none;
  border-radius: 0;
  border-top: 1px solid var(--ed-rule);
  border-left: 3px solid var(--ed-amber);
  padding: 1.25rem 1.25rem 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: none;
}

.explanation-header {
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 0.5rem;
}
.explanation-header::before { display: none; }
.explanation-header h4 {
  font-family: var(--ed-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ed-amber);
  font-weight: 600;
}

.explanation-content p {
  font-size: 0.88rem;
  line-height: 1.8;
  color: var(--ed-text);
}

/* ============================================================
   12. 結果画面
   ============================================================ */
#result-screen {
  background: var(--ed-bg);
}

.result-container { max-width: 820px; margin: 0 auto; padding: 2rem 1.5rem; }

.result-card {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  border-top: 2px solid var(--ed-text);
  padding-top: 2rem;
}

.result-header h2 {
  font-family: var(--ed-serif);
  font-size: 2rem;
  font-weight: 700;
  color: var(--ed-text);
  border: none;
}
.result-subtitle {
  font-family: var(--ed-mono);
  font-size: 0.78rem;
  color: var(--ed-subtext);
  letter-spacing: 0.06em;
}
.result-subtitle::before { content: '// '; color: var(--ed-rule); }

/* スコア表示 */
.score-display {
  margin: 2rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid var(--ed-rule);
  padding-bottom: 1.5rem;
}
.score-circle { width: 110px; height: 110px; }

.score-svg circle.score-bg { stroke: var(--ed-rule); fill: none; stroke-width: 4; }
.score-svg circle.score-progress { stroke: var(--ed-text); fill: none; stroke-width: 4; }

/* グラデーション参照を上書き */
.score-svg circle.score-progress[stroke="url(#scoreGradient)"] { stroke: var(--ed-text) !important; }

.score-value {
  font-family: var(--ed-mono);
  font-size: 2rem;
  font-weight: 700;
  color: var(--ed-text);
}
.score-total {
  font-family: var(--ed-mono);
  font-size: 0.8rem;
  color: var(--ed-subtext);
}
.score-percentage {
  font-family: var(--ed-mono);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ed-text);
  letter-spacing: 0.05em;
}

/* 結果グリッド */
.result-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--ed-rule);
  margin: 1.5rem 0;
}
.result-item {
  background: none;
  border: none;
  border-right: 1px solid var(--ed-rule);
  border-bottom: 1px solid var(--ed-rule);
  border-radius: 0;
  box-shadow: none;
  padding: 1rem 1.25rem;
  display: block;
}
.result-item:nth-child(2n) { border-right: none; }
.result-item:nth-child(n+3) { border-bottom: none; }
.result-icon { display: none; }
.result-label {
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ed-subtext);
  display: block;
  margin-bottom: 0.25rem;
}
.result-value {
  font-family: var(--ed-mono);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ed-text);
}

/* カテゴリ別正解率 */
.category-breakdown {
  margin: 1.5rem 0;
  border-top: 1px solid var(--ed-rule);
  padding-top: 1.25rem;
}
.breakdown-title {
  font-family: var(--ed-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ed-subtext);
  margin: 0 0 0.75rem;
}
.breakdown-title::before { content: '// '; color: var(--ed-rule); }

.breakdown-list { display: flex; flex-direction: column; gap: 0; }
.breakdown-item {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--ed-rule);
  background: none !important;
  box-shadow: none !important;
}
.breakdown-item:last-child { border-bottom: none; }

.breakdown-category {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
}
.category-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: var(--ed-subtext) !important; /* override */
}
.category-name-text {
  font-size: 0.82rem;
  color: var(--ed-text);
}

.breakdown-stats {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.breakdown-accuracy {
  font-family: var(--ed-mono);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ed-text) !important; /* override inline color */
}
.breakdown-count {
  font-family: var(--ed-mono);
  font-size: 0.75rem;
  color: var(--ed-subtext);
}

.breakdown-bar {
  height: 3px;
  background: var(--ed-rule);
  position: relative;
  border-radius: 0;
}
.breakdown-fill {
  height: 100%;
  background: var(--ed-text) !important; /* override inline color */
  border-radius: 0;
  transition: width 0.4s ease;
}

/* 学習統計 */
.learning-stats {
  margin: 1.5rem 0;
  border-top: 1px solid var(--ed-rule);
  padding-top: 1.25rem;
}
.stats-title {
  font-family: var(--ed-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ed-subtext);
  margin: 0 0 0.75rem;
}
.stats-title::before { content: '// '; color: var(--ed-rule); }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--ed-rule);
}
.stat-box {
  padding: 0.75rem 1rem;
  border-right: 1px solid var(--ed-rule);
  border-bottom: 1px solid var(--ed-rule);
  background: none;
  box-shadow: none;
  border-radius: 0;
}
.stat-box:nth-child(2n) { border-right: none; }
.stat-box:nth-child(n+3) { border-bottom: none; }
.stat-label {
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ed-subtext);
  display: block;
  margin-bottom: 0.2rem;
}
.stat-value {
  font-family: var(--ed-mono);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ed-text);
}

/* 結果メッセージ */
.result-message {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--ed-text);
  font-family: var(--ed-serif);
  font-size: 0.95rem;
  color: var(--ed-text);
  background: none;
  border-radius: 0;
  box-shadow: none !important;
}
.result-message:empty { display: none; }
.result-message.excellent { border-left-color: var(--ed-text); }
.result-message.good      { border-left-color: var(--ed-amber); }
.result-message.average   { border-left-color: var(--ed-rule); }
.result-message.poor      { border-left-color: var(--ed-red); }

/* 結果ボタン */
.result-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2rem;
}

.btn-primary.result-btn {
  background: var(--ed-text);
  color: var(--ed-bg);
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--ed-mono);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  padding: 0.7rem 1.5rem;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-primary.result-btn:hover { background: var(--ed-red); }
.btn-primary.result-btn .btn-icon { display: none; }

.btn-secondary.result-btn {
  background: none;
  color: var(--ed-subtext);
  border: 1px solid var(--ed-rule);
  border-radius: 0;
  box-shadow: none;
  font-family: var(--ed-mono);
  font-size: 0.8rem;
  padding: 0.7rem 1.25rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.btn-secondary.result-btn:hover { border-color: var(--ed-text); color: var(--ed-text); }
.btn-secondary.result-btn .btn-icon { display: none; }

/* タッチターゲット最小サイズ保証（iOS/Android 44px推奨） */
.quick-btn,
.btn-primary.start-btn,
.btn-primary.quiz-btn,
.btn-secondary.quiz-btn,
.btn-primary.result-btn,
.btn-secondary.result-btn,
.kyotsu-start-btn,
.icon-btn,
.action-btn,
.option {
  min-height: 44px;
}

/* ============================================================
   13. ヘッダーコントロール
   ============================================================ */
.header-controls {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* ============================================================
   13b. ホバー / 選択状態の色統一（紫・緑グラデーションを除去）
   ============================================================ */

/* ---- setup-card（カテゴリ・難易度・問題数の外枠カード） ---- */
.setup-card::before { display: none !important; }

.setup-card:hover {
  border-color: var(--ed-rule) !important;
  background: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ---- mode-selection（モード選択の白い大枠） ---- */
.mode-selection {
  background: none !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 2rem 0 !important;
  border: none !important;
}

/* ---- mode-content（各モードカードの内側） ---- */
.mode-content {
  background: none !important;
  border-color: var(--ed-rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
[data-theme="dark"] .mode-content {
  background: none !important;
  border-color: var(--ed-rule) !important;
}

.mode-card:hover .mode-content {
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--ed-text) !important;
  background: var(--ed-surface) !important;
}

.mode-card input[type="radio"]:checked + .mode-content {
  border-color: var(--ed-text) !important;
  background: var(--ed-text) !important;
  box-shadow: none !important;
}
.mode-card input[type="radio"]:checked + .mode-content .mode-name,
.mode-card input[type="radio"]:checked + .mode-content .mode-desc {
  color: var(--ed-bg) !important;
}
[data-theme="dark"] .mode-card input[type="radio"]:checked + .mode-content {
  background: var(--ed-text) !important;
}
.mode-card input[type="radio"]:focus-visible + .mode-content {
  outline-color: var(--ed-text) !important;
}

/* カテゴリ選択 — ホバー & 選択済み */
.category-option::before,
.category-option:hover::before { display: none !important; }

.category-option:hover {
  border-color: var(--ed-text) !important;
  background: var(--ed-surface) !important;
  box-shadow: none !important;
  transform: none !important;
}

.category-option.selected {
  border-color: var(--ed-text) !important;
  background: var(--ed-text) !important;
  box-shadow: none !important;
}
.category-option.selected .category-name { color: var(--ed-bg) !important; }
.category-option.selected .category-count { color: var(--ed-rule) !important; }

/* チェックボックス & ラジオのアクセントカラー */
.category-option input[type="checkbox"],
.radio-option input[type="radio"],
.mode-card input[type="radio"] {
  accent-color: var(--ed-text) !important;
}

/* 難易度ラジオ — ホバー & 選択済み */
.radio-option::before,
.radio-option:hover::before,
.radio-option:has(input:checked)::before { display: none !important; }

.radio-option:hover {
  border-color: var(--ed-text) !important;
  background: var(--ed-surface) !important;
  box-shadow: none !important;
  transform: none !important;
}

.radio-option:has(input:checked) {
  border-color: var(--ed-text) !important;
  background: none !important;
  box-shadow: none !important;
}

/* ============================================================
   13c. グラデーション / アニメーション除去
   ============================================================ */

/* スクロールバー */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--ed-surface); border-radius: 0; }
::-webkit-scrollbar-thumb {
  background: var(--ed-rule);
  border-radius: 0;
  transition: background 0.15s;
}
::-webkit-scrollbar-thumb:hover { background: var(--ed-subtext); }

/* テキスト選択 */
::selection {
  background: color-mix(in srgb, var(--ed-red) 20%, transparent);
  color: var(--ed-text);
}

/* 画面上部の rainbow ライン除去 */
.screen::before { display: none !important; }

/* プログレスバー（クイズ進捗） */
.progress-fill {
  background: var(--ed-text) !important;
  background-size: unset !important;
  animation: none !important;
  box-shadow: none !important;
}
.progress-fill::before,
.progress-fill::after { display: none !important; }
.progress-glow { display: none !important; }

/* ローディングバー */
.loading-progress {
  background: var(--ed-rule) !important;
  animation: loading 2s ease-in-out infinite;
}

/* XPバー（レベルアップ表示） */
.xp-progress {
  background: var(--ed-subtext) !important;
}
.xp-progress::after { display: none !important; }

/* スコアリング SVG サークル */
.score-svg circle.score-progress {
  stroke: var(--ed-text) !important;
}

/* 正解・不正解 オプション選択後の強調色 */
.option.correct { background: color-mix(in srgb, var(--ed-correct) 10%, transparent) !important; }
.option.incorrect { background: color-mix(in srgb, var(--ed-red) 8%, transparent) !important; }

.icon-btn {
  background: none;
  border: 1px solid var(--ed-rule);
  border-radius: 0;
  box-shadow: none;
  padding: 0.3rem 0.5rem;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.12s;
  color: var(--ed-subtext);
}
.icon-btn:hover { border-color: var(--ed-text); }

/* ============================================================
   14a. スタートボタン — editorial カラーを ID 指定で強制上書き
   ============================================================ */
#start-quiz {
  background: var(--ed-text) !important;
  color: var(--ed-bg) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  animation: none !important;
  font-family: var(--ed-mono) !important;
  font-size: 0.88rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em !important;
  border: none !important;
  padding: 0.9rem 2.5rem !important;
  width: auto !important;
  margin-top: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
}
#start-quiz:hover {
  background: var(--ed-red) !important;
  transform: none !important;
  box-shadow: none !important;
}
#start-quiz:disabled {
  background: var(--ed-rule) !important;
  color: var(--ed-subtext) !important;
}
#start-quiz::before, #start-quiz::after { display: none !important; }

/* ============================================================
   14b. quiz-active — ヒーローヘッダー & 操作ボタンを非表示
   ============================================================ */
body.quiz-active .hero-header {
  display: none !important;
}

/* ============================================================
   14. レスポンシブ
   ============================================================ */

/* ---- 768px以下: タブレット ---- */
@media (max-width: 768px) {
  /* ヘッダーの余白を縮小 */
  .hero-header { padding: 2rem 1.25rem 1.75rem; }

  /* 統計は2×2グリッド */
  .hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid var(--ed-rule);
    margin: 0 0 1.75rem;
  }
  .stat-item {
    border-right: 1px solid var(--ed-rule);
    border-bottom: 1px solid var(--ed-rule);
    padding: 1rem 1.25rem;
    padding-right: 0;
  }
  .stat-item:nth-child(2n) { border-right: none; }
  .stat-item:nth-child(n+3) { border-bottom: none; }

  /* クイックアクション: 2列 */
  .quick-actions { grid-template-columns: repeat(2, 1fr); }
  .quick-btn:nth-child(2n) { border-right: none; }
  .quick-btn:nth-child(3) { border-right: 1px solid var(--ed-rule); }
  .quick-btn-kyotsu { grid-column: span 2; border-right: none; }

  /* 共通テストバナーを縦積み */
  .kyotsu-banner-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .kyotsu-start-btn { width: 100%; text-align: center; }

  /* セットアップ */
  .setup-container { padding: 1.75rem 1rem; }
  .setup-grid { grid-template-columns: 1fr; }
  .setup-card.category-card { grid-column: auto; }
  .setup-card.difficulty-card {
    border-right: none;
    border-bottom: 1px solid var(--ed-rule);
  }

  /* モードグリッド: 2列 */
  .mode-grid { grid-template-columns: repeat(2, 1fr); }
  .mode-card:nth-child(2n) .mode-content { border-right-width: 0; }

  /* クイズ */
  .quiz-container { padding: 1rem; }
  .quiz-controls { flex-direction: column; }
  .btn-primary.quiz-btn,
  .btn-secondary.quiz-btn { width: 100%; justify-content: center; }

  /* 結果 */
  .result-container { padding: 1.5rem 1rem; }
  .result-controls { flex-direction: column; }
  .btn-primary.result-btn,
  .btn-secondary.result-btn { width: 100%; justify-content: center; }
}

/* ---- 480px以下: スマートフォン ---- */
@media (max-width: 480px) {
  .hero-header { padding: 1.5rem 1rem 1.25rem; }

  /* タイトルサイズ */
  .title-main { font-size: clamp(1.9rem, 8vw, 2.4rem); }

  /* 統計は縦並び */
  .hero-stats {
    display: flex;
    flex-direction: column;
    border: none;
    gap: 0;
    margin: 0 0 1.5rem;
  }
  .stat-item {
    border-right: none;
    border-bottom: 1px solid var(--ed-rule);
    padding: 0.75rem 0;
    flex-direction: row;
    align-items: baseline;
    gap: 0.75rem;
  }
  .stat-item:last-child { border-bottom: none; }
  .stat-number { font-size: 1.5rem; }

  /* クイックアクション: 1列 */
  .quick-actions { grid-template-columns: 1fr; }
  .quick-btn { border-right: none !important; }
  .quick-btn:nth-child(n+2) { border-top: 1px solid var(--ed-rule); }
  .quick-btn-kyotsu { grid-column: span 1; }

  /* モードグリッド: 1列 */
  .mode-grid { grid-template-columns: 1fr; border: 1px solid var(--ed-rule); }
  .mode-card { border-right: none; border-bottom: 1px solid var(--ed-rule); }
  .mode-card:last-child { border-bottom: none; }
  .mode-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-align: left;
    padding: 0.9rem 1rem;
  }
  .mode-icon { font-size: 1.2rem; margin-bottom: 0; flex-shrink: 0; }

  /* スタートボタン: 全幅 */
  .start-section { justify-content: stretch; }
  #start-quiz { width: 100% !important; justify-content: center !important; }

  /* 問題ナビ */
  .question-title { font-size: 1rem; padding-right: 3.5rem; }

  /* 解説・ノート */
  .note-section { padding: 0; }
  .note-textarea { font-size: 0.9rem; }

  /* 結果グリッド: 2列のまま（幅が足りる） */
  .result-grid { grid-template-columns: 1fr 1fr; }
}