/* ===== 全体（デザインA：ポップ＆キャラクター系） ===== */
:root {
  --text: #3a2e1f;
  --muted: #9a8f7d;
  --faded: #d8cfc0;
  --bg: #fff6e9;
  --card: #ffffff;
  --border: #f0e4cf;
  --accent: #ff7a45;       /* オレンジ（メイン） */
  --accent-dark: #f4632c;
  --accent-soft: #fff1ea;  /* メインの色の薄い色（選択中のボタンの背景など） */
  --accent2: #2fc6b0;      /* ミント（サブ） */
  --yellow: #ffc93c;       /* 黄色（ポイント） */
  --correct: #1fa97a;
  --wrong: #ff5c5c;
}

* {
  box-sizing: border-box;
}

/* hidden を付けた部品は必ず隠す */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
  line-height: 1.6;
}

.app {
  max-width: 640px;
  margin: 0 auto;
  padding: 16px;
}

button {
  font: inherit;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

/* ===== ヘッダー ===== */
.app-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.app-header h1 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  white-space: nowrap;
}

.title-emoji {
  font-size: 2em;
  line-height: 1;
  display: inline-block;
  transform: translateY(-0.12em);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.stats-open-button {
  flex-shrink: 0;
  min-height: 36px;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--accent-dark);
  font-weight: 800;
  font-size: 0.85rem;
}

/* ===== 正答率グラフ（成績画面）・出典クレジット（credits-overlayも同じ見た目を使う） ===== */
.stats-overlay {
  position: fixed;
  inset: 0;
  background: rgba(58, 46, 31, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
  animation: overlay-fade 0.25s ease;
}

.stats-card {
  background: #fff;
  border-radius: 20px;
  padding: 20px;
  width: 100%;
  max-width: 380px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 10px 0 var(--accent-dark);
}

.stats-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.stats-header h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--accent-dark);
}

.stats-close {
  min-width: 36px;
  min-height: 36px;
  border: none;
  border-radius: 999px;
  background: #f1e9d8;
  color: var(--text);
  font-size: 1rem;
  font-weight: 800;
}

.stats-section {
  margin-top: 16px;
}

.stats-section:first-child {
  margin-top: 0;
}

.stats-subtitle {
  margin: 0 0 8px;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--text);
}

.stats-wpm-select {
  display: block;
  margin: 0 auto 10px;
  min-height: 36px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-weight: 700;
}

.stats-empty {
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 20px 0;
}

/* ===== 出典 ===== */
.credits-item {
  padding: 12px;
  margin-bottom: 10px;
  background: var(--bg);
  border-radius: 12px;
}

.credits-item-title {
  margin: 0 0 4px;
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--text);
}

.credits-item-line {
  margin: 2px 0;
  font-size: 0.8rem;
  color: var(--muted);
  word-break: break-all;
}

.credits-item-line a {
  color: var(--accent2);
}

/* ===== 苦手な単語リスト ===== */
.weak-word-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.weak-word-row {
  display: grid;
  grid-template-columns: 76px 1fr 40px;
  align-items: center;
  gap: 8px;
}

.weak-word-text {
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weak-word-bar-track {
  height: 10px;
  background: #f1e9d8;
  border-radius: 999px;
  overflow: hidden;
  display: block;
}

.weak-word-bar-fill {
  display: block;
  height: 100%;
  min-width: 6px; /* 正答率0%でも色が見えるように、最低限の幅を確保する（2026-09-30追加） */
  border-radius: 999px;
}

.weak-word-pct {
  font-weight: 800;
  font-size: 0.85rem;
  text-align: right;
  white-space: nowrap;
}

.progress {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
}

/* ===== 問題の行き来（確認用） ===== */
.dev-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 12px;
  padding: 8px;
  background: #fbf5ea;
  border: 1px dashed var(--border);
  border-radius: 12px;
  flex-wrap: wrap;
}

.dev-nav .progress {
  min-width: 90px;
  text-align: center;
}

.nav-arrow {
  min-width: 44px;
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-size: 1.1rem;
  color: var(--accent-dark);
  font-weight: 800;
}

/* ===== 経験値（XP）表示（HUD） =====
   2026-09-29：WPMレベルごとのバー表示をやめ、アプリ全体で1つの数字がカウントアップする
   方式にした（バーの上限が決めにくい、WPMレベルの表示と「Lv」が並んでわかりにくい、
   という指摘から。詳細はCLAUDE.md 7章参照） */
.hud {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  background: var(--card);
  border-radius: 18px;
  padding: 12px 16px;
  margin-bottom: 14px;
  box-shadow: 0 3px 0 var(--border);
}

.xp-hud-label {
  color: var(--accent-dark);
  font-weight: 800;
  font-size: 0.9rem;
}

.xp-hud-value {
  color: var(--accent-dark);
  font-weight: 800;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
}

/* ===== レベルアップ演出 ===== */
.levelup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(58, 46, 31, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: overlay-fade 0.25s ease;
}

