:root { --bg:#14141f; --panel:#1d1d2c; --fg:#ecebf5; --sub:#9a9ab0; --accent:#ff5a3c; --line:#2f2f45; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg);
  font-family: "Noto Sans JP","Hiragino Sans","Yu Gothic",system-ui,sans-serif; line-height: 1.6; }
.wrap { max-width: 640px; margin: 0 auto; padding: 16px 16px 48px; }
h1 { margin: 8px 0 0; font-size: 2rem; letter-spacing: .12em; color: var(--accent); }
.tagline { margin: 4px 0 16px; color: var(--sub); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-bottom: 16px; }
label { display: block; font-size: .85rem; color: var(--sub); margin-bottom: 4px; }
textarea, select { width: 100%; background: #12121c; color: var(--fg); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px; font: inherit; font-size: 16px; /* iOS のズーム防止 */ }
textarea { resize: vertical; }
.meta { text-align: right; font-size: .8rem; color: var(--sub); margin: 2px 0 8px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.field { flex: 1 1 200px; min-width: 0; }
.btn { display: inline-block; width: 100%; background: var(--accent); color: var(--bg); /* 白だと橙背景でコントラスト不足 */ border: 0; border-radius: 12px;
  padding: 14px; font: inherit; font-weight: 700; font-size: 1.05rem; cursor: pointer; text-align: center; text-decoration: none; }
.btn.secondary { background: transparent; border: 1px solid var(--accent); color: var(--accent); margin-top: 12px; }
.btn:disabled { opacity: .5; cursor: progress; }
.error { color: #ff8a7a; margin: 10px 0 0; }
.small { font-size: .8rem; color: var(--sub); }
.hops { list-style: none; margin: 0; padding: 0; }
.hops li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line);
  opacity: 0; transform: translateY(6px); animation: in .4s forwards; overflow-wrap: anywhere; }
.hops .lang { flex: 0 0 auto; font-size: .75rem; color: var(--accent); padding-top: 3px; min-width: 4.5em; max-width: 7em; overflow-wrap: anywhere; }
.hops .fb { color: var(--sub); font-size: .7rem; }
@keyframes in { to { opacity: 1; transform: none; } }
.final-box { margin-top: 16px; animation: in .5s forwards; }
.final { font-size: 1.6rem; font-weight: 700; line-height: 1.45; margin: 6px 0 16px; overflow-wrap: anywhere; }
.meter-label { margin-bottom: 6px; }
.meter-label strong { color: var(--accent); font-size: 1.4rem; }
.meter { height: 14px; background: #12121c; border-radius: 7px; overflow: hidden; }
.meter-bar { height: 100%; width: 0; background: linear-gradient(90deg,#ffb347,var(--accent)); transition: width 1.2s ease-out; }
footer { text-align: center; margin-top: 24px; }
@media (prefers-reduced-motion: reduce) { .hops li, .final-box { animation: none; opacity: 1; transform: none; } .meter-bar { transition: none; } }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.result-url { margin: 12px 0 0; overflow-wrap: anywhere; }
.result-url a { color: var(--accent); }
/* 共有ページ（CSP が inline style を禁止するのでクラスで当てる） */
.card-img { width: 100%; height: auto; border-radius: 12px; }
footer a { color: var(--sub); }
/* 旅の表示（言語の連なり + 旅中マーカー） */
.route-chain { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 4px; font-size: .75rem; }
.route-chain li { color: var(--sub); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; }
.route-chain li + li::before { content: "\2192"; margin-right: 6px; color: var(--sub); position: relative; left: -6px; }
.route-chain li.done { color: var(--fg); border-color: var(--accent); }
.route-chain li.here { color: var(--bg); background: var(--accent); border-color: var(--accent); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 5px rgba(255,90,60,.25); } }
.skip { width: auto; padding: 6px 16px; margin: 0 0 8px; font-size: .85rem; }
.warn { color: #ffb347; margin: 0 0 10px; }
/* 共有 */
.share { margin-top: 12px; }
.share-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.share-links .btn { width: auto; flex: 1 1 auto; margin-top: 0; padding: 10px 14px; font-size: .95rem; }
.share-links [hidden] { display: none; }
/* 共有ページ */
.orig { margin: 0 0 12px; overflow-wrap: anywhere; }
h1 a { color: inherit; text-decoration: none; }
/* <meter> は既定だと緑（optimum）になるので、トップ画面のバーと同じ橙のグラデーションにする */
.meter-el { width: 100%; height: 14px; border: 0; border-radius: 7px; background: #12121c; }
.meter-el::-webkit-meter-bar { background: #12121c; border: 0; border-radius: 7px; height: 14px; }
.meter-el::-webkit-meter-optimum-value,
.meter-el::-webkit-meter-suboptimum-value,
.meter-el::-webkit-meter-even-less-good-value { background: linear-gradient(90deg, #ffb347, var(--accent)); border-radius: 7px; }
.meter-el::-moz-meter-bar { background: linear-gradient(90deg, #ffb347, var(--accent)); border-radius: 7px; }
@media (prefers-reduced-motion: reduce) { .route-chain li.here { animation: none; } html { scroll-behavior: auto; } }
.chain { overflow-wrap: anywhere; color: var(--sub); margin: 0 0 12px; }