:root {
  --bg: #fffaf0;
  --ink: #3d3a35;
  --muted: #8a8378;
  --accent: #ff8c42;
  --accent-dark: #e0702a;
  --panel: #ffffff;
  --sea: #7ec8f0;
  --land: #c8e6a0;
  --line: #8b5a2b;
  --warn-bg: #fff1d6;
  --radius: 16px;
  font-family: "Hiragino Maru Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", "Meiryo", sans-serif;
  color: var(--ink);
  background: var(--bg);
}

* { box-sizing: border-box; }

/* iPad で、ボタンを続けて押したときに画面が拡大されないように。押したときの灰色の影も消す */
button,
a {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
}

.app {
  display: grid;
  grid-template-rows: 60fr 40fr;
  height: 100vh;
  height: 100dvh;
}

/* ---- 地図 ---- */

.map-area {
  position: relative;
  min-height: 0;
  /* 地図の幅で、案内の文言の置き場所を決める（下の @container） */
  container-type: inline-size;
}

.map {
  position: absolute;
  inset: 0;
}

/* 地図の上の段：案内の文言（左・まんなか）と、切り替え（右上）。
   地図をさわれるよう、すき間はタップを通す */
.map-top {
  position: absolute;
  z-index: 1000;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  pointer-events: none;
}

.guide {
  justify-self: center;
  margin: 0;
  padding: 10px 20px;
  max-width: 100%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  font-size: 1.15rem;
  font-weight: bold;
  text-align: center;
  line-height: 1.5;
  /* ことばの途中で折り返さず、空白で折り返す */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 地図の幅が狭いときは、案内の文言を右上の切り替えの下に置く */
@container (max-width: 719px) {
  .map-top { grid-template-columns: minmax(0, 1fr); }
  .map-tools { justify-self: end; }
  .guide { grid-row: 2; font-size: 1.05rem; }
}

/* スマホのように、もっと狭いときは、切り替えを1列におさめるため、絵と「あり／なし」の文字を消す
   （スイッチのつまみの位置と、ボタンの色で、えらんでいる方がわかる） */
@container (max-width: 480px) {
  .tool-switch { padding-right: 8px; }
  .tool-switch-state,
  .basemap-toggle span[aria-hidden="true"] { display: none; }
  .basemap-toggle button { padding: 0 10px; }
}

/* 右上の切り替え（ふりがな、ちず ⇄ しゃしん） */
.map-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  pointer-events: auto;
}

.tool-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px 0 16px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
}

.tool-switch:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.tool-switch-track {
  position: relative;
  flex: none;
  width: 40px;
  height: 24px;
  border-radius: 999px;
  background: #d8d2c8;
  transition: background 0.2s;
}

.tool-switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s;
}

.tool-switch[aria-checked="true"] .tool-switch-track { background: var(--accent); }
.tool-switch[aria-checked="true"] .tool-switch-knob { transform: translateX(16px); }

.tool-switch-state {
  min-width: 2em;
  font-size: 0.9rem;
  color: var(--muted);
}

/* ちず ⇄ しゃしん：2つのボタンのうち、えらんでいる方に色をつける */
.basemap-toggle {
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.basemap-toggle button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 12px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
}

.basemap-toggle button[aria-pressed="true"] {
  background: var(--accent);
  color: #fff;
}

.basemap-toggle button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* 画面の文言のふりがな（HTML の <ruby>） */
.guide rt,
.message rt,
.credit rt,
.debug summary rt,
.leaflet-control-attribution rt {
  font-size: 0.55em;
  font-weight: normal;
}