@keyframes overlay-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.levelup-card {
  background: #fff;
  border-radius: 20px;
  padding: 32px 40px;
  text-align: center;
  box-shadow: 0 10px 0 var(--accent-dark);
  animation: levelup-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes levelup-pop {
  0% { transform: scale(0.4); opacity: 0; }
  70% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}

.levelup-mascot {
  width: 200px;
  height: 200px;
  margin: -12px auto 6px;   /* 画像の周りの余白を少し詰める（画像によって余白の量が違うので、詰めすぎない） */
}

.levelup-mascot svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* レベルアップのたびに、ハリネズミが喜んで跳ねるアニメーション */
.levelup-mascot.is-happy {
  animation: mascot-happy-bounce 0.7s ease;
}

@keyframes mascot-happy-bounce {
  0% { transform: scale(0.6) rotate(0deg); }
  40% { transform: scale(1.15) rotate(-8deg); }
  65% { transform: scale(0.95) rotate(6deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.levelup-title {
  margin: 4px 0 0;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--accent-dark);
}

/* マイルストーンのお祝い：長い文なので小さめにして、画面の幅に収める */
.levelup-level.is-message {
  font-size: 1rem;
  line-height: 1.55;
  max-width: 270px;
  white-space: pre-line;   /* 文の中の改行（\n）を、そのまま使う。きりの良い位置で改行するため */
}

.levelup-mascot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.levelup-level {
  margin: 4px 0 0;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text);
}

/* ===== WPMレベルの選択 ===== */
.wpm-select-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 700;
}

/* 「レベル」「モード」の2つの行で、ラベル・選択欄の幅をそろえる（2026-09-30追加。
   ラベルの文字数が違うと選択欄の開始位置がずれて段違いに見えるため） */
.wpm-select-row label {
  width: 4em;
  text-align: right;
  white-space: nowrap;
}

.wpm-select-row select {
  /* 「超上級（WPM190〜200）」が1行に収まる幅。狭い画面では縮む（2026-10-04：150pxから拡大） */
  flex: 1 1 auto;
  min-width: 0;
  max-width: 230px;
  font-size: 0.85rem;
  min-height: 36px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-weight: 700;
}

/* かなり小さいスマホ（幅360px以下）では、レベル名が1行に収まるよう文字を少し小さくする */
@media (max-width: 360px) {
  .wpm-select-row select {
    font-size: 0.78rem;
    padding: 2px 4px;
  }}

/* WPMごとの目安（ⓘ）。「出す問題の速さ」の右どなりに置く */
.wpm-info-button {
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: #f1e9d8;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1;
}

.wpm-info-box {
  position: relative;
  background: #f6f2ea;
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 14px 40px 14px 14px;
  margin: -6px 0 14px;
  text-align: left;
}

.wpm-info-intro {
  margin: 0 0 10px;
  font-size: 0.78rem;
  color: var(--muted);
}

.wpm-info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.wpm-info-table th,
.wpm-info-table td {
  padding: 6px 4px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.wpm-info-table th {
  color: var(--muted);
  font-weight: 700;
}

.wpm-info-table td:first-child {
  color: var(--accent-dark);
  font-weight: 800;
  white-space: nowrap;
}

.wpm-info-table td:last-child {
  color: var(--text);   /* 目安の文は、説明として読みやすい濃さにする */
}

.wpm-info-table tr:last-child td {
  border-bottom: none;
}

.wpm-info-close {
  position: absolute;
  top: 6px;
  right: 8px;
  border: none;
  background: none;
  padding: 4px;
  font-size: 1rem;
  line-height: 1;
  color: var(--muted);
}

/* モードの説明（ⓘ）。「モード」の右どなりに置く。箱・閉じるボタンの見た目は
   WPMごとの目安（.wpm-info-box系）と共通のクラスを使い回している（2026-09-30追加） */
.mode-info-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.78rem;
}

.mode-info-list li {
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
}

.mode-info-list li:last-child {
  border-bottom: none;
}

.mode-info-list strong {
  display: block;
  color: var(--accent-dark);
  font-weight: 800;
  margin-bottom: 2px;
}

/* ===== 再生エリア ===== */
.player {
  background: var(--card);
  border-radius: 18px;
  padding: 16px;
  text-align: center;
  margin-bottom: 14px;
  box-shadow: 0 3px 0 var(--border);
}

.wpm-badge {
  display: inline-block;
  margin: 0 0 10px;
  padding: 3px 12px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 800;
}

.play-button {
  width: 100%;
  min-height: 56px;
  border: none;
  border-radius: 16px;
  background: var(--accent);
  color: #fff;
  font-size: 1.15rem;
  font-weight: 800;
  box-shadow: 0 4px 0 var(--accent-dark);
}

.play-button:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--accent-dark);
}

.play-button:disabled {
  background: #ded2ba;
  color: var(--faded);
  box-shadow: 0 4px 0 #c9bc9e;
}

.play-remaining {
  margin: 8px 0 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
}

.speed-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.speed-button {
  min-height: 44px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0 2px;
  white-space: nowrap;
}

.speed-button.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 800;
}

/* 押せない速度ボタン：斜線を入れて薄く表示 */
.speed-button:disabled {
  color: var(--faded);
  border-color: #f1e9d8;
  background:
    linear-gradient(to top right,
      transparent calc(50% - 1px),
      #ded2ba calc(50% - 1px),
      #ded2ba calc(50% + 1px),
      transparent calc(50% + 1px)),
    #fbf5ea;
  font-weight: 700;
}

/* ===== 問題文 ===== */
.sentence {
  background: var(--card);
  border-radius: 18px;
  padding: 20px 16px;
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 8px;
  font-size: 1.2rem;
  font-weight: 700;
  min-height: 80px;
  box-shadow: 0 3px 0 var(--border);
}

.token {
  display: inline-flex;
  align-items: flex-end;
}

.punct {
  padding-bottom: 4px;
}

/* 空欄にしなかった単語（最初から表示されている単語）。
   答え合わせのあとはbutton要素になり単語の意味をクリックできるので、
   ボタンの初期見た目（枠線・背景）を消して元のspanと同じ見た目に戻す */
.given-word {
  padding-bottom: 2px;
  color: var(--muted);
  font-weight: 700;
  border: none;
  background: none;
  font-family: inherit;
}

/* 空欄：単語の長さに関係なく同じ幅（2026-09-29修正：min-widthだけだと、埋めた単語が
   長いときに幅が広がって文全体の折り返しがずれ、既に埋めた空欄の位置まで動いてしまう
   不具合があった。widthを固定した。最初は長い単語を箱の中で2行に折り返す形にしたが、
   「2行になるのはやりにくい」とのことで撤回し、代わりに長い単語だけ文字を少し小さくして
   1行のまま収める方式にした。文字を縮める判定は`js/app.js`の`applyBlankTextSize()`） */
.blank {
  width: 7em;
  min-height: 40px;
  padding: 0 6px 2px;
  border: none;
  border-bottom: 3px solid var(--text);
  background: transparent;
  color: var(--text);
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}

/* 長い単語が入ったときに、箱の幅は変えずに文字だけ縮めて1行に収める（2026-09-29追加） */
.blank-text-md {
  font-size: 0.88em;
}

.blank-text-sm {
  font-size: 0.72em;
  padding-left: 2px;
  padding-right: 2px;
}

.blank.is-filled {
  border-bottom-color: var(--accent);
  color: var(--accent-dark);
}

/* スキップした空欄：点線にして、あとで戻せることがわかるようにする */
.blank.is-skipped {
  border-bottom-style: dashed;
  border-bottom-color: var(--faded);
  color: var(--faded);
}

/* 単語をクリックすると実際に入る空欄（一番前の、まだ解決していない空欄）を目立たせる。
   スキップ中でもこの黄色い目立たせは付ける（2026-09-28）。
   取り消したあとや、未回答が並んだときに「次はどこを操作すればいいか」が伝わるようにする */
.blank.is-next-target {
  border-bottom-color: var(--yellow);
  background: #fff8e6;
  border-radius: 8px 8px 0 0;
  animation: next-target-pulse 1.4s ease-in-out infinite;
}

/* スキップ中かつ一番前（＝is-next-targetも付く）のときの文字色は、あえて.is-skippedと
   同じ薄い色のままにしている（2026-09-28：一度はっきりした色に変えたが、「入力済み（answered）」
   の文字色と同じ色になってしまい紛らわしいという指摘があったため、いったん薄い色に戻して様子見） */

/* スキップ中（未回答）の空欄が点滅するときは、下線の実線（box-shadow）ではなく、
   もともとの点線（border-bottom-style: dashed）そのものの色を点滅させる（2026-09-28変更。
   「未回答の点滅は点線が点滅する形にしてほしい」という指摘から） */
.blank.is-skipped.is-next-target {
  animation: skipped-next-target-pulse 1.4s ease-in-out infinite;
  box-shadow: none;
}

