/* 47都道府県、全部行けるのは何歳？（色はCSS変数のみ） */
:root {
  --ts-sea: #e3eef5;
  --ts-wave: #b9d3e4;
  --ts-s0: #ffffff;
  --ts-s0-line: #c9d6df;
  --ts-s1: #7cc4e8;
  --ts-s2: #f2a93b;
  --ts-text: #1d1b18;
  --ts-text-on: #1d1b18;
  --ts-hl: #e4572e;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ts-sea: #13232e; --ts-wave: #24404f; --ts-s0: #2b2820; --ts-s0-line: #45403a; --ts-s1: #3f8fb8; --ts-s2: #d18a22; --ts-text: #f1ede4; --ts-text-on: #10141a; --ts-hl: #ff7a50; }
}
:root[data-theme="dark"] { --ts-sea: #13232e; --ts-wave: #24404f; --ts-s0: #2b2820; --ts-s0-line: #45403a; --ts-s1: #3f8fb8; --ts-s2: #d18a22; --ts-text: #f1ede4; --ts-text-on: #10141a; --ts-hl: #ff7a50; }

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

/* タイル地図 */
.ts-map-wrap { background: var(--ts-sea); border-radius: var(--radius-sm); padding: 6px; margin: 8px 0; }
.ts-map { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.ts-map.is-small { max-width: 260px; }
.ts-wave { fill: none; stroke: var(--ts-wave); stroke-width: 1.5; stroke-linecap: round; }
.ts-tile rect { fill: var(--ts-s0); stroke: var(--ts-s0-line); stroke-width: 1; transition: fill .25s ease, transform .2s; }
.ts-tile text { font-size: 9px; font-weight: 800; fill: var(--ts-text); pointer-events: none; }
.ts-tile text.is-long { font-size: 7.5px; }
.ts-tile.s1 rect { fill: var(--ts-s1); stroke: var(--ts-s1); }
.ts-tile.s2 rect { fill: var(--ts-s2); stroke: var(--ts-s2); }
.ts-tile.s1 text, .ts-tile.s2 text { fill: var(--ts-text-on); }
.ts-tile[role="button"] { cursor: pointer; }
.ts-tile[role="button"]:focus { outline: none; }
.ts-tile[role="button"]:focus rect { stroke: var(--accent); stroke-width: 2; }
.ts-tile.is-hl rect { fill: var(--ts-hl); stroke: var(--ts-hl); animation: ts-blink 1.2s ease-in-out infinite; }
.ts-tile.is-hl text { fill: var(--accent-ink); }
@keyframes ts-blink { 50% { opacity: .45; } }

/* 塗る画面 */
.ts-paint { margin-top: 10px; }
.ts-count { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.ts-count-num { font-size: clamp(32px, 10vw, 44px); font-weight: 900; color: var(--accent); font-variant-numeric: tabular-nums; }
.ts-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: center; color: var(--text-sub); }
.ts-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: -2px; border: 1px solid var(--ts-s0-line); }
.ts-key.s0 { background: var(--ts-s0); }
.ts-key.s1 { background: var(--ts-s1); border-color: var(--ts-s1); }
.ts-key.s2 { background: var(--ts-s2); border-color: var(--ts-s2); }
.ts-regs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ts-reg { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-sub); font-weight: 700; }
.ts-reg.is-done { background: var(--accent-soft); color: var(--accent); }
.ts-again { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 16px; }
.ts-again .btn { padding: 10px 12px; font-size: 14px; white-space: normal; line-height: 1.35; }
.ts-qcard { margin-top: 10px; }
.ts-per-num { font-size: 22px; color: var(--accent); }
.ts-styles .choice { min-height: 52px; }

/* 結果 */
.ts-big { font-size: clamp(56px, 18vw, 88px); font-weight: 900; line-height: 1.1; color: var(--accent); font-variant-numeric: tabular-nums; }
.ts-big span { font-size: .36em; margin-left: 4px; color: var(--text); }
.ts-line1 { font-weight: 800; font-size: 17px; margin: 8px 0; }
.ts-styles-cmp { display: grid; gap: 4px; margin-top: 10px; text-align: left; }
.ts-styles-cmp div { display: flex; justify-content: space-between; padding: 4px 10px; border-radius: var(--radius-sm); background: var(--surface-2); }
.ts-styles-cmp div.is-me { background: var(--accent-soft); color: var(--accent); font-weight: 800; }
.ts-dist { margin-top: 10px; display: grid; gap: 4px; }
.ts-dist-row { display: grid; grid-template-columns: 10em 1fr 3em; gap: 6px; align-items: center; font-size: 12px; }
.ts-dist-bar { height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.ts-dist-bar i { display: block; height: 100%; background: var(--text-sub); border-radius: 999px; }
.ts-dist-row.is-me { font-weight: 800; color: var(--accent); }
.ts-dist-row.is-me .ts-dist-bar i { background: var(--accent); }
.ts-dist-pct { text-align: right; font-variant-numeric: tabular-nums; }
.ts-sources ul { padding-left: 1.2em; margin: 8px 0; }
.ts-sources li + li { margin-top: 6px; }

/* デイリー */
.ts-dchoices { grid-template-columns: 1fr 1fr; }
.ts-dres { margin-top: 12px; }
.ts-dres-mark { font-size: 26px; font-weight: 900; }

/* 図鑑 */
.ts-zukan { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.ts-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; }
.ts-zukan-item.on { opacity: 1; background: var(--surface); border: 1px solid var(--line); }
.ts-zukan-emoji { font-size: 26px; }
.ts-badge { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; border: 2px dashed var(--line); color: var(--text-sub); }
.ts-badge.on { border: 2px solid var(--accent); background: var(--accent-soft); }

/* 静的解説 */
.ts-about h2 { font-size: 18px; margin-top: 8px; }
.ts-about p, .ts-about li { font-size: 14px; }
.ts-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ts-about table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ts-about th, .ts-about td { border-bottom: 1px solid var(--line); padding: 6px 4px; text-align: left; vertical-align: top; }
.ts-about a { word-break: break-all; }
@media (max-width: 380px) { .ts-dist-row { grid-template-columns: 8.5em 1fr 2.6em; } }