.reset {
  position: absolute;
  z-index: 1000;
  bottom: max(16px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  min-width: 160px;
  min-height: 52px;
  padding: 0 24px;
  white-space: nowrap;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 1.15rem;
  font-weight: bold;
  box-shadow: 0 3px 0 var(--accent-dark), 0 4px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.reset:active {
  transform: translate(-50%, 2px);
  box-shadow: 0 1px 0 var(--accent-dark);
}

.flag-icon {
  background: none;
  border: none;
  cursor: grab;
}

.flag-icon.leaflet-drag-target,
.flag-icon:active { cursor: grabbing; }

/* 動かしている旗を少し大きく見せる */
.flag-icon.leaflet-drag-target svg {
  transform: scale(1.15);
  transform-origin: 7px 45px;
}

/* 拡大・縮小のボタン（右下）。指で押しやすい大きさに */
.leaflet-bar a,
.leaflet-touch .leaflet-bar a {
  width: 44px;
  height: 44px;
  line-height: 44px;
  font-size: 24px;
}

.leaflet-bottom.leaflet-right .leaflet-control-zoom {
  margin-right: max(10px, env(safe-area-inset-right));
}

/* ---- 断面 ---- */

.profile-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 10px 12px 6px;
  overflow-y: auto;
}

.message {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--warn-bg);
  font-size: 1.1rem;
  font-weight: bold;
  text-align: center;
}

.message[hidden] { display: none; }

.message p { margin: 0; }

.retry {
  min-height: 44px;
  padding: 0 18px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: bold;
  box-shadow: 0 3px 0 var(--accent-dark);
  cursor: pointer;
}

.retry:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--accent-dark);
}

.retry[hidden] { display: none; }

.chart {
  position: relative;
  /* 140px（断面の絵）＋ 24px（地形の種類の帯）。小さい画面でも、帯のぶん山がつぶれないように */
  flex: 1 0 164px;
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
  touch-action: pan-y;
}

/* まだ線がないとき */
.chart:empty::before {
  content: "ここに でこぼこの えが でるよ";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  color: var(--muted);
  font-weight: bold;
  text-align: center;
}

/* 知らせ（エラーなど）が出ているときは、案内の文字を出さない */
.message:not([hidden]) + .chart:empty::before { content: none; }

/* 旗を動かしている間は、古い断面をうすくする */
.chart.is-stale { opacity: 0.35; transition: opacity 0.2s; }

/* 読み込み中のキャラ：でこぼこの上を、虫めがねを持って、はねながら進む */
.loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  background: linear-gradient(#e3f6ff, #fff);
}

.loader-pic {
  width: min(380px, 90%);
  height: auto;
  max-height: 70%;
  overflow: visible;
}