@keyframes next-target-pulse {
  0%, 100% { box-shadow: 0 3px 0 0 var(--yellow); }
  50% { box-shadow: 0 3px 0 0 transparent; }
}

@keyframes skipped-next-target-pulse {
  0%, 100% { border-bottom-color: var(--yellow); }
  50% { border-bottom-color: var(--faded); }
}

.blank:disabled {
  cursor: default;
}

/* 答え合わせ後 */
.blank.is-correct {
  color: var(--correct);
  font-weight: 800;
  border-bottom-color: var(--correct);
}

.blank.is-wrong {
  color: var(--wrong);
  font-weight: 800;
  border-bottom-color: var(--wrong);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
}

/* 間違えたときに自分が選んだ単語（小さく取り消し線） */
.your-answer {
  color: var(--muted);
  font-size: 0.7em;
  font-weight: normal;
  text-decoration: line-through;
}

/* ===== 単語の意味（4-9。答え合わせのあと、単語をクリックすると表示） ===== */
.meaning-word:hover {
  text-decoration: underline;
  text-decoration-style: dotted;
}

.meaning-word.is-meaning-selected {
  box-shadow: 0 0 0 2px var(--yellow) inset;
  border-radius: 8px;
}

.word-meaning-box {
  position: relative;
  background: #fff9ec;
  border: 2px solid var(--yellow);
  border-radius: 14px;
  padding: 12px 40px 12px 14px;
  margin: 0 0 12px;
  font-size: 0.95rem;
}

.word-meaning-word {
  font-weight: 800;
  color: var(--accent-dark);
  margin-right: 8px;
}

.word-meaning-text {
  color: var(--text);
}

.word-meaning-close {
  position: absolute;
  top: 6px;
  right: 8px;
  border: none;
  background: none;
  padding: 4px;
  font-size: 1rem;
  line-height: 1;
  color: var(--muted);
}

/* ===== ブックマーク（4-7の③有料プラン案。2026-09-29追加） ===== */
/* 丸いアイコンボタン（ブックマーク・音声。2026-10-04：文字のボタンをやめて場所を節約） */
.icon-button {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid var(--border);
  border-radius: 50%;
  background: #fff;
  font-size: 1.25rem;
  line-height: 1;
}

.icon-button:active {
  background: #f1e9d8;
}

/* ブックマーク（2次元のイラスト）：まだのときは枠線だけ、済んだら色で塗りつぶす */
.bookmark-toggle {
  color: var(--muted);
}

.bookmark-toggle .bm-icon,
.mode-seg-btn .bm-icon {
  display: block;
  margin: 0 auto;
}

.bm-icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
}

.bookmark-toggle.is-bookmarked {
  color: var(--accent-dark);
  border-color: var(--accent-dark);
  background: #fdf3e4;
}

.bookmark-toggle.is-bookmarked .bm-icon path {
  fill: currentColor;
}

/* 出題モードのボタンの中の小さなブックマーク */
.mode-seg-btn .bm-inline {
  display: inline-block;
  vertical-align: -2px;
  margin: 0;
}

.after-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
}

/* ===== 文全体の日本語訳（4-9） ===== */
.translation-toggle {
  display: block;
  flex: 1;
  min-height: 44px;
  margin: 0;
  padding: 6px 10px;
  border: 2px solid var(--accent2);
  border-radius: 12px;
  background: #fff;
  color: var(--accent2);
  font-weight: 800;
  font-size: 0.95rem;
}

.translation-text {
  margin: -4px 0 12px;
  padding: 12px 14px;
  background: #eafbf8;
  border-radius: 14px;
  color: var(--text);
  font-size: 0.95rem;
}

/* ===== 結果 ===== */
.result {
  margin: 0 0 12px;
  padding: 14px;
  border-radius: 16px;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 800;
}

.result.is-correct {
  background: #e6f9f2;
  color: var(--correct);
}

.result.is-wrong {
  background: #ffefef;
  color: var(--wrong);
}

.result.is-correct.is-animating {
  animation: result-pop 0.5s ease;
}

.result.is-wrong.is-animating {
  animation: result-shake 0.5s ease;
}

@keyframes result-pop {
  0% { transform: scale(0.85); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes result-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* XPの増減表示（結果の横に一瞬出る） */
.xp-change {
  display: inline-block;
  margin-left: 8px;
  font-size: 0.9rem;
  font-weight: 800;
}

.xp-change.is-gain {
  color: var(--correct);
}

.xp-change.is-loss {
  color: var(--wrong);
}

/* ===== 単語リスト ===== */
.word-bank {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 20px;
}

.word-button {
  min-height: 48px;
  min-width: 56px;
  padding: 6px 16px;
  border: 2px solid var(--border);
  border-radius: 24px;
  background: var(--card);
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 700;
  box-shadow: 0 3px 0 var(--border);
}

.word-button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--border);
}

/* 空欄に入れた単語は薄いグレー */
.word-button.is-used {
  color: var(--faded);
  border-color: #f1e9d8;
  background: #fbf7ef;
  box-shadow: none;
}

/* ===== スキップボタン ===== */
.skip-button {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-bottom: 12px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 700;
}

.skip-button:active {
  background: #f1e9d8;
}

/* ===== 操作ボタン ===== */
.actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.main-button {
  min-height: 56px;
  border: none;
  border-radius: 16px;
  background: var(--accent2);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 800;
  box-shadow: 0 4px 0 #229c8a;
}

.main-button:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #229c8a;
}

.main-button:disabled {
  background: #e4dbc9;
  color: #fff;
  box-shadow: none;
}

#next-button {
  background: var(--accent);
  box-shadow: 0 4px 0 var(--accent-dark);
}

#next-button:active {
  box-shadow: 0 1px 0 var(--accent-dark);
}

/* 成績画面の「ディクテーション／ライティング」切り替え */
.stats-view-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.stats-view-tab {
  flex: 1;
  min-height: 38px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: var(--muted);
  font-weight: 800;
  white-space: nowrap;
}

.stats-view-tab.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
}



/* ===== 小さい画面（iPhone SE2など）で1画面に収めるための詰め込み（2026-10-04） ===== */
.app {
  padding: 10px 12px 0;
}

.app-header {
  margin-bottom: 6px;
}

.app-header h1 {
  font-size: 1.1rem;
}

.title-emoji {
  font-size: 1.6em;
}

/* XPとアイコンボタンを1行に */
.top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.hud {
  flex: 1;
  justify-content: flex-start;
  margin: 0;
  padding: 4px 14px;
  border-radius: 14px;
  min-height: 40px;
  align-items: center;
}

.xp-hud-value {
  font-size: 1.25rem;
}

.header-actions {
  gap: 6px;
}

.icon-button.small {
  width: 40px;
  height: 40px;
  font-size: 1.1rem;
  box-shadow: 0 2px 0 var(--border);
}

/* レベルとモードを1行に */
.select-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.select-row select {
  flex: 1 1 0;
  min-width: 0;
  min-height: 38px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
}

