/* 危険物クエスト — モバイルファースト */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #f4f2ec;
  --card: #ffffff;
  --ink: #2b2a26;
  --sub: #6b6759;
  --accent: #5b4fc4;      /* 主ボタン・強調 */
  --accent-dark: #463c9e;
  --maru: #1a8f5c;        /* ○ */
  --batsu: #c0392b;       /* ✕ */
  --gold: #b8860b;
  --line: #e2ddd0;
}
html { font-size: 16px; }
body {
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
  background: var(--bg); color: var(--ink);
  min-height: 100vh;
}
.hidden { display: none !important; }

/* ヘッダー */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: #322d52; color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.topbar-title {
  background: none; border: none; color: #fff;
  font-size: 1.05rem; font-weight: 700; cursor: pointer;
}
.level-badge {
  background: var(--gold); color: #fff; font-weight: 700;
  padding: 2px 10px; border-radius: 12px; font-size: .85rem;
}

/* レイアウト */
.view { max-width: 520px; margin: 0 auto; padding: 16px 14px 48px; }
.tagline { text-align: center; color: var(--sub); font-size: .9rem; margin: 4px 0 14px; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px; margin-bottom: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.card-title { font-size: 1rem; margin-bottom: 8px; }
.hint { color: var(--sub); font-size: .82rem; margin-bottom: 8px; }

/* ホーム：統計 */
.stats-row { display: flex; justify-content: space-around; }
.stat { text-align: center; }
.stat-num { display: block; font-size: 1.7rem; font-weight: 700; color: var(--accent-dark); }
.stat-label { font-size: .75rem; color: var(--sub); }

/* チップ（フィルタ） */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.chip {
  border: 1.5px solid var(--line); background: #faf9f5; color: var(--ink);
  border-radius: 20px; padding: 7px 13px; font-size: .85rem; cursor: pointer;
}
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.chip-special.on { background: #8c2f22; border-color: #8c2f22; }

/* ボタン */
.btn-primary {
  display: block; width: 100%; padding: 14px; margin-top: 8px;
  background: var(--accent); color: #fff; border: none; border-radius: 12px;
  font-size: 1rem; font-weight: 700; cursor: pointer;
}
.btn-primary:active { background: var(--accent-dark); }
.btn-primary:disabled { background: #b9b4a5; cursor: default; }
.btn-secondary {
  display: block; width: 100%; padding: 12px; margin-top: 10px;
  background: #fff; color: var(--accent-dark); border: 1.5px solid var(--accent);
  border-radius: 12px; font-size: .95rem; font-weight: 600; cursor: pointer;
}
.btn-quit {
  display: block; margin: 18px auto 0; background: none; border: none;
  color: var(--sub); font-size: .85rem; text-decoration: underline; cursor: pointer;
}

/* 合言葉 */
.unlock-row { display: flex; gap: 8px; }
#pass-input {
  flex: 1; padding: 11px 12px; border: 1.5px solid var(--line); border-radius: 10px;
  font-size: 1rem; background: #faf9f5;
}
#pass-input:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.btn-unlock {
  padding: 0 20px; background: var(--gold); color: #fff; border: none;
  border-radius: 10px; font-size: .95rem; font-weight: 700; cursor: pointer;
}
.btn-unlock:disabled { opacity: .5; }
.unlock-error { color: var(--batsu); font-size: .82rem; margin-top: 6px; min-height: 1em; }
.unlock-done { color: var(--maru); font-weight: 700; font-size: .95rem; }

/* 攻略マップ */
.map-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: .85rem; }
.map-label { width: 6.5em; flex-shrink: 0; }
.map-bar-bg { flex: 1; height: 12px; background: #eceadf; border-radius: 6px; overflow: hidden; }
.map-bar { height: 100%; background: linear-gradient(90deg, #7c6fe0, #4caf7d); border-radius: 6px; }
.map-pct { width: 3.5em; text-align: right; color: var(--sub); font-size: .8rem; }

/* 探索画面 */
.quest-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px; font-size: .82rem; color: var(--sub);
}
.quest-streak { color: var(--gold); font-weight: 700; }
.q-lead { font-size: .8rem; color: var(--sub); margin-bottom: 6px; }
.q-topic { font-size: .78rem; color: var(--accent-dark); font-weight: 600; margin-bottom: 8px; }
.q-text { font-size: 1.05rem; line-height: 1.75; margin-bottom: 16px; }
.answer-row { display: flex; gap: 12px; }
.btn-answer {
  flex: 1; padding: 18px 0; font-size: 1.8rem; font-weight: 700;
  border: none; border-radius: 12px; color: #fff; cursor: pointer;
}
.btn-maru { background: var(--maru); }
.btn-batsu { background: var(--batsu); }
.btn-answer:disabled { opacity: .45; cursor: default; }

/* フィードバック */
.fb-result { font-size: 1.25rem; font-weight: 700; margin-bottom: 6px; }
.fb-result.ok { color: var(--maru); }
.fb-result.ng { color: var(--batsu); }
.fb-truth { font-size: .9rem; font-weight: 600; margin-bottom: 6px; }
.fb-explain { font-size: .92rem; line-height: 1.7; margin-bottom: 10px; }
.derivation { margin-bottom: 12px; }
.derivation summary {
  cursor: pointer; color: var(--accent-dark); font-weight: 600; font-size: .9rem;
  padding: 6px 0;
}
.derivation ul { margin: 6px 0 0 1.2em; font-size: .88rem; line-height: 1.7; }
.derivation li { margin-bottom: 4px; }

/* 探索終了 */
.done-summary { font-size: .95rem; line-height: 1.8; margin-bottom: 8px; }

.foot-note { text-align: center; color: #a09a88; font-size: .75rem; margin-top: 18px; }

/* ボス戦：ホームのセット一覧 */
.btn-boss { display: flex; justify-content: space-between; align-items: center; gap: 8px; text-align: left; }
.boss-last { font-size: .75rem; font-weight: 400; opacity: .85; flex-shrink: 0; }

/* ボス戦：出題 */
.boss-review-link {
  background: none; border: 1px solid var(--line); border-radius: 14px;
  color: var(--accent-dark); font-size: .78rem; padding: 4px 10px; cursor: pointer;
}
.boss-choices { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; }
.boss-choice {
  display: flex; gap: 10px; align-items: flex-start; width: 100%;
  padding: 12px; font-size: .92rem; line-height: 1.6; text-align: left;
  background: #faf9f5; border: 1.5px solid var(--line); border-radius: 10px; cursor: pointer;
}
.boss-choice.selected { background: #eeebff; border-color: var(--accent); font-weight: 600; }
.boss-choice-num {
  flex-shrink: 0; width: 1.6em; height: 1.6em; border-radius: 50%;
  background: var(--line); color: var(--ink); font-weight: 700; font-size: .85rem;
  display: flex; align-items: center; justify-content: center;
}
.boss-choice.selected .boss-choice-num { background: var(--accent); color: #fff; }
.btn-flag {
  display: block; margin: 0 0 10px auto; background: none;
  border: 1.5px solid var(--line); border-radius: 16px;
  color: var(--sub); font-size: .82rem; padding: 6px 12px; cursor: pointer;
}
.btn-flag.on { background: #fff3cd; border-color: var(--gold); color: #7a5b00; font-weight: 600; }
.boss-nav-row { display: flex; gap: 10px; }
.boss-nav-row .btn-secondary { margin-top: 0; }
.boss-nav-row .btn-secondary:disabled { opacity: .4; }

/* ボス戦：見直し一覧 */
.review-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.review-cell {
  padding: 9px 4px; border: 1.5px solid var(--line); border-radius: 10px;
  background: #faf9f5; font-size: .85rem; cursor: pointer; text-align: center;
}
.review-cell.answered { background: #eaf6ef; border-color: var(--maru); }
.review-cell.flagged { background: #fff3cd; border-color: var(--gold); }
.review-state { display: block; font-size: .72rem; color: var(--sub); margin-top: 2px; }

/* ボス戦：結果 */
.boss-result-card { text-align: center; }
.boss-result-title { font-size: 1.3rem; margin-bottom: 6px; }
.boss-result-title.ok { color: var(--maru); }
.boss-result-title.ng { color: var(--batsu); }
.boss-score { font-size: 2.2rem; font-weight: 700; color: var(--accent-dark); margin-bottom: 4px; }
.boss-result-item { border-bottom: 1px solid var(--line); padding: 8px 0; }
.boss-result-item summary { cursor: pointer; font-size: .92rem; font-weight: 600; padding: 4px 0; }
.result-oc { margin-right: 6px; }
.result-stem { font-size: .9rem; line-height: 1.7; margin: 8px 0; }
.result-choices { list-style: none; margin: 0 0 10px 0; font-size: .86rem; line-height: 1.6; }
.result-choices li { margin-bottom: 8px; }
.result-choices li.is-answer { background: #eaf6ef; border-radius: 6px; padding: 4px 6px; }
.result-choices li.is-picked { background: #fdeceb; border-radius: 6px; padding: 4px 6px; }
.result-mark { color: var(--accent-dark); font-size: .8rem; font-weight: 700; }
.result-explain { color: var(--sub); font-size: .8rem; }
.result-deriv-title { font-size: .88rem; font-weight: 700; color: var(--accent-dark); margin-bottom: 4px; }
.result-deriv { margin: 0 0 4px 1.3em; font-size: .85rem; line-height: 1.7; }

/* 攻略マップ：弱点表示 */
.weakness-line { font-size: .82rem; color: #8c2f22; font-weight: 600; margin: 8px 0 4px; min-height: 1em; }

/* 攻略マップ：ヒートマップ（類×出題型） */
.heatmap { margin: 10px 0 4px; }
.hm-row { display: flex; gap: 5px; margin-bottom: 5px; align-items: stretch; }
.hm-label { width: 4.2em; flex-shrink: 0; font-size: .8rem; display: flex; align-items: center; }
.hm-cell-head {
  flex: 1; font-size: .68rem; color: var(--sub); text-align: center;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 2px;
}
.hm-cell {
  flex: 1; text-align: center; font-size: .78rem; font-weight: 600;
  padding: 9px 2px; border-radius: 8px; border: 1px solid var(--line);
}
.hm-empty { color: #c9c4b4; background: #faf9f5; font-weight: 400; }   /* 問題が未収録 */
.hm-none  { color: var(--sub); background: #f0eee6; font-weight: 400; } /* 未解答 */
.hm-low   { background: #fdeceb; border-color: #e8b6b0; color: #8c2f22; }
.hm-mid   { background: #fff3cd; border-color: #e3cf8f; color: #7a5b00; }
.hm-high  { background: #eaf6ef; border-color: #a9d8bd; color: #14683f; }

/* ボス戦履歴 */
.history-title { font-size: .88rem; font-weight: 700; margin-bottom: 6px; }
.history-list { list-style: none; }
.history-list li {
  display: flex; gap: 10px; align-items: center; font-size: .84rem;
  padding: 6px 0; border-bottom: 1px dashed var(--line);
}
.hist-date { color: var(--sub); font-size: .78rem; width: 6em; flex-shrink: 0; }
.hist-score { font-weight: 700; width: 3.5em; }
.hist-result.ok { color: var(--maru); font-weight: 600; }
.hist-result.ng { color: var(--batsu); font-weight: 600; }
.hist-sec { margin-left: auto; color: var(--sub); font-size: .78rem; }

/* 設定 */
.setting-row { padding: 10px 0; border-bottom: 1px solid var(--line); }
.setting-row:last-child { border-bottom: none; }
.btn-danger {
  display: block; width: 100%; padding: 12px; margin-top: 6px;
  background: #fff; color: var(--batsu); border: 1.5px solid var(--batsu);
  border-radius: 12px; font-size: .95rem; font-weight: 600; cursor: pointer;
}
.btn-danger:active { background: #fdeceb; }

/* 教材CTA */
.cta-card { background: #f3f1fb; border-color: #cfc8ee; }
.cta-text { font-size: .88rem; line-height: 1.7; margin-bottom: 8px; }
.cta-link { text-align: center; text-decoration: none; }

/* DLC基盤（M5）: ワールド切替・解放演出・準備中パック */
.world-tabs { border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 10px; }
.world-tab { font-weight: 600; }
.unlock-flash {
  background: #eaf6ef; border: 1px solid #a9d8bd; border-radius: 10px;
  color: #14683f; font-size: .9rem; font-weight: 700;
  padding: 10px 12px; margin-bottom: 10px;
}
.coming-soon-item {
  border: 1.5px dashed var(--line); border-radius: 10px;
  background: #faf9f5; padding: 12px 14px; margin-bottom: 8px;
}
.cs-title { display: block; font-size: .95rem; font-weight: 700; color: #8b8677; }
.cs-sub { display: block; font-size: .78rem; color: #a09a88; margin-top: 2px; }
.boss-world { font-size: .75rem; font-weight: 400; opacity: .85; margin-left: 6px; }
.hm-world-title { font-size: .92rem; font-weight: 700; margin: 14px 0 6px; }
.hm-world-title:first-child { margin-top: 0; }