.loader-ground { fill: #b5dc86; }

.loader-walk { animation: loader-walk 3.2s linear infinite; }
.loader-hop { animation: loader-hop 0.4s ease-in-out infinite alternate; }

.loader-body {
  fill: #ffd84d;
  stroke: var(--accent-dark);
  stroke-width: 2.5;
}

.loader-eye { fill: var(--ink); }

.loader-mouth,
.loader-glass {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
}

.loader-glass { stroke: #8b5a2b; stroke-width: 3; }

.loader-lens {
  fill: rgba(255, 255, 255, 0.7);
  stroke: #8b5a2b;
  stroke-width: 2;
}

.loader-text {
  margin: 0;
  font-size: 1.05rem;
  font-weight: bold;
  color: var(--ink);
}

.loader-text::after {
  content: "";
  display: inline-block;
  width: 1.5em;
  text-align: left;
  animation: loader-dots 1.2s steps(4) infinite;
}

/* 地面の線にそって進む（でこぼこの形に合わせた高さ） */
@keyframes loader-walk {
  0% { transform: translate(-20px, 60px); }
  12.5% { transform: translate(30px, 48px); }
  25% { transform: translate(60px, 52px); }
  37.5% { transform: translate(90px, 50px); }
  50% { transform: translate(120px, 44px); }
  62.5% { transform: translate(150px, 38px); }
  75% { transform: translate(180px, 34px); }
  87.5% { transform: translate(210px, 44px); }
  100% { transform: translate(260px, 60px); }
}

@keyframes loader-hop {
  from { transform: translateY(0); }
  to { transform: translateY(-14px); }
}

@keyframes loader-dots {
  0% { content: ""; }
  25% { content: "・"; }
  50% { content: "・・"; }
  75% { content: "・・・"; }
}

/* 動きをへらす設定のときは、キャラを止める（文言は出す） */
@media (prefers-reduced-motion: reduce) {
  .loader-walk { animation: none; transform: translate(120px, 44px); }
  .loader-hop,
  .loader-text::after { animation: none; }
}

.chart-svg {
  display: block;
}

/* 絵本風の断面（js/profile.js が描く SVG） */

.pic-sun-glow { fill: #fff3b0; opacity: 0.55; }
.pic-sun { fill: #ffd84d; }
.pic-cloud { fill: #fff; opacity: 0.85; }

.pic-grid line {
  stroke: rgba(255, 255, 255, 0.7);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}

.pic-land-edge {
  fill: none;
  stroke: rgba(70, 48, 28, 0.6);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.pic-wave {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.9;
}

.pic-wave-low { opacity: 0.4; }

.pic-label,
.pic-sea-label,
.pic-axis text {
  font-size: 11px;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.pic-label { fill: #4a5a66; }

.pic-sea-label {
  fill: #1f6fa8;
  font-size: 13px;
  font-weight: bold;
}

.pic-axis line { stroke: var(--muted); stroke-width: 1; }

.pic-axis text {
  fill: var(--muted);
  stroke: none;
}

.pic-bubble-body {
  fill: #fff;
  stroke: var(--accent);
  stroke-width: 2.5;
}

.pic-bubble-tail {
  fill: #fff;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linejoin: round;
}

.pic-bubble text {
  fill: var(--ink);
  font-weight: bold;
}

/* 名前（山・川・海）と、ふりがな */

.pic-ruby {
  fill: #6b5f52;
  font-weight: normal;
}

.pic-name text { font-weight: bold; }

.pic-name-peak .pic-bubble-body,
.pic-name-peak .pic-bubble-tail {
  stroke: #9a6b43;
  stroke-width: 2;
}

.pic-name-pole {
  stroke: #5b4636;
  stroke-width: 2;
  stroke-linecap: round;
}

.pic-name-flag { fill: #f0544f; }

.pic-name-river-body {
  fill: #e3f5ff;
  stroke: #4aa8e0;
  stroke-width: 2;
}

.pic-name-river text { fill: #1f6fa8; }
.pic-name-river .pic-ruby { fill: #3b86b8; }

.pic-name-river-line {
  stroke: #4aa8e0;
  stroke-width: 1.5;
  stroke-dasharray: 2 2;
}

.pic-name-river-dot {
  fill: #4aa8e0;
  stroke: #fff;
  stroke-width: 2;
}

.pic-name-water text {
  fill: #1f6fa8;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.pic-name-water .pic-ruby { fill: #2c7cb4; }

/* 地形の種類の帯（地面の下） */
.pic-band-sea { fill: #4fa3dd; }
.pic-band-none { fill: #e7e5e1; }

.pic-band-label text {
  fill: #4b3f33;
  font-weight: bold;
}

.pic-band-label .pic-ruby {
  fill: #6b5f52;
  font-weight: normal;
}

/* 広い地形の名前（上の段） */
.pic-area { --area-color: #6f9a4a; }
.pic-area-mountain { --area-color: #8a6440; }
.pic-area-hill { --area-color: #9a8540; }
.pic-area-upland { --area-color: #c98a2a; }
.pic-area-lowland { --area-color: #4f8f3c; }

.pic-area-line {
  fill: none;
  stroke: var(--area-color);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pic-area-body {
  fill: rgba(255, 255, 255, 0.92);
  stroke: var(--area-color);
  stroke-width: 1.5;
}

.pic-area text {
  fill: #3d3a35;
  font-weight: bold;
}

.pic-area .pic-ruby {
  fill: #6b5f52;
  font-weight: normal;
}

.pic-hit {
  fill: transparent;
  cursor: crosshair;
}

.pic-cursor line {
  stroke: #fff;
  stroke-width: 2;
  stroke-dasharray: 4 3;
}

.pic-cursor circle {
  fill: #ffd84d;
  stroke: var(--accent-dark);
  stroke-width: 3;
}

.pic-cursor rect {
  fill: rgba(255, 255, 255, 0.95);
  stroke: var(--accent);
  stroke-width: 1.5;
}

.pic-cursor text {
  fill: var(--ink);
  font-size: 14px;
  font-weight: bold;
}

.pic-cursor .pic-ruby {
  fill: #6b5f52;
  font-size: 9px;
  font-weight: normal;
}

/* 高さの強調の表示と切り替え */

.scale-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.scale-bar[hidden] { display: none; }

.exaggeration {
  margin: 0;
  font-size: 1rem;
  font-weight: bold;
}

.scale-button {
  flex: none;
  min-height: 44px;
  padding: 0 16px;
  border: 2px solid var(--accent);
  border-radius: 999px;
  background: var(--panel);
  color: var(--accent-dark);
  font: inherit;
  font-size: 0.95rem;
  font-weight: bold;
  cursor: pointer;
}

.scale-button[aria-pressed="true"] {
  background: var(--accent);
  color: #fff;
}

.scale-button:disabled {
  border-color: #ddd2c2;
  color: var(--muted);
  cursor: default;
}

/* まとめカード */

.summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0;
}

.summary:empty { display: none; }

.card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon label" "icon value";
  column-gap: 8px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 14px;
  background: var(--card-bg, var(--panel));
}

.card-icon {
  grid-area: icon;
  font-size: 1.6rem;
  line-height: 1;
}

.card dt {
  grid-area: label;
  font-size: 0.75rem;
  color: var(--muted);
}

.card dd {
  grid-area: value;
  margin: 0;
  font-size: 1.2rem;
  font-weight: bold;
}

.card-high { --card-bg: #ffe9d6; }
.card-low { --card-bg: #dff1ff; }
.card-climb { --card-bg: #e6f4d6; }
.card-distance { --card-bg: #fff3c4; }

@media (max-width: 700px) {
  .summary { grid-template-columns: repeat(2, 1fr); }
}

/* 地図の名前のピン */

.name-icon {
  background: none;
  border: none;
}

.name-dot {
  position: absolute;
  inset: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--name-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.name-label {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 7px;
  border: 1.5px solid var(--name-color);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: bold;
  line-height: 1.25;
  white-space: nowrap;
}

.name-label rt {
  font-size: 0.6rem;
  font-weight: normal;
  color: #6b5f52;
}

.name-icon-peak { --name-color: #9a6b43; }
.name-icon-river { --name-color: #4aa8e0; }
.name-icon-water { --name-color: #1f6fa8; }
.name-icon-area { --name-color: #4f8f3c; }

/* 地図の「いまここ」 */

.here-icon {
  background: none;
  border: none;
}

.here-dot {
  position: absolute;
  inset: 0;
  border: 4px solid var(--accent-dark);
  border-radius: 50%;
  background: #ffd84d;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.8), 0 2px 6px rgba(0, 0, 0, 0.3);
}

.here-label {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  font-size: 0.8rem;
  font-weight: bold;
  white-space: nowrap;
}

.debug {
  font-size: 0.85rem;
  color: var(--muted);
}

.debug pre {
  margin: 6px 0;
  white-space: pre-wrap;
  font-size: 0.8rem;
}

.debug button {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid #ddd2c2;
  border-radius: 12px;
  background: var(--panel);
  font: inherit;
  cursor: pointer;
}

.credit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-top: auto;
  padding: 6px 0 max(2px, env(safe-area-inset-bottom));
  font-size: 0.75rem;
  color: var(--muted);
}

.credit-title {
  margin: 0 0 2px;
  font-size: 0.8rem;
}

.credit a { color: inherit; }

/* ---- 画面の向きと大きさ（あとに書いて、上の決まりを上書きする） ---- */

/* 横に長い画面（iPad・スマホを横にしたとき、PC）は、左に地図・右に断面を置く。
   断面に高さを使えるので、山が平らにつぶれない */
@media (min-width: 600px) and (orientation: landscape) {
  .app {
    grid-template-rows: none;
    grid-template-columns: 11fr 9fr;
  }

  .profile-area {
    padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) 14px;
  }

  .chart { flex-basis: 240px; }

  /* 断面の幅が半分なので、カードは2列にする */
  .summary { grid-template-columns: repeat(2, 1fr); }
}

/* スマホを横にしたとき（高さが低い）：断面を先に見せるため、絵の高さをおさえる */
@media (orientation: landscape) and (max-height: 500px) {
  .chart { flex-basis: 200px; }
}

/* スマホを縦にしたとき：断面とまとめが見えるよう、地図を少し小さくする */
@media (max-width: 599px) and (orientation: portrait) {
  .app { grid-template-rows: 52fr 48fr; }
}