.select-row #wpm-select {
  flex: 1.45 1 0;
}

.wpm-info-box {
  margin-bottom: 8px;
}

.dev-nav {
  gap: 10px;
  margin-bottom: 8px;
  padding: 3px 8px;
  border-radius: 10px;
  flex-wrap: nowrap;
}

.nav-arrow {
  min-height: 32px;
  min-width: 40px;
}

/* 再生エリア：バッジ・再生ボタン・残り回数を1行に。速度ボタン（答え合わせのあと）は下の行 */
.player {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 8px 12px;
  margin-bottom: 8px;
  border-radius: 14px;
}

.wpm-badge {
  margin: 0;
  padding: 2px 10px;
  font-size: 0.78rem;
  white-space: nowrap;
}

.play-button {
  flex: 1 1 0;
  width: auto;
  min-height: 44px;
  font-size: 1.05rem;
  border-radius: 14px;
}

.play-remaining {
  margin: 0;
  font-size: 0.78rem;
  white-space: nowrap;
}

.speed-buttons {
  flex: 1 0 100%;
  margin-top: 0;
  gap: 6px;
}

.speed-button {
  min-height: 36px;
  font-size: 0.85rem;
}

/* 問題文・日本語の文 */
.sentence {
  padding: 10px 12px;
  margin-bottom: 8px;
  gap: 8px 6px;
  min-height: 56px;
  font-size: 1.1rem;
  border-radius: 14px;
}

.blank {
  width: 5.6em;
  min-height: 34px;
}

.result {
  margin: 0 0 8px;
  padding: 8px;
  font-size: 1.05rem;
  border-radius: 12px;
}

.after-tools {
  margin: 0 0 6px;
}

.translation-toggle {
  min-height: 40px;
  font-size: 0.9rem;
}

.icon-button {
  width: 40px;
  height: 40px;
}

.word-bank {
  gap: 8px;
  margin-bottom: 8px;
}

.word-button {
  min-height: 40px;
  min-width: 48px;
  padding: 4px 12px;
  font-size: 1rem;
  border-radius: 20px;
}

/* 操作ボタンは画面の下に固定（スクロールしなくても、答え合わせ・次の問題を押せる） */
.bottom-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0 10px;
  background: linear-gradient(to top, var(--bg) 80%, rgba(255, 246, 233, 0));
}

.bottom-bar .skip-button {
  min-height: 36px;
  margin: 0;
}

.main-button {
  min-height: 48px;
}



/* ----- 第2弾の詰め込み：操作ボタンを横並びの1段に、空欄・単語ボタンを小さく ----- */
.bottom-bar {
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
  padding: 6px 0 8px;
}

.bottom-bar .skip-button {
  flex: 1 1 0;
  min-height: 48px;
  padding: 2px 6px;
  font-size: 0.78rem;
  line-height: 1.3;
}

.bottom-bar .skip-button[hidden] {
  display: none;
}

.bottom-bar .actions {
  flex: 1.25 1 0;
}

.sentence {
  padding: 8px 10px;
  gap: 4px 5px;
  font-size: 1rem;
  line-height: 1.35;
  align-items: flex-end;
}

.blank {
  width: 4.7em;
  min-height: 30px;
  padding: 0 3px 1px;
}

.given-word {
  padding-bottom: 1px;
}

.word-bank {
  gap: 6px;
  margin-bottom: 6px;
}

.word-button {
  min-height: 36px;
  min-width: 42px;
  padding: 2px 10px;
  font-size: 0.95rem;
  border-radius: 18px;
}

.dev-nav {
  padding: 2px 8px;
  margin-bottom: 6px;
  border-style: none;
  background: transparent;
}

.nav-arrow {
  min-height: 28px;
}

.player {
  padding: 6px 10px;
  margin-bottom: 6px;
}

.play-button {
  min-height: 40px;
  box-shadow: 0 3px 0 var(--accent-dark);
}

.select-row {
  margin-bottom: 6px;
}

.top-row {
  margin-bottom: 6px;
}


/* 答え合わせのあとの行：結果＋アイコン（ブックマーク・日本語訳）を1行に */
.after-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.after-row > * {
  margin-bottom: 8px;
}

.after-row .result {
  flex: 1;
  margin: 0 0 8px;
  padding: 6px 8px;
  font-size: 0.92rem;
  line-height: 1.35;
}

.after-row .after-tools {
  margin: 0 0 8px;
  flex: 0 0 auto;
}

.translation-toggle {
  flex: 0 0 auto;
  width: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 50%;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--accent2);
  border-color: var(--accent2);
}

/* 日本語訳のアイコンの状態：ブックマークと同じ考え方にそろえる（まだ＝枠線だけ、開いている＝色で塗りつぶし。
   「あ」は塗りつぶしの中で白く抜く） */
.translation-toggle.is-on {
  color: var(--accent2);
  background: #e6f9f2;
  border-color: var(--accent2);
}

.translation-toggle.is-on .tl-bubble {
  fill: currentColor;
}

.translation-toggle.is-on .tl-text {
  fill: #fff;
}

/* ===== シンプルにする整理（2026-10-04）：部品を減らして、余白を戻す ===== */
.app {
  padding: 14px 16px 0;
}

.app-header {
  flex-wrap: nowrap;
  align-items: center;
  margin-bottom: 12px;
}

.app-header h1 {
  font-size: 1.1rem;
  min-width: 0;
}

/* タブ（ディクテーション／ライティング） */
.tabs-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.xp-hud-label {
  font-size: 0.75rem;
}

.xp-hud-value {
  font-size: 1.15rem;
}

/* レベルの選択 */
.select-row {
  margin-bottom: 12px;
}

.select-row #wpm-select {
  flex: 1 1 auto;
  min-height: 42px;
  font-size: 0.95rem;
}

.player {
  padding: 10px 12px;
  margin-bottom: 12px;
}

.play-button {
  min-height: 46px;
}

.sentence {
  padding: 12px 14px;
  margin-bottom: 12px;
  font-size: 1.1rem;
}

.blank {
  width: 5em;
  min-height: 32px;
}

.word-bank {
  gap: 8px;
  margin-bottom: 12px;
}

.word-button {
  min-height: 40px;
  font-size: 1rem;
  padding: 4px 12px;
}

.dev-nav {
  margin-bottom: 12px;
}

.dev-nav[hidden] {
  display: none;
}

/* メニュー */
.menu-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.menu-item {
  min-height: 50px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  color: var(--text);
  font-size: 1rem;
  font-weight: 800;
  text-align: left;
}

.menu-item:active {
  background: #f1e9d8;
}

.menu-section {
  margin-bottom: 18px;
}

.menu-section-title {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 800;
}

.menu-section select {
  width: 100%;
  min-height: 42px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  margin-bottom: 8px;
}

