@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&family=Shippori+Mincho:wght@500;700&display=swap');

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
@view-transition {
  navigation: auto;
}

body {
  font-family: 'Zen Maru Gothic', sans-serif;
  background: #EFEDE1;
  color: #2B2B24;
  padding: 20px;
  animation: appPageEnter 0.45s ease-out forwards;
}

@keyframes appPageEnter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body.page-exit {
  opacity: 0;
  transform: scale(0.99);
  transition: opacity 0.2s ease-in, transform 0.2s ease-in;
}
.wrap { max-width: 1240px; margin: 0 auto; }
.hb-title { font-family: 'Shippori Mincho', serif; font-size: 26px; font-weight: 700; }

/* タイトル横：ホームへ戻る／はじめからやり直す、の丸SVGアイコンボタン。
   どちらもタイトルと同じ行の右端にまとめて表示する（justify-content: space-betweenで
   タイトルを左、ボタン2つのグループを右端に寄せ、ボタン同士はhb-title-actionsのgapで並べる）。 */
.hb-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.hb-title-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.hb-icon-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  text-decoration: none;
}
.hb-icon-btn svg { width: 100%; height: 100%; display: block; }
.hb-icon-btn .icon-bg {
  fill: #F7F5EC;
  stroke: #2C4F6B;
  stroke-width: 1.5;
  transition: fill 0.15s ease;
}
.hb-icon-btn .icon-glyph { fill: #2C4F6B; transition: fill 0.15s ease; }
.hb-icon-btn:hover .icon-bg { fill: #2C4F6B; }
.hb-icon-btn:hover .icon-glyph { fill: #F7F5EC; }
#resetGameBtn .icon-bg { stroke: #9a5a4a; }
#resetGameBtn .icon-glyph { fill: #9a5a4a; }
#resetGameBtn:hover .icon-bg { fill: #9a5a4a; }
#resetGameBtn:hover .icon-glyph { fill: #F7F5EC; }

.hb-panel {
  border: 1px solid #c9c0a8;
  background: #F7F5EC;
  padding: 16px 20px;
  margin-bottom: 16px;
}

/* フェーズ2：PC向け2カラムレイアウト。左＝HEXマップ中心（広め）、右＝太陽・コントロール・図鑑（コンパクト） */
.layout {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 20px;
  align-items: start;
}
.layout-left, .layout-right { min-width: 0; } /* grid内でのはみ出し防止 */
.layout-left .hb-panel:last-child,
.layout-right .hb-panel:last-child { margin-bottom: 0; }

/* フェーズ4：右カラムは縦に間延びしないよう、パネルの余白を少し詰める */
.layout-right .hb-panel { padding: 14px 18px; margin-bottom: 12px; }

@media (max-width: 900px) {
  .wrap { max-width: 760px; }
  .layout { grid-template-columns: 1fr; }
  /* フェーズ●：スマホ幅では左右2カラムを崩して1列にするだけでなく、
     表示順も「空模様→時刻スピード→HEXパネル→日誌系パネル」に並べ替える。
     layout-left/layout-rightをdisplay:contentsにしてボックスとしては消し、
     中の各パネル（.layoutの直接のグリッドアイテムになる）にorderをつけて並び替える。 */
  .layout-left, .layout-right { display: contents; }
  .sky-panel { order: 1; }
  .time-controls-panel { order: 2; }
  .hex-main-panel { order: 3; }
  .diary-tabs-panel { order: 4; }
  /* .layout-left .hb-panel:last-child は元々「左カラム内で最後だから余白不要」という
     desktop向けのルールだが、モバイルでは並び替えによりHEXパネルの直後に
     日誌系パネルが続くため、他パネルと同じ下マージンに戻す必要がある
     （同じ詳細度になるよう .layout-left .hb-panel.hex-main-panel で指定し、
     後方の宣言として優先させている）。 */
  .layout-left .hb-panel.hex-main-panel { margin-bottom: 16px; }
}

#skySvg { width: 100%; height: auto; display: block; background: linear-gradient(#8fc7e8, #e9f4fa); }

.sky-info {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 16px;
  margin-top: 12px;
  font-size: 13px;
}
.sky-info .label { color: #6b6552; }
.sky-info > div { white-space: nowrap; }
.sky-info span:not(.label) { font-variant-numeric: tabular-nums; }

/* フェーズ2：左カラムでは横幅に余裕があるため、マップを大きめ・情報パネルを添える形にする */
.grid-row { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
#gridSvg { width: 100%; max-width: 520px; height: auto; flex: 1 1 340px; }

/* HEXマス敷地パネル左上の「◯年目◯月◯日」表記＋今日のおすすめ */
.hex-panel-header { margin-bottom: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hex-year-date {
  display: inline-block;
  font-family: 'Shippori Mincho', serif;
  font-size: 14px;
  font-weight: 700;
  color: #2B2B24;
  background: #EFEDE1;
  border: 1px solid #c9c0a8;
  padding: 4px 12px;
  /* フェーズ●：クリックしてプレイサマリーを開けることが分かるように */
  cursor: pointer;
}
.hex-year-date:hover { background: #E4E0CC; }

/* フェーズ●：プレイサマリーの種・生物ごとの内訳リスト（旧リスト表示。表形式に変更した後も、
   他のモーダルで再利用する可能性を考えて残してある） */
.play-summary-list { margin: 4px 0 12px; padding-left: 20px; }
.play-summary-list li { margin-bottom: 4px; }

/* フェーズ●：プレイサマリーの植物タブ／生物タブ切り替えボタン */
.play-summary-tabs { display: flex; gap: 8px; margin: 10px 0 14px; }
.play-summary-tab-btn.active { background: #4F7A45; color: #fff; border-color: #3c5f36; }

/* フェーズ●：プレイサマリーの上位タブ（現在の姿／ビオトープの歴史）。植物／生物の下位タブ
   （緑）とは違う色にして、階層が違うタブだと分かるようにする。下にボーダーを引いて
   区切りを目立たせている。 */
.play-summary-toplevel-tabs { padding-bottom: 12px; margin-bottom: 4px; border-bottom: 2px solid #c9c0a8; }
.play-summary-toplevel-btn { font-weight: 700; }
.play-summary-toplevel-btn.active { background: #2C4F6B; color: #F7F5EC; border-color: #1f3a50; }

/* フェーズ●：プレイサマリーの一覧表（すべての種を出し、該当なしは「-」で表示する） */
.play-summary-table-wrap { overflow-x: auto; }
.play-summary-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.play-summary-table th, .play-summary-table td {
  border: 1px solid #d8d2bd; padding: 6px 8px; text-align: center; white-space: nowrap;
}
.play-summary-table th { background: #EFEDE1; font-weight: 700; }
.play-summary-table td:first-child, .play-summary-table th:first-child { text-align: left; }
.play-summary-table tbody tr:nth-child(even) { background: #FAF9F3; }
.hex-today-recommend { flex: 1 1 auto; font-size: 12px; color: #4F7A45; }
.hex-today-recommend.no-recommend { color: #8a8368; }
.hex-tile { cursor: pointer; }
.hex-tile:hover { stroke: #2B2B24; stroke-width: 2; }

.tile-panel { flex: 1 1 240px; min-width: 220px; font-size: 14px; line-height: 1.9; }
.tile-panel .muted { color: #8a8368; }
.tile-panel .divider { margin-top: 12px; padding-top: 12px; border-top: 1px solid #c9c0a8; }
/* フェーズ●：タイル選択パネルの「名前・状態・説明」＋段階イラストの2列レイアウト */
.detail-2col { display: flex; align-items: center; gap: 10px; }
.detail-2col-main { flex: 1 1 auto; min-width: 0; }
.detail-2col-image { flex: 0 0 auto; width: 56px; }
.detail-2col-image img {
  display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain;
  background: #EFEDE1; border: 1px solid #c9c0a8; border-radius: 4px;
}
/* フェーズ●：タイル詳細パネルでも、未発見種はイラストのかわりに？マークを出す（保険） */
.detail-2col-image-mask {
  display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 1 / 1;
  background: #DAD4BE; border: 1px dashed #9a9273; border-radius: 4px;
  font-size: 18px; font-weight: 700; color: #8a8368;
}
.fail-reason { margin-top: 6px; color: #9a5a4a; }
.sow-hint { font-size: 12px; color: #8a8368; margin-top: 6px; }
.host-note { margin-top: 6px; font-size: 12px; color: #4F7A45; }
.dormant-tag { font-size: 12px; color: #6b6552; }

.hb-btn {
  font-family: 'Zen Maru Gothic', sans-serif;
  border: 1px solid #2C4F6B;
  background: #F7F5EC;
  color: #2B2B24;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 14px;
}
.hb-btn.active { background: #2C4F6B; color: #F7F5EC; }
.hb-btn.sow { border-color: #4F7A45; }
.hb-btn.sow:hover { background: #4F7A45; color: #F7F5EC; }
.hb-btn.clear { border-color: #9a5a4a; }
.hb-btn:disabled { opacity: 0.4; cursor: default; }

/* フェーズ10：マス条件の答え合わせを隠す「ヒント」ボタン */
.label-with-hint { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hb-btn.hint { border-color: #8C7BA6; padding: 2px 10px; font-size: 11px; }
.hb-btn.hint:hover { background: #8C7BA6; color: #F7F5EC; }
.hint-box { margin-bottom: 8px; }

/* フェーズ2：右カラムはコンパクトに保ちたいので、コントロール周りの余白を詰める */
.controls-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.controls-row .toggle-btn { margin-left: auto; padding-left: 10px; padding-right: 10px; }
.slider-group { margin-top: 2px; }
.slider-block { margin-bottom: 10px; }
.slider-block:last-child { margin-bottom: 0; }
.slider-label { font-size: 13px; color: #6b6552; margin-bottom: 4px; }
input[type=range] { accent-color: #2C4F6B; width: 100%; }

/* スライダーの区切り目印（日付：1/4/7/10月、時刻：6/12/18/24時） */
.slider-wrap { position: relative; }
.slider-ticks { position: relative; height: 16px; margin-top: 2px; }
.slider-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 10px;
  color: #6b6552;
  white-space: nowrap;
}
.slider-tick::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -5px;
  width: 1px;
  height: 6px;
  background: #9a9478;
  transform: translateX(-50%);
}

.legend { display: flex; gap: 14px; margin-top: 18px; font-size: 12px; flex-wrap: wrap; align-items: center; }

/* HEXマス＋タイル情報の下に横長で凡例をまとめて並べるエリア */
/* フェーズ●：上下2枚のマップを切り替えるボタンの行 */
.map-switch-row { display: flex; justify-content: center; margin: 6px 0; }
.map-switch-row-top { margin-bottom: 10px; }
.map-switch-row-bottom { margin-top: 10px; }
.hb-btn.map-nav-btn { font-size: 12px; padding: 4px 12px; }

.legend-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #c9c0a8;
}
.legend-row .legend { margin-top: 0; }
.legend .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 5px; }
.badge-swatch {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; font-size: 11px; font-weight: 700;
  margin-right: 5px; color: #2B2B24; line-height: 1; flex: none;
  /* フェーズ●：六角形バッジ（果／種／球／裸。中身がSVGで文字のベースラインを持たない）は、
     デフォルトの vertical-align: baseline だと「中身にベースラインがない要素の
     ベースライン＝要素いちばん下の辺」とみなされ、丸／四角バッジ（中身が文字で、文字自体の
     ベースラインが基準になる）より周囲の文字のベースラインより上寄りにずれて見えていた。
     形によらずバッジの高さの中央で周囲の文字とそろえたいので、明示的にmiddleにする
     （.swatchなど他の凡例ドットと同じ指定）。 */
  vertical-align: middle;
}
/* 形は分類の軸で決まる：子葉＝丸、花のつくり＝四角、実のでき方＝六角形（SVG） */
.badge-shape-circle { border-radius: 50%; border: 1.5px solid #2B2B2460; background: #F7F5EC; }
.badge-shape-square { border-radius: 3px; border: 1.5px solid #2B2B2460; background: #F7F5EC; }
.badge-shape-hex { width: 18px; height: 18px; }
.badge-shape-hex svg { width: 18px; height: 18px; display: block; }
.badge-shape-hex polygon { fill: #F7F5EC; stroke: #2B2B2460; stroke-width: 1.5; }
.badge-shape-hex text { font-size: 10px; font-weight: 700; text-anchor: middle; dominant-baseline: central; fill: #2B2B24; }

/* 色は値そのもので決まる：単子葉＝黄土色／双子葉＝緑（子葉の丸バッジ） */
.badge-swatch[data-badge="単"] { border-color: #B58A3D; background: #F3ECDD; color: #7a5a1f; }
.badge-swatch[data-badge="双"] { border-color: #4F7A45; background: #E7EFE1; color: #385c30; }
/* 合弁花＝ピンク／離弁花＝深い赤紫／その他＝紫がかったグレー（花のつくりの四角バッジ） */
.badge-swatch[data-badge="合"] { border-color: #C97B9E; background: #F8EAF0; color: #8a4a63; }
.badge-swatch[data-badge="離"] { border-color: #B5456B; background: #F6E1E8; color: #7a2f47; }
.badge-swatch[data-badge="他"] { border-color: #8C7BA6; background: #EDE9F3; color: #5c4d78; }
/* 果実＝茶／種子のみ＝濃い茶／球根＝紫（実のでき方の六角形バッジ） */
.badge-swatch[data-badge="果"] polygon { fill: #F6E8DA; stroke: #B5652D; }
.badge-swatch[data-badge="果"] text { fill: #7a431d; }
.badge-swatch[data-badge="種"] polygon { fill: #EFE3D3; stroke: #8C5A2B; }
.badge-swatch[data-badge="種"] text { fill: #5c3a1b; }
.badge-swatch[data-badge="球"] polygon { fill: #E9E1ED; stroke: #6B4C7A; }
.badge-swatch[data-badge="球"] text { fill: #45304f; }
/* フェーズ11：裸子植物（マツ・イチョウなど、子房がなく実にならない種）の実のでき方バッジ */
.badge-swatch[data-badge="裸"] polygon { fill: #E3E9DD; stroke: #5C6B4A; }
.badge-swatch[data-badge="裸"] text { fill: #3a4530; }
.swatch-row { display: flex; gap: 14px; margin-top: 18px; font-size: 13px; }
.swatch { width: 14px; height: 14px; display: inline-block; border: 1px solid #2B2B2440; margin-right: 6px; vertical-align: middle; }

.panel-heading { font-family: 'Shippori Mincho', serif; font-size: 16px; margin-bottom: 12px; }

/* フェーズ◯：図鑑パネル＝ラベルとボタン2つを横並びにする */
.zukan-panel-label { margin-bottom: 0; flex: 0 0 auto; white-space: nowrap; }

/* フェーズ◯：空模様パネルの折りたたみ */
.panel-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.panel-toggle-row .panel-heading { margin-bottom: 0; }
.sky-panel.collapsed #skySvg { display: none; }
.sky-panel.collapsed .sky-info-extra { display: none; }
.sky-panel.collapsed .sky-info { margin-top: 0; }

.filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; }
.filter-group .filter-label { color: #6b6552; min-width: 74px; }
.filter-btn {
  font-family: 'Zen Maru Gothic', sans-serif;
  border: 1px solid #b9b09a;
  background: #F7F5EC;
  color: #2B2B24;
  padding: 3px 10px;
  cursor: pointer;
  font-size: 12px;
}
.filter-btn.active { background: #2C4F6B; color: #F7F5EC; border-color: #2C4F6B; }

/* フェーズ4：図鑑タブは右カラムの狭い幅に置かれるため、カード最小幅と余白を少し詰める */
.zukan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin-top: 14px; }
.zukan-card {
  border: 1px solid #c9c0a8;
  background: #EFEDE1;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.6;
}
.zukan-card.selected { border-color: #2C4F6B; border-width: 2px; background: #E6EBEF; }
.zukan-card .zukan-name { font-size: 14px; font-weight: 700; margin-bottom: 2px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.zukan-card .zukan-name .badge-swatch { margin-right: 0; }
.zukan-card .zukan-tags { color: #4b4636; }
.zukan-card .zukan-sow { color: #6b6552; }
.zukan-card .zukan-host { color: #4F7A45; margin-top: 2px; }
.zukan-card .zukan-out { color: #9a5a4a; font-weight: 700; }
/* フェーズ34：図鑑カード上部に並べるライフサイクルのイラスト（種→発芽→成長→花） */
.zukan-stage-icons {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #c9c0a8;
}
.zukan-stage-icon {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.zukan-stage-icon img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #EFEDE1;
  border: 1px solid #c9c0a8;
  border-radius: 4px;
}
.zukan-stage-icon span {
  font-size: 10px;
  color: #8a8368;
  margin-top: 2px;
}
/* フェーズ●：クヌギ・カブトムシ・クワガタなど、ビオトープでまだ見つけていない種の
   図鑑イラストを？マークでマスクしておくためのプレースホルダー（画像と同じ枠サイズ） */
.zukan-stage-icon-mask {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #DAD4BE;
  border: 1px dashed #9a9273;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 700;
  color: #8a8368;
}
.zukan-stage-icon-masked span { color: #9a9273; }
/* フェーズ15：所持数と購入ボタンを1行にまとめて、カードが縦長になりすぎないようにする */
.zukan-stock-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.zukan-stock-row .zukan-tags { margin: 0; }
.hb-btn.buy { border-color: #B5652D; padding: 3px 10px; font-size: 12px; white-space: nowrap; }
.hb-btn.buy:hover:not(:disabled) { background: #B5652D; color: #F7F5EC; }

/* フェーズ6：失敗理由の解説 */
.explain-note {
  margin-top: 6px; font-size: 12px; color: #4b4636;
  background: #EFEDE1; padding: 6px 8px; border-left: 3px solid #2C4F6B;
}

/* フェーズ6：観察日記 */
.diary-log { max-height: 240px; overflow-y: auto; font-size: 13px; line-height: 1.8; }
.diary-entry { padding: 4px 0; border-bottom: 1px dashed #c9c0a8; }
.diary-entry:last-child { border-bottom: none; }
.diary-date { color: #6b6552; margin-right: 8px; font-size: 12px; }

/* フェーズ●：日誌クリックでのマスジャンプ機能 */
.diary-entry-clickable { cursor: pointer; border-radius: 4px; transition: background-color 0.15s ease; }
.diary-entry-clickable:hover,
.diary-entry-clickable:focus-visible { background-color: #00000010; outline: none; }
.diary-jump-icon { opacity: 0.6; font-size: 0.85em; }

.tile-flash { animation: tileFlashPulse 1s ease-out 2; }
@keyframes tileFlashPulse {
  0%   { stroke: #E8944A; stroke-width: 4; }
  100% { stroke: #2C4F6B; stroke-width: 2.5; }
}

/* フェーズ51：クイズ（分類クイズ＋確認テストの問題バンクを混ぜた一問一答） */
/* フェーズ●：正解数・所持ポイントの行が折り返さないよう1行固定にする。
   パネル幅が特に狭い場合は横スクロールで対応する（文言を削らないため）。 */
.quiz-score { font-size: 13px; color: #6b6552; margin-bottom: 10px; white-space: nowrap; overflow-x: auto; }
.quiz-question { font-size: 15px; margin-bottom: 14px; line-height: 1.6; }
.quiz-choices { display: flex; flex-direction: column; gap: 8px; }
/* フェーズ●：選択肢はどの問題も基本的に2列で並べる */
.quiz-choices.quiz-choices-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.quiz-choice { text-align: left; }
/* 答え合わせ前：複数選択問題でトグル選択している選択肢をひと目でわかるようにする */
.quiz-choice.selected { border-color: #2C4F6B; border-width: 2px; background: #E6EBEF; }
.quiz-choice.correct { background: #4F7A45; color: #F7F5EC; border-color: #4F7A45; border-width: 2px; font-weight: 700; }
.quiz-choice.incorrect { background: #9a5a4a; color: #F7F5EC; border-color: #9a5a4a; border-width: 2px; font-weight: 700; }
/* フェーズ27：答え合わせ後、選ばれなかった不正解の選択肢はあえて目立たなくして、
   正解（緑）／自分が選んだ不正解（赤）の2色だけに視線が集まるようにする */
.quiz-choice.quiz-choice-muted { opacity: 0.45; }
.quiz-feedback {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 2px;
  border: 1px solid;
}
.quiz-feedback.correct { color: #385c30; background: #E7EFE1; border-color: #4F7A45; }
.quiz-feedback.incorrect { color: #7a2f2a; background: #F6E1DE; border-color: #9a5a4a; }
.quiz-feedback-headline { font-size: 16px; font-weight: 700; }
.quiz-feedback-sub { font-size: 13px; margin-top: 4px; }

/* フェーズ33：タイル詳細パネルで「種をまく」と「購入」を横並びにする行 */
.sow-buy-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sow-buy-row .hb-btn.sow { flex: 1 1 auto; }
.sow-buy-row .hb-btn.buy { flex: 0 0 auto; white-space: nowrap; }

/* フェーズ17：HEXマスのたねをまくパネルで種類を←→切り替えるための行 */
.species-switch-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.species-switch-name {
  font-size: 14px;
  font-weight: 700;
  min-width: 90px;
  text-align: center;
}
.hb-btn.arrow {
  padding: 4px 10px;
  font-size: 14px;
  line-height: 1;
}

/* フェーズ16：図鑑を開くボタン（右カラムはコンパクトに保ち、中身はモーダルで見せる） */
.zukan-open-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.hb-btn.zukan-open-btn { flex: 1 1 160px; }

/* フェーズ●：図鑑タブ本体（植物図鑑／生物図鑑の切り替え、1件表示＋←→、一覧表示ボタン） */
.zukan-category-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.hb-btn.zukan-category-btn { flex: 1 1 140px; }
.zukan-list-open-row { display: flex; justify-content: flex-end; margin-bottom: 10px; }
#zukanListBtn { font-size: 12px; padding: 4px 12px; }
.zukan-single-row { display: flex; align-items: flex-start; gap: 8px; }
.hb-btn.zukan-nav-btn { flex: 0 0 auto; align-self: center; padding: 8px 10px; font-size: 16px; }
.zukan-single-body { flex: 1 1 auto; min-width: 0; }
.zukan-single-slot .zukan-card { margin: 0; }
.zukan-single-slot .muted { padding: 8px 10px; }
.zukan-position-text { text-align: center; font-size: 11px; color: #8a8368; margin-top: 6px; }

/* フェーズ16：図鑑モーダル */
/* フェーズ●：複数タブ対策（読み取り専用モード） */
.tab-readonly-banner {
  position: sticky;
  top: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: #F4E3C1;
  border-bottom: 2px solid #B5652D;
  padding: 8px 16px;
  font-size: 13px;
  color: #6b4423;
}
.tab-readonly-banner[hidden] { display: none; }
.tab-readonly-banner-text { flex: 1 1 260px; }
.tab-readonly-blocker {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: rgba(43, 43, 36, 0.02); /* ほぼ透明。クリックだけを吸収して操作を防ぐ */
  cursor: not-allowed;
}
.tab-readonly-blocker[hidden] { display: none; }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: #2B2B2470;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
}
.modal-overlay[hidden] { display: none; }
/* フェーズ●：このタブで操作するかどうかの確認モーダルだけは、読み取り専用ブロッカー（z-index:250）
   より手前で押せるようにしたい。以前はこのルールを.modal-overlayの定義より前に置いていたため、
   詳細度が同じ（クラス1つ）どうしでは後にあるルールが勝つというCSSの規則により、
   後ろにある.modal-overlayのz-index:100で上書きされてしまい、実際の重なりはブロッカーより
   下になっていた（＝確認モーダルのボタンがブロッカーに覆われ、not-allowedカーソルのまま
   クリックできなかった）。.modal-overlayの定義より後ろに置くことで、意図どおり
   z-index:310が効くようにする。 */
.tab-takeover-confirm-overlay { z-index: 310; }
.modal-box {
  background: #F7F5EC;
  border: 1px solid #c9c0a8;
  width: 100%;
  max-width: 640px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid #c9c0a8;
  flex: none;
}
.modal-title { font-family: 'Shippori Mincho', serif; font-size: 18px; font-weight: 700; }
.modal-close-btn {
  font-family: 'Zen Maru Gothic', sans-serif;
  border: 1px solid #b9b09a;
  background: #F7F5EC;
  color: #2B2B24;
  width: 28px;
  height: 28px;
  line-height: 1;
  cursor: pointer;
  font-size: 14px;
}
.modal-close-btn:hover { background: #9a5a4a; color: #F7F5EC; border-color: #9a5a4a; }
.modal-body { padding: 16px 20px; overflow-y: auto; }
.modal-pane { display: none; }
.modal-pane.active { display: block; }

/* フェーズ●：プレイサマリーは6列の表を扱うため、他のモーダルより少し幅広にする */
#playSummaryOverlay .modal-box { max-width: 760px; }

/* 起動時の「続きから／はじめから」選択オーバーレイ */
.start-screen-body { text-align: center; }
.start-screen-buttons { display: flex; gap: 12px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }

/* フェーズ●：モーダル下部の操作ボタン行（キャンセル／実行、など） */
.modal-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }

/* フェーズ●：起動時「あそびかた」ツールチップの箇条書き */
.how-to-play-list {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.how-to-play-list li {
  font-size: 14px;
  line-height: 1.5;
  color: #2B2B24;
  background: #F4E3C1;
  border: 1px solid #e2d3ab;
  border-radius: 6px;
  padding: 10px 12px;
}

/* フェーズ●：「クイズの正誤記録もリセットする」のオン・オフを選ぶトグルスイッチ。
   デフォルトはオフ（＝クイズの記録は残す）。 */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 4px;
  cursor: pointer;
  user-select: none;
}
.toggle-row-label { font-size: 13px; color: #2B2B24; }
.toggle-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: 0 0 auto; }
.toggle-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.toggle-slider {
  position: absolute;
  inset: 0;
  background: #d8d0b8;
  border: 1px solid #b9b09a;
  border-radius: 11px;
  transition: background 0.15s ease;
}
.toggle-slider::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 2px;
  top: 2px;
  background: #F7F5EC;
  border-radius: 50%;
  transition: transform 0.15s ease;
}
.toggle-switch input:checked + .toggle-slider { background: #9a5a4a; border-color: #9a5a4a; }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); }
.toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid #2C4F6B; outline-offset: 2px; }

/* フェーズ2：タブ切り替え（観察日記／分類クイズ、植物図鑑／昆虫図鑑で共通利用） */
.tab-buttons { display: flex; gap: 8px; margin-bottom: 14px; }
.tab-btn {
  font-family: 'Zen Maru Gothic', sans-serif;
  border: 1px solid #b9b09a;
  background: #F7F5EC;
  color: #2B2B24;
  padding: 6px 18px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}
.tab-btn.active { background: #2C4F6B; color: #F7F5EC; border-color: #2C4F6B; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }