/* 歩いて日本一周、あなたの足なら何年？：ゲーム固有のスタイル（色はCSS変数のみ） */
:root {
  --an-sea: #dcecf7;
  --an-wave: #b9d6ea;
  --an-leg: #2e9e6a;
  --an-leg-sea: #6aa0c9;
  --an-dot: #ffffff;
  --an-dot-line: #2e9e6a;
  --an-visited: #ffb43a;
  --an-prog: #e4572e;
  --an-walker: #e4572e;
  --an-halo: rgba(228, 87, 46, .25);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --an-sea: #132536; --an-wave: #1f3a52; --an-leg: #4cc48b; --an-leg-sea: #4b7ea6; --an-dot: #211f19; --an-dot-line: #4cc48b; --an-prog: #ff7a50; --an-walker: #ff7a50; --an-halo: rgba(255, 122, 80, .3); }
}
:root[data-theme="dark"] { --an-sea: #132536; --an-wave: #1f3a52; --an-leg: #4cc48b; --an-leg-sea: #4b7ea6; --an-dot: #211f19; --an-dot-line: #4cc48b; --an-prog: #ff7a50; --an-walker: #ff7a50; --an-halo: rgba(255, 122, 80, .3); }

.an-hero { padding: 12px 0 4px; }
.an-hero h1 em { font-style: normal; color: var(--accent); }
.an-map { display: block; width: 100%; max-width: 420px; height: auto; margin: 8px auto 12px; }
.an-sea { fill: var(--an-sea); }
.an-wave { fill: none; stroke: var(--an-wave); stroke-width: 1.5; stroke-linecap: round; }
.an-leg { stroke: var(--an-leg); stroke-width: 2.5; stroke-linecap: round; opacity: .55; }
.an-leg-sea { stroke: var(--an-leg-sea); stroke-width: 2; stroke-dasharray: 3 4; stroke-linecap: round; opacity: .8; }
.an-prog { fill: none; stroke: var(--an-prog); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; opacity: .9; }
.an-dot { fill: var(--an-dot); stroke: var(--an-dot-line); stroke-width: 1.5; }
.an-dot.is-start { fill: var(--an-prog); stroke: var(--an-dot); }
.an-dot.is-visited { fill: var(--an-visited); }
.an-label { font-size: 10px; font-weight: 800; fill: var(--text); }
.an-walker-halo { fill: var(--an-halo); }
.an-walker-dot { fill: var(--an-walker); stroke: var(--an-dot); stroke-width: 1.5; }
.an-walker-halo { animation: an-pulse 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes an-pulse { 0%, 100% { transform: scale(.8); } 50% { transform: scale(1.35); } }

.an-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 14px; }
.an-tab { min-height: 44px; border-radius: var(--radius-sm); border: 2px solid var(--line); background: var(--surface); font-weight: 700; font-size: 14px; cursor: pointer; padding: 6px 8px; line-height: 1.3; }
.an-tab.on { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.an-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.an-presets .btn { min-height: 34px; padding: 4px 10px; font-size: 13px; }
.an-two { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; margin-top: 12px; }
.an-two select { font-size: 15px; padding: 10px 8px; }
.an-err { color: var(--bad); font-weight: 700; margin: 10px 0; }
.an-go { margin-top: 14px; }
.an-friend { border-color: var(--accent); background: var(--accent-soft); }
.an-disclaimer { font-size: 11px; color: var(--text-sub); background: var(--surface-2); border-radius: var(--radius-sm); padding: 8px 10px; margin: 16px 0 0; line-height: 1.6; }

/* 旅すごろく */
.an-target { margin: 12px 0 4px; }
.an-daily-map .an-map { max-width: 280px; margin: 4px auto; }
.an-today-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 8px; }
.an-daily-res { margin: 8px 0 0; font-weight: 700; }

/* 演出 */
.an-stage { margin-top: 12px; }
.an-counter { font-size: clamp(30px, 9vw, 48px); font-weight: 900; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1.2; }
.an-skip { margin-top: 4px; }

/* 結果 */
.an-type { font-size: clamp(22px, 6.5vw, 30px); font-weight: 900; margin: 6px 0 4px; }
.an-big { color: var(--accent); margin: 2px 0 4px; }
.an-line1 { font-weight: 700; font-size: 15px; margin: 6px 0; }
.an-again { display: grid; gap: 8px; margin: 12px 0 16px; }
.an-again .btn { white-space: normal; line-height: 1.35; }
.an-bars { display: grid; gap: 8px; margin-top: 10px; }
.an-bar-row { display: grid; grid-template-columns: 3.5em 1fr auto; gap: 8px; align-items: center; font-size: 14px; }
.an-bar { height: 14px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.an-bar i { display: block; height: 100%; background: var(--text-sub); border-radius: 999px; }
.an-bar.is-me i { background: var(--accent); }
.an-route-list { font-size: 13px; padding-left: 1.6em; margin: 8px 0; }
.an-route-list li + li { margin-top: 2px; }

/* 比較・図鑑 */
.an-dist { display: grid; gap: 6px; margin-top: 8px; }
.an-dist-row { display: grid; grid-template-columns: minmax(0, 11em) 1fr 3em; gap: 8px; align-items: center; font-size: 13px; }
.an-dist-row.is-me { font-weight: 800; }
.an-dist-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-dist-bar { height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.an-dist-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.an-dist-pct { text-align: right; font-variant-numeric: tabular-nums; }
.an-zukan { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.an-zukan-item { border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 8px; text-align: center; font-size: 12px; opacity: .6; }
.an-zukan-item.on { border: 1px solid var(--accent); background: var(--accent-soft); opacity: 1; }
.an-zukan-emoji { display: block; font-size: 22px; }
.an-prefs { display: flex; flex-wrap: wrap; gap: 4px; }
.an-pref { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-sub); }
.an-pref.on { background: var(--accent-soft); color: var(--text); font-weight: 700; }

.an-about h2 { font-size: 20px; }
.an-table-wrap { overflow-x: auto; }
.an-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.an-table th, .an-table td { border-bottom: 1px solid var(--line); padding: 6px 4px; text-align: left; vertical-align: top; }