/* ===== 第3弾の整理（2026-10-04）：XPを選択行へ、出題モードを画面に戻す、スピーカーのアイコン ===== */
/* 選択行：レベルの選択と、XP（桁が増えても、選択行の中で収まる） */
.select-row .hud {
  flex: 0 0 auto;
  max-width: 58%;
  min-width: 140px;   /* 999,999 まで文字の大きさを変えずに収まる幅 */
  min-height: 42px;
  margin: 0;
  padding: 2px 12px;
  border-radius: 14px;
  gap: 5px;
  justify-content: center;
  align-items: baseline;
  white-space: nowrap;
  overflow: hidden;
}

.select-row .hud .xp-hud-value {
  font-size: 1.15rem;
  line-height: 1.5;
}

.select-row #wpm-select{
  flex: 1 1 0;
  min-width: 0;
}

/* 出題モードの切り替え：ノーマル／苦手な単語／ブックマーク */
.mode-segment {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.mode-seg-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 36px;
  padding: 0 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
  white-space: nowrap;
}

.mode-seg-btn.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.mode-seg-btn:disabled {
  opacity: 0.45;
}

/* スピーカーのアイコン（2次元のイラスト）。色は文字色（currentColor）に合わせる */
.icon-button .speaker-icon {
  display: block;
  margin: 0 auto;
  color: var(--accent-dark);
}

.history-total {
  margin: 0;
  color: var(--accent-dark);
  font-size: 2rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.history-total span {
  font-size: 1rem;
}

/* ===== 第4弾の整理（2026-10-05） ===== */
/* 日本語訳のアイコン（吹き出しに「あ」）。開いているときは色で塗る */
.translation-toggle .tl-icon {
  display: block;
  margin: 0 auto;
}

.translation-toggle .tl-bubble {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
}

.translation-toggle .tl-text {
  fill: currentColor;
}

/* ライティングのレベル選択も、ディクテーションと同じ高さ・文字の大きさにそろえる */
.select-row #wpm-select{
  min-height: 42px;
  font-size: 0.95rem;
  padding: 2px 8px;
}

/* XPの桁が多いときは、文字を小さくして選択行に収める */
.xp-hud-value.is-long {
  font-size: 0.95rem;
}

.xp-hud-value.is-longer {
  font-size: 0.7rem;
}

/* 選択行の中では、上の「.select-row .hud .xp-hud-value」の指定が勝ってしまうので、同じ強さで書き直す */
.select-row .hud .xp-hud-value.is-long {
  font-size: 0.95rem;
}

.select-row .hud .xp-hud-value.is-longer {
  font-size: 0.75rem;
}

/* 出題モードの行の右端のⓘ（ディクテーションの説明） */
.info-button {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #f1e9d8;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
}


/* ===== 文字が極端に小さくなる問題の修正（2026-10-05） =====
   以前は、長い単語を空欄の中に収めるために文字を0.52倍まで縮め、さらに答え合わせ後の「自分の答え」も
   0.7倍にしていたため、二重に縮んで約6pxになることがあった。
   ・入力中（箱の幅を固定したいとき）は、縮めすぎないよう下限を0.72倍にした
   ・答え合わせのあとは、動いても困らないので、箱の幅を内容に合わせて広げ、文字は縮めない */
.blank.is-correct,
.blank.is-wrong {
  width: auto;
  min-width: 5em;
  padding: 0 6px 2px;
  font-size: inherit;
  overflow: visible;
}

.blank.is-correct.blank-text-md,
.blank.is-correct.blank-text-sm,
.blank.is-wrong.blank-text-md,
.blank.is-wrong.blank-text-sm {
  font-size: inherit;
}

.your-answer {
  font-size: 0.8em;
}

/* ===== 学習カレンダー（学習履歴。2026-10-05） ===== */
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.cal-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
}

.cal-nav {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: #fff;
  color: var(--accent-dark);
  font-weight: 800;
}

.cal-nav:disabled {
  opacity: 0.35;
}

.cal-summary {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
}

.cal-summary strong {
  color: var(--accent-dark);
  font-size: 1.05rem;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cal-dow {
  text-align: center;
  color: var(--faded);
  font-size: 0.72rem;
  font-weight: 800;
}

.cal-cell {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  background: #fbf5ea;
  min-width: 0;
}

.cal-cell.is-blank {
  background: transparent;
}

.cal-cell.is-today {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.cal-day {
  position: absolute;
  top: 3px;
  left: 5px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted);
  z-index: 2;
}

.cal-stamp {
  position: absolute;
  inset: 30% 0 2% 0; /* 左上の日付の数字に重ならないよう、下側に小さく。左右は中央 */
}

.cal-stamp img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cal-cell.is-studied {
  background: #dcf1ec; /* 学習した日の薄い緑（2026-10-07：経験値のグラフ #1FA591 と同じ系統。以前は薄い青 #dde7f5） */
}

/* ディクテーションの説明：「レベル」と「出題モード」の2項目に分かれていることが分かるように、前置きと区切り線を入れる（2026-10-05） */
.dict-info-lead {
  margin: 0 0 12px;
  font-size: 0.9rem;
  line-height: 1.6;
}

.dict-info-body .menu-section + .menu-section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 2px dashed var(--border);
}

.dict-info-body .menu-section-title {
  color: var(--accent-dark);
}


/* ===== スキップボタンを非表示（2026-10-06）。空欄を直接タップして入れる場所を選べるようになったため不要。
   ボタンとスキップの処理（onSkip／onWritingSkip）は、念のため残してある。ボタンが無いので「答え合わせ」が横いっぱいに広がる ===== */
.bottom-bar .skip-button {
  display: none !important;
}

/* ===== 日本語訳は、結果の場所に出す（2026-10-06）。下の日本語訳の箱は、状態を持つだけで表示しない ===== */
.translation-text {
  display: none !important;
}

.result.is-translation {
  background: #eafbf8;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 700;
  text-align: left;
}

/* 文末の記号（？など）は、最初から出ている単語と同じ薄い色にそろえる */
.punct {
  color: var(--muted);
}

/* タイトルの色：オレンジ以外で、モードに関係なく同じ色（ハリネズミのとげの茶色） */
.app-header h1 {
  color: #8b5e3c;
}

.tab-icon {
  width: 1.25em;
  height: 1.25em;
  flex: 0 0 auto;
}

.stats-view-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  padding: 0 4px;
  font-size: 0.85rem;
}

/* コンセプト・出典の画面は、ライティングのときも背景の色を変えない（青にしない） */
/* メニュー・成績・学習履歴・説明・コンセプト・出典などの画面は、ライティングのときも、背景の色を変えない（青にしない） */
.stats-overlay {
  --bg: #fff6e9;
  --border: #f0e4cf;
}

/* ===== 白い枠を減らす（2026-10-06）：同じ強さの白い枠が並んでごちゃごちゃして見えたため ===== */
/* ディクテーション：再生のエリアは、下の問題文の白い枠の上側に入れて、1つの枠にまとめる（細い点線で区切る。ライティングと同じ） */
.player {
  background: var(--card);
  box-shadow: none;
  padding: 10px 12px;
  margin-bottom: 0;
  border-radius: 14px 14px 0 0;
  border-bottom: 1px dashed var(--border);
}

