/* 消えゆく町の町長：ゲーム固有のスタイル（色はCSS変数のみ） */
:root {
  --km-sky: #1f2c46;
  --km-sky-2: #2e4166;
  --km-moon: #fff1bf;
  --km-star: #ffffff;
  --km-hill: #2b3a2f;
  --km-sea: #1d4a6b;
  --km-house: #3b4256;
  --km-roof: #5a4a4a;
  --km-win-on: #ffd36b;
  --km-win-off: #2a2f3d;
  --km-male: #6b9cd6;
  --km-female: #e48aa6;
  --km-young: #e4572e;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --km-sky: #10182a; --km-hill: #1b261e; --km-house: #2a3040; --km-roof: #3e3434; --km-win-off: #1a1e28; --km-male: #6b9cf0; --km-female: #ef8fb0; --km-young: #ff7a50; }
}
:root[data-theme="dark"] { --km-sky: #10182a; --km-hill: #1b261e; --km-house: #2a3040; --km-roof: #3e3434; --km-win-off: #1a1e28; --km-male: #6b9cf0; --km-female: #ef8fb0; --km-young: #ff7a50; }

.km-hero { padding: 12px 0 4px; }
.km-hero h1 em { font-style: normal; color: var(--accent); }
.km-start { margin: 12px 0 16px; }
.km-list { margin: 6px 0 0; padding-left: 1.2em; }
.km-list li + li { margin-top: 4px; }
.km-friend { border-color: var(--accent); background: var(--accent-soft); }
.km-daily .btn { white-space: normal; }
.km-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; }

/* 町の夜景SVG */
.km-town { display: block; width: 100%; height: auto; margin: 8px 0 12px; }
.km-sky { fill: var(--km-sky); }
.km-moon { fill: var(--km-moon); }
.km-star { fill: var(--km-star); opacity: .7; }
.km-hill { fill: var(--km-hill); }
.km-sea { fill: var(--km-sea); }
.km-house { fill: var(--km-house); }
.km-roof { fill: var(--km-roof); }
.km-win { fill: var(--km-win-off); transition: fill .8s ease; }
.km-win.on { fill: var(--km-win-on); }

/* ガチャ */
.km-gacha { padding: 22px 16px; }
.km-gacha-name { font-size: clamp(24px, 7vw, 32px); font-weight: 900; line-height: 1.3; margin-bottom: 6px; }

/* プレイ */
.km-dash { position: relative; margin-top: 10px; }
.km-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.km-st { background: var(--surface-2); border-radius: var(--radius-sm); padding: 6px 8px; min-width: 0; }
.km-st span { display: block; font-size: 10px; color: var(--text-sub); line-height: 1.3; }
.km-st b { display: block; font-size: 15px; line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.km-st small { font-size: 11px; font-weight: 700; }
.is-bad { color: var(--bad); }
.is-good { color: var(--good); }
.km-year { font-weight: 800; font-size: 14px; color: var(--accent); }
.km-dash-vis { display: grid; grid-template-columns: 1.5fr 1fr; gap: 8px; margin-top: 8px; align-items: center; }
.km-town-wrap .km-town { margin: 0; }
.km-dash .km-pyr-row { height: 7px; }
.km-dash .km-pyr-age { font-size: 7px; }
.km-dash .km-pyr-key { font-size: 9px; }

/* 人口ピラミッド */
.km-pyr { font-size: 10px; }
.km-pyr-head { display: grid; grid-template-columns: 1fr 2.4em 1fr; text-align: center; color: var(--text-sub); font-weight: 700; margin-bottom: 2px; }
.km-pyr-row { display: grid; grid-template-columns: 1fr 2.4em 1fr; align-items: center; height: 9px; margin: 1px 0; }
.km-pyr-age { text-align: center; color: var(--text-sub); font-size: 8px; line-height: 1; font-variant-numeric: tabular-nums; }
.km-pyr-m, .km-pyr-f { display: flex; height: 100%; }
.km-pyr-m { justify-content: flex-end; }
.km-pyr-m i, .km-pyr-f i { display: block; height: 100%; transition: width .9s ease; }
.km-pyr-m i { background: var(--km-male); border-radius: 2px 0 0 2px; }
.km-pyr-f i { background: var(--km-female); border-radius: 0 2px 2px 0; }
.km-pyr-row.is-young .km-pyr-f i { background: var(--km-young); }
.km-pyr-key { margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.km-key-young { display: inline-block; width: 10px; height: 8px; border-radius: 2px; background: var(--km-young); }

.km-qcard { border: 2px solid var(--accent); }
.km-q { font-size: 19px; margin: 4px 0 8px; }
.km-cards { display: grid; gap: 10px; }
.km-pcard { text-align: left; width: 100%; border: 2px solid var(--line); background: var(--surface); border-radius: var(--radius-sm); padding: 12px 14px; cursor: pointer; font: inherit; color: var(--text); line-height: 1.5; transition: border-color .15s, transform .08s; touch-action: manipulation; }
.km-pcard:hover { border-color: var(--accent); }
.km-pcard:active { transform: scale(.98); }
.km-pcard.is-skip { border-style: dashed; background: var(--surface-2); }
.km-pcard-head { display: flex; align-items: center; gap: 8px; }
.km-pcard-head b { font-size: 16px; line-height: 1.35; }
.km-pcard-emoji { font-size: 22px; flex: none; }
.km-pcard-cost { font-size: 12px; font-weight: 700; color: var(--warn); margin: 4px 0 2px; }
.km-pro { font-size: 13px; color: var(--good); }
.km-con { font-size: 13px; color: var(--text-sub); }
.km-yr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0; }
.km-yr-grid > div { background: var(--surface-2); border-radius: var(--radius-sm); padding: 6px; text-align: center; min-width: 0; }
.km-yr-grid span { display: block; font-size: 10px; color: var(--text-sub); }
.km-yr-grid b { font-size: 16px; font-variant-numeric: tabular-nums; }
.km-evlist { list-style: none; padding: 0; margin: 6px 0 0; font-size: 13px; }
.km-evlist li { padding: 5px 0; border-bottom: 1px solid var(--line); line-height: 1.5; }
.km-evlist li:last-child { border-bottom: 0; }
.km-ev-good { color: var(--good); }
.km-ev-bad { color: var(--bad); }
.km-ev-choice { font-weight: 700; }
.km-next { margin-top: 12px; }
.km-term-emoji { font-size: 48px; line-height: 1.2; }

/* 結果 */
.km-result-card { padding-top: 16px; }
.km-future-name { font-size: clamp(26px, 8vw, 38px); font-weight: 900; line-height: 1.25; color: var(--accent); }
.km-line1 { font-weight: 800; font-size: 17px; margin: 8px 0; }
.km-chart { width: 100%; height: auto; display: block; margin: 12px 0 2px; }
.km-axis { stroke: var(--line); stroke-width: 1; }
.km-tick { fill: var(--text-sub); font-size: 9px; }
.km-line { stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.km-line-me { stroke: var(--accent); }
.km-line-base { stroke: var(--text-sub); stroke-dasharray: 5 3; }
.km-chart-key { justify-content: center; gap: 6px; }
.km-key { display: inline-block; width: 18px; height: 4px; border-radius: 2px; }
.km-key-me { background: var(--accent); }
.km-key-base { background: var(--text-sub); margin-left: 10px; }
.km-result-card .km-pyr { max-width: 360px; margin: 6px auto 0; text-align: left; }
.km-again { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 16px; }
.km-again .btn { padding: 10px 12px; font-size: 14px; white-space: normal; line-height: 1.35; }
.km-dist { margin-top: 10px; display: grid; gap: 4px; }
.km-dist-row { display: grid; grid-template-columns: 9.5em 1fr 3em; gap: 6px; align-items: center; font-size: 12px; }
.km-dist-bar { height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.km-dist-bar i { display: block; height: 100%; background: var(--text-sub); border-radius: 999px; }
.km-dist-row.is-me { font-weight: 800; color: var(--accent); }
.km-dist-row.is-me .km-dist-bar i { background: var(--accent); }
.km-dist-pct { text-align: right; font-variant-numeric: tabular-nums; }
.km-sources ul { padding-left: 1.2em; margin: 8px 0; }
.km-sources li + li { margin-top: 6px; }
.rare-n { background: var(--surface-2); color: var(--text-sub); }
.rare-r { background: var(--good-soft); color: var(--good); }
.rare-sr { background: var(--info-soft); color: var(--info); }
.rare-ssr { background: var(--accent); color: var(--accent-ink); }

/* 図鑑 */
.km-zukan { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.km-zukan-item { background: var(--surface-2); border-radius: var(--radius-sm); padding: 8px 6px; text-align: center; font-size: 12px; line-height: 1.35; display: flex; flex-direction: column; align-items: center; gap: 4px; opacity: .6; }
.km-zukan-item.on { opacity: 1; background: var(--surface); border: 1px solid var(--line); }
.km-zukan-emoji { font-size: 26px; }

/* 静的解説 */
.km-about h2 { font-size: 18px; margin-top: 8px; }
.km-about p, .km-about li { font-size: 14px; }
.km-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.km-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.km-table th, .km-table td { border-bottom: 1px solid var(--line); padding: 6px 4px; text-align: left; vertical-align: top; }
.km-table th { color: var(--text-sub); white-space: nowrap; }
.km-table a { word-break: break-all; }
@media (max-width: 420px) { .km-st { padding: 5px 5px; } .km-st b { font-size: 13px; } .km-st span { font-size: 9px; } }
.km-chart { max-width: 460px; margin-left: auto; margin-right: auto; }