.lottery-mode-select {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lottery-mode-lead {
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-soft);
  margin: 4px 0 2px;
}

.mode-card {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mode-card-title { font-weight: 700; font-size: 15px; color: var(--ink); }
.mode-card-desc { font-size: 12.5px; color: var(--ink-soft); }

.lottery-puzzle-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lottery-target-label {
  font-size: 20px;
  font-weight: 800;
  color: var(--accent-dark);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lottery-sentence {
  font-size: 16px;
  line-height: 2.1;
  color: var(--ink);
  margin: 0;
  text-align: center;
}

.sentence-operator {
  display: inline-block;
  font-weight: 800;
  color: var(--accent);
  margin: 2px 0;
}

.blank-chip {
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--accent-dark);
  background: var(--accent-soft);
  border: 1px dashed var(--accent);
  border-radius: 8px;
  padding: 3px 10px;
  margin: 2px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.blank-chip.is-active {
  border-style: solid;
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.blank-chip.is-filled {
  border-style: solid;
}

.blank-chip-icon {
  width: 1.1em;
  height: 1.1em;
  color: var(--accent-dark);
}

.blank-chip-edit-hint {
  font-size: 0.85em;
  opacity: 0.6;
}

.lottery-choice-bank {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.choice-card {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
}

.choice-card-icon {
  width: 1.3em;
  height: 1.3em;
  color: var(--accent-dark);
  flex-shrink: 0;
}

.choice-card.is-used {
  opacity: 0.55;
  border-style: dashed;
  border-color: var(--accent);
}

/* ---- Answer ---- */
.lottery-answer {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 判定は淡い帯にする。むき出しの赤文字は、その下に出ている正解まで
   不正解に見せてしまう(平凡投票の feedback-banner の作りを踏襲) */
.lottery-answer-verdict {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 700;
  text-align: center;
  line-height: 1.6;
}
.lottery-answer-verdict:empty { display: none; }
.lottery-answer-verdict.is-correct { color: var(--good); background: var(--good-soft); }
.lottery-answer-verdict.is-wrong { color: var(--bad); background: var(--bad-soft); }
/* 「回答を見る」の後は、判定ではなく正解の見出しになる */
.lottery-answer-verdict.is-reveal { color: var(--accent-dark); background: var(--accent-soft); }

.lottery-model-answer {
  margin: 8px 0 0;
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.7;
}

.lottery-wrong-actions {
  display: flex;
  gap: 10px;
}

.btn-half { flex: 1; text-align: center; }

.lottery-breakdown-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lottery-breakdown {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.breakdown-item {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.breakdown-item.is-correct {
  border-color: var(--accent);
}

.breakdown-head { display: flex; align-items: center; gap: 8px; }
.breakdown-icon { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }
.breakdown-item .breakdown-label {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.5;
}

/* 平凡投票の%バーと同じ作り。確率は桁が違うので幅は対数で決める(JS側) */
.breakdown-row { display: flex; align-items: center; gap: 10px; }
.bar-track {
  flex: 1;
  height: 10px;
  background: var(--track);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.bar {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.5s ease;
}
.breakdown-item .breakdown-odds {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  min-width: 92px;
  text-align: right;
}

/* 注記と出典は畳む。答え合わせで4行を占有しない(出典は確率図鑑に常時出ている) */
.breakdown-details summary {
  font-size: 11.5px;
  color: var(--ink-faint);
  cursor: pointer;
  list-style: none;
  min-height: 20px;
}
.breakdown-details summary::-webkit-details-marker { display: none; }
.breakdown-details summary::before { content: '▸ '; }
.breakdown-details[open] summary::before { content: '▾ '; }
.breakdown-item .breakdown-note {
  margin: 6px 0 0;
  font-size: 11.5px;
  color: var(--ink-soft);
  line-height: 1.7;
}

@media (prefers-reduced-motion: reduce) {
  .bar { transition: none; }
}

.lottery-ratio {
  background: var(--accent-soft);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--accent-dark);
  text-align: center;
  margin: 0;
}

.breakdown-source {
  margin: 2px 0 0;
  font-size: 10.5px;
  color: var(--ink-faint);
}

/* 空欄が3つ以上の問題では、この文が伸びて「確かめる」が画面外に落ちる。
   スクロールしても常に手が届くよう、ビューポート下端に貼り付ける(2026-08-22) */
#lottery-check {
  position: sticky;
  bottom: calc(8px + env(safe-area-inset-bottom));
  z-index: 5;
  box-shadow: 0 6px 18px rgba(28, 28, 30, 0.18);
}

/* チップと『』を1行にまとめる。inline-blockだと、チップが長いときに
   『 だけが前の行に取り残されて文が崩れていた(2026-08-23、実画面で確認) */
.sentence-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  margin: 2px 0;
  /* 「』の確率」が「の確 率」で折れないように、行の地の文は折り返さない。
     長いラベルはチップの中だけで折り返す */
  white-space: nowrap;
}
.sentence-line .blank-chip {
  flex: 0 1 auto;
  min-width: 0;
  white-space: normal;
}

/* 図鑑に何件ふえたかを、答え合わせの中でそっと伝える */
.lottery-unlocked {
  margin: 8px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  text-align: center;
}

/* 選択肢のジャンル見出し。関係ないジャンルが混ざって探す範囲が広すぎた
   (2026-08-31、実機の指摘)。消すと正解まで消えるので、まとめて見出しを付ける */
.choice-group-head {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  margin: 10px 0 2px;
}

.choice-group-head:first-child { margin-top: 0; }