.player + .sentence {
  border-radius: 0 0 14px 14px;
}

/* メニューのボタン：3本線の絵を、丸の真ん中に置く（文字の☰だと、字形のせいで少しずれて見えた） */
#menu-open {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
}

#menu-open .menu-icon {
  display: block;
}

/* XPの枠：数字を上寄せ（baseline）ではなく、枠の縦の真ん中に置く */
.select-row .hud {
  align-items: center;
}

.select-row .hud .xp-hud-value {
  line-height: 1;
}

/* ===== ヘッダー（2026-10-07）：ロゴの画像＋XP（白い枠なし）＋メニュー。XPはモードを切り替えても動かない ===== */
.app-header {
  gap: 10px;
}

.app-header .app-logo {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  line-height: 0;
}

.app-header .app-logo img {
  display: block;
  height: 44px;
  width: auto;
  max-width: 100%;
}

.app-header .hud {
  margin: 0 0 0 auto;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  min-width: 0;
  min-height: 0;
  max-width: none;
  gap: 5px;
  align-items: baseline;
  justify-content: flex-end;
  white-space: nowrap;
}

.app-header .hud .xp-hud-value {
  font-size: 1.25rem;
  line-height: 1.2;
}

.app-header .hud .xp-hud-value.is-long {
  font-size: 1.05rem;
}

.app-header .hud .xp-hud-value.is-longer {
  font-size: 0.9rem;
}

.app-header .icon-button {
  flex: 0 0 auto;
}

/* 再生ボタンは、横いっぱいにせず、短めにして中央に置く（「残り3回」はその右）。速度ボタンの行は、今までどおり横いっぱい */
.player {
  justify-content: center;
}

.play-button {
  flex: 0 0 auto;
  min-width: 150px;
  padding-left: 28px;
  padding-right: 28px;
}

/* 再生エリア：再生ボタンは、最初から左に置いて、答え合わせの前後で位置も大きさも変えない。
   その右に、答え合わせの前は「残り3回」、あとは速度ボタンが出る（行を増やさない） */
.player {
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 8px;
}

.player .play-button {
  flex: 0 0 auto;
  min-width: 0;
  padding-left: 14px;
  padding-right: 14px;
}

.player .play-remaining {
  margin-left: 6px;
}

/* 速度ボタン：枠で囲わず、薄い背景だけにする。選んでいる速度は、薄いオレンジの背景と濃い文字 */
.player .speed-buttons {
  display: flex;
  flex: 0 1 auto;
  min-width: 0;
  gap: 4px;
}

.player .speed-button {
  min-height: 0;
  height: 30px;
  width: 50px;      /* 4つとも同じ幅（×1.25の文字が収まる幅） */
  padding: 0;
  border-radius: 9px;
  font-size: 0.8rem;
  border: none;
  box-shadow: none;
  background: #f6f1e6;
  color: var(--text);
}

.player .speed-button.is-selected {
  background: var(--accent-soft);
  color: var(--accent-dark);
  box-shadow: none;
}

/* ===== ディクテーションの「レベル」「モード」の選択（2026-10-07）：ラベル＋プルダウンの2行。
   2つのプルダウンは、選択肢の一番長い文字に合わせて、同じ幅にそろえる（列の幅を max-content にして、中身を100%に） ===== */
.select-grid {
  display: grid;
  grid-template-columns: auto max-content auto;
  align-items: center;
  justify-content: center;
  gap: 4px 6px;
  margin-bottom: 6px;
}

.select-grid .select-label {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 800;
  white-space: nowrap;
}

.select-grid select {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
}

.select-grid .info-button {
  width: 28px;
  height: 28px;
  margin-left: 4px;
  font-size: 0.9rem;
}

/* 再生エリアの縦の余白を詰める（2026-10-07）。ボタンの高さも少し低くする */
.player {
  padding: 6px 12px;
}

.player .play-button {
  min-height: 38px;
  height: 38px;
  padding-top: 0;
  padding-bottom: 0;
}

/* ⓘの説明：①レベル／②出題モードの境目が分かるように、それぞれを枠で囲み、見出しを大きな色つきの帯にする（2026-10-07） */
.dict-info-body .menu-section {
  margin: 0 0 14px;
  padding: 0 0 6px;
  border: 2px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.dict-info-body .menu-section + .menu-section {
  margin-top: 0;
  padding-top: 0;
  border-top: 2px solid var(--border);
}

.dict-info-body .menu-section-title {
  margin: 0 0 6px;
  padding: 10px 14px;
  background: #ffe6d8;
  border-bottom: 2px solid var(--border);
  color: var(--text);
  font-size: 1.05rem;
}

.dict-info-body .wpm-info-table,
.dict-info-body .mode-info-list {
  width: calc(100% - 28px);
  margin: 0 14px;
}

/* 苦手な文法の一覧：名前が長いので、名前を1行目に全部出して、バーと％を2行目に出す */
.weak-word-list.is-wide .weak-word-row {
  grid-template-columns: 1fr 44px;
  row-gap: 3px;
}

.weak-word-list.is-wide .weak-word-text {
  grid-column: 1 / -1;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

/* ===== 共通の画面の色（2026-10-07） =====
   メニュー・成績・学習履歴・コンセプト・出典などの画面は、ディクテーション（オレンジ）でもライティング（青）でもない、
   共通の色（タイトルと同じ、ハリネズミのとげの茶色）にする。ⓘの説明画面は、モードの色のまま（ディクテーション＝オレンジ、ライティング＝青） */
.stats-overlay {
  --accent: #a9784f;
  --accent-dark: #8b5e3c;
  --accent-soft: #f6ebdf;
}

#dict-info-overlay {
  --accent: #ff7a45;
  --accent-dark: #f4632c;
  --accent-soft: #fff1ea;
}

/* 成績画面の「ディクテーション／ライティング」の切り替え：選んだほうを、そのモードの色にする */
.stats-view-tab[data-view="dictation"].is-active {
  border-color: #ff7a45;
  background: #fff1ea;
  color: #f4632c;
}

/* 学習履歴の「これまでの経験値」の数字は、日ごとのXP・累計XPのグラフと同じ色（stats.js の XP_GRAPH_COLOR） */
.history-total {
  color: #1fa591;
}

/* 答え合わせのあとの未回答は「—」だけ。取り消し線は付けない（2026-10-07） */
.your-answer.is-unanswered {
  text-decoration: none;
}

/* ライティングの説明の、前置きの文（2026-10-08） */
.info-lead {
  margin: 0 0 10px;
  padding: 0 14px;
  font-weight: 500;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text);
}

/* ===== カレンダーの絵を出す演出（2026-10-08の試作。data/celebration.js の CALENDAR_STYLE = "reveal"） =====
   まだ勉強していない日は、スクラッチのように、グレーで隠す。勉強した日は、その日の場所の絵が現れる。 */
.cal-grid.is-reveal .cal-cell.is-covered {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.35) 0 3px, rgba(255,255,255,0) 3px 7px),
    #cfc6b5;
}

.cal-grid.is-reveal .cal-cell.is-revealed {
  background-color: #fbf5ea;
  background-repeat: no-repeat;
}

.cal-grid.is-reveal .cal-cell.is-revealed .cal-day {
  color: #5b4a3a;
  background: rgba(255, 255, 255, 0.5);   /* 絵が暗いところでも、日付が読めるように、小さくてうすい白い下地 */
  border-radius: 4px;
  padding: 0 2px;
  font-size: 0.64rem;
  line-height: 1.25;
  top: 3px;
  left: 4px;
}

.cal-grid.is-reveal .cal-cell.is-covered .cal-day {
  color: #6f6557;
}

/* カレンダーの升目は、隙間なしで、うすい茶色の細い線で区切る（パズル式の見本と同じ線。絵がつながって見えるように。2026-10-08） */
.cal-grid.is-reveal {
  gap: 0;
}

.cal-grid.is-reveal .cal-cell {
  border-radius: 0;
  box-shadow: inset 0 0 0 0.6px rgba(91, 74, 58, 0.35);
}

.cal-grid.is-reveal .cal-dow {
  margin-bottom: 2px;
}

/* 勉強しなかった過ぎた日：同じ絵を、白っぽく、うすく出す */
.cal-grid.is-reveal .cal-cell.is-missed {
  background-color: #fbf5ea;
  background-repeat: no-repeat;
  position: relative;
}

.cal-grid.is-reveal .cal-cell.is-missed::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(251, 245, 234, 0.78);
  box-shadow: inset 0 0 0 0.6px rgba(91, 74, 58, 0.35);
}

.cal-grid.is-reveal .cal-cell.is-missed .cal-day {
  color: #8a7f70;
  z-index: 3;
}

/* 前の月・次の月の日付の升目（絵を出す方式のとき）：日付の数字は出さない（絵だけ、その日の勉強の状態で出す） */
.cal-grid.is-reveal .cal-cell.is-other-month .cal-day {
  display: none;
}

/* 正答率の推移グラフの上の、今の正答率（2026-10-09） */
.trend-now {
  margin: 0 0 4px;
  font-size: 0.85rem;
  color: var(--muted);
}

.trend-now strong {
  font-size: 1.4rem;
  color: var(--accent2);
}

/* 自己ベスト更新のお祝い：更新前の数字は小さくうすく、更新後の数字は大きく強調する（2026-10-09） */
.levelup-level .celebrate-before {
  color: var(--muted);
  font-weight: 700;
}

.levelup-level .celebrate-after {
  display: inline-block;
  font-size: 1.6rem;
  line-height: 1.2;
  font-weight: 800;
  color: var(--accent2);   /* 正答率のグラフと同じ緑 */
  vertical-align: -0.08em;
}

/* コンセプトの画面の、図（2026-10-13）：文字ばかりにならないように、各項目に、小さな図を付ける */
.concept-viz {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 4px 0 10px;
}

.concept-viz-count {
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
}

.cv-num {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--accent-dark);
  line-height: 1.1;
}

.cv-unit {
  font-size: 1rem;
  font-weight: 800;
  color: var(--accent-dark);
}

.cv-note {
  flex-basis: 100%;
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted);
}

.concept-viz-donut svg {
  display: block;
}

.concept-viz-steps {
  gap: 4px;
  padding-bottom: 2px;
}

.cv-step {
  flex: 1 1 0;
  max-width: 62px;
  height: calc(var(--h) + 30px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-radius: 8px 8px 4px 4px;
  background: linear-gradient(180deg, #ffd9c7, #ffb899);
  padding-bottom: 5px;
  box-sizing: border-box;
}

.cv-step span {
  font-size: 0.58rem;
  white-space: nowrap;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  color: #6b3a1f;
}

.cv-step-top {
  background: linear-gradient(180deg, #ff9a6b, #ff7a45);
}

.cv-step-top span {
  color: #fff;
}

/* コンセプト：教科書の文 → 実際の会話（2026-10-13） */
.concept-viz-talk {
  align-items: center;
  gap: 8px;
}

.cv-book {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}

.cv-book span,
.cv-cap {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--muted);
}

.cv-arrow {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--accent-dark);
  flex: 0 0 auto;
}

.cv-chat {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  flex: 1 1 auto;
}

.cv-person {
  position: relative;
  flex: 0 0 auto;
  width: 82px;
  padding-top: 24px;
  display: flex;
  justify-content: center;
}

.cv-person img {
  display: block;
  width: 52px;
  height: auto;
}

.cv-left img {
  transform: scaleX(-1);
}

.cv-bubble {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.56rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ink, #3b3228);
  background: #fff;
  border: 1.5px solid #e2d6bf;
  border-radius: 10px;
  padding: 4px 6px;
}


.cv-cap {
  flex-basis: 100%;
  text-align: center;
}

/* ===== 「レベル」の行を隠したとき（ブックマークモード）に、ⓘの位置がずれないように、升目の場所を決める（2026-10-13） =====
   子の並び：1 レベルのラベル／2 レベルのプルダウン／3 すき間／4 モードのラベル／5 モードのプルダウン／6 ⓘ */
.select-grid > :nth-child(1) { grid-row: 1; grid-column: 1; }
.select-grid > :nth-child(2) { grid-row: 1; grid-column: 2; }
.select-grid > :nth-child(3) { display: none; }
.select-grid > :nth-child(4) { grid-row: 2; grid-column: 1; }
.select-grid > :nth-child(5) { grid-row: 2; grid-column: 2; }
.select-grid > :nth-child(6) { grid-row: 2; grid-column: 3; }

/* 答えを確認しただけ（空欄を1つも入れずに答え合わせを押した）ときの表示。正解の緑・不正解の赤・日本語訳の緑とは別の、落ち着いたベージュ（2026-10-14） */
.result.is-note {
  background: #f1ebe0;
  color: var(--muted);
  font-weight: 700;
}

/* ===== 日本語訳と文法のポイントのウィンドウ（2026-10-14）。背景が暗くなって、真ん中にウィンドウ。×は、ウィンドウの外の右上 ===== */
.note-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  background: rgba(30, 20, 10, 0.55);
}
.note-overlay[hidden] { display: none; }
.note-wrap { position: relative; width: min(100%, 420px); }
.note-window {
  background: #fff;
  border-radius: 18px;
  padding: 16px 16px 14px;
  box-shadow: 0 6px 0 var(--accent);
  color: var(--text);
}
.note-close {
  position: absolute;
  right: -6px;
  top: -16px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.note-tr { font-size: 1rem; font-weight: 700; line-height: 1.6; }
.note-hr { border-top: 1px dashed #eadfca; margin: 10px 0; }
.note-chip {
  display: inline-block;
  background: #f6ead2;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 0.78rem;
  font-weight: 800;
  margin-bottom: 6px;
}
.note-form {
  background: #f1ebe0;
  border-radius: 8px;
  padding: 4px 8px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.86rem;
  line-height: 1.5;
}
.note-meaning { margin-top: 8px; font-size: 0.92rem; font-weight: 800; }
.note-tip { margin-top: 2px; font-size: 0.84rem; line-height: 1.6; }
.note-chunks { font-size: 1.05rem; font-weight: 800; line-height: 1.7; }
.note-tip2 { margin-top: 6px; font-size: 0.86rem; line-height: 1.6; }
.note-slash { color: var(--accent); font-weight: 800; margin: 0 2px; }
.note-en { margin-top: 4px; font-size: 0.95rem; font-weight: 800; line-height: 1.6; color: #3a6db8; }
.note-key { background: #dbe7fa; color: #1f4f9c; border-radius: 4px; padding: 0 3px; }
/* ×を、文字ではなく絵（SVG）にして、円の真ん中に置く（スマホで、文字の×が円とずれて見えたため。2026-10-14） */
.note-close {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}
.note-close svg { display: block; }
.note-close svg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* 音声を読み込み中（電波が悪いとき）の再生ボタン */
.play-button.is-loading { opacity: 0.55; }

/* ===== 操作ボタンを画面の下に固定する（2026-10-15）：文の長さでボタンの位置が動かないように。
   広い画面では、縦に伸びすぎないよう、高さの上限（510px。実測で、一番長い問題でも収まる高さ）で止める ===== */
.app {
  display: flex;
  flex-direction: column;
  min-height: min(100dvh, 510px);
}
#dictation-view:not([hidden]){
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
#dictation-view .bottom-bar{
  margin-top: auto;
}

/* 小さい画面：単語リストを2段に収める（2026-10-15）。ボタンを少し小さく、間をつめる */
@media (max-width: 480px) {
  .word-bank { gap: 6px 5px; }
  .word-bank .word-button {
    min-height: 38px;
    font-size: 0.95rem;
    padding: 4px 9px;
  }}

/* ===== ヘッダー（ロゴ・XP・メニュー）を、低くして、上に固定する（2026-10-15）=====
   解き始めたら、タブの行が、このヘッダーのすぐ下に来る位置までスクロールする（js/app.js の scrollToBottomSoon） */
.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 0 -16px 4px;
  padding: 4px 16px;
  background: var(--bg);
}
.app-header .app-logo img { height: 34px; }
.app-header .icon-button { width: 36px; height: 36px; min-height: 36px; }

/* ロゴの上の余白をつめる（2026-10-15） */
.app { padding-top: 2px; }
.app-header { padding-top: 2px; }

/* 自動スクロール・上に固定するヘッダーはやめた（2026-10-15）。ロゴの高さは小さいまま */
.app-header {
  position: static;
}

/* 答え合わせの前後で、空欄の高さ・行の高さを変えない（2026-10-15）。
   間違いのときの「自分の答え＋正解」の2段の高さを、最初から確保して、文字は下にそろえる */
.sentence .blank {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  min-height: 43px;
}

/* カレンダーの前後の月ボタン：三角を絵（SVG）にして、円の真ん中に置く（2026-10-15） */
.cal-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 0;
}

/* 空欄の幅を、答え合わせの前後で変えない（2026-10-15）。文字の大きさ（em）に連動させず、固定の幅にする。
   長い単語は、これまでどおり、文字を縮めて収める（fitBlankText） */
.sentence .blank {
  width: 5.5rem;
  box-sizing: border-box;
  flex: 0 0 auto;
}

/* 最初から出ている単語は、答え合わせのあとにボタン（意味を見られる）になる。ボタンの標準の余白で、文字が横にずれないよう、
   前後で同じ見た目にそろえる（2026-10-15） */
.given-word {
  padding-left: 0;
  padding-right: 0;
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

/* ロゴの上下の余白をそろえる（2026-10-15。ロゴの絵の見える部分から、上の端と下のタブまで、ともに約8px） */
.app { padding-top: 4px; }
.app-header { margin-bottom: 0; }

/* ===== ディクテーションの下の操作エリア（2026-10-15）：再生 ｜ 答え合わせ（次の問題）を横に並べる。
   答え合わせのあとは、速度ボタンの行が、その上に出る ===== */
#dictation-view .bottom-bar {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
#dictation-view .bottom-bar .skip-button { display: none; }
#dictation-view .bottom-actions {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
#dictation-view .bottom-actions .actions { flex: 1 1 0; }
#dictation-view .dict-play {
  flex: 1 1 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 6px;
  border: none;
  border-radius: 16px;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  box-shadow: 0 4px 0 var(--accent-dark);
  white-space: nowrap;
}
#dictation-view .dict-play:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--accent-dark); }
#dictation-view .dict-play .play-remaining {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  opacity: 0.95;
}
#dictation-view .dict-play:disabled {
  background: #ddd5c4;
  color: #a99d86;
  box-shadow: 0 4px 0 #c9bfa9;
  cursor: not-allowed;
}
#dictation-view .dict-play:disabled .play-remaining { color: #a99d86; }
#dictation-view .dict-play.is-loading { opacity: 0.55; }

/* 答え合わせのあと：「次の問題」は、白地にオレンジの枠（再生のオレンジと、逆の見た目） */
#dictation-view .bottom-actions #next-button {
  background: #fff;
  color: var(--accent);
  border: 2px solid var(--accent);
  box-shadow: 0 4px 0 #f1c9b0;
}

/* 速度ボタンの行：下の操作エリアの上に、横いっぱいに並べる */
#dictation-view .speed-row {
  display: flex;
  gap: 6px;
}
#dictation-view .speed-row[hidden] { display: none; }
#dictation-view .speed-row .speed-button {
  flex: 1 1 0;
  min-height: 0;
  height: 32px;
  width: auto;
  padding: 0;
  border: none;
  border-radius: 10px;
  box-shadow: none;
  background: #f6f1e6;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 700;
}
#dictation-view .speed-row .speed-button.is-selected {
  background: var(--accent-soft);
  color: var(--accent-dark);
}
/* 再生エリアをなくしたので、問題文の枠は、上の角も丸くする */
#dictation-view .sentence { border-radius: 14px; }

/* ===== 5問で1セット：進み具合の丸（2026-10-27）。動かさない（上で動くと気が散るため） ===== */
.set-track {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  height: 20px;
  margin: 2px 4px 0;
}
.set-dots { display: inline-flex; gap: 10px; }
.set-info { font-size: 0.72rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.set-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 2px solid var(--border);
  background: transparent;
}
.set-dot.is-done { background: var(--accent); border-color: var(--accent); }
.set-dot.is-current { border-color: var(--accent); }
.stats-note { font-weight: 400; color: var(--muted); font-size: 0.75rem; }
.concept-viz-speak img { display: block; height: 76px; width: auto; }