/* PawSteps 散歩タイプ診断
   アプリ本体のUIに合わせたポップな配色・造形。
   ・キャラ選択画面の「上部ピーチ→下部クリーム」のグラデーション
   ・白カード + 大きめ角丸 + やわらかい影で浮かせる
   ・オレンジ〜イエローの塗り、丸ピル、太めの輪郭
   本文フォントは Noto Sans JP(使用文字のみサブセット化して self-host)。 */

/* サブセット済みのため unicode-range は指定しない。
   フォント自体が必要な字しか持たず、それ以外はフォールバックへ流れる */
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/noto-sans-jp-400.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/noto-sans-jp-500.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/noto-sans-jp-700.woff2") format("woff2");
}

:root {
  --orange: #f7941d; /* アプリのタブバー・プログレスバーの橙 */
  --orange-deep: #ef7f13;
  --yellow: #ffc93c;
  --teal: #4fb6cc;
  --green: #86c95f;

  --peach: #fbddb4; /* キャラ選択画面 上部の背景 */
  --cream: #fdf6ec;
  --surface: #ffffff;
  --ink: #3a2b1c;
  --sub: #94806a;
  --line: #f0e0c8;

  /* グループのアクセント色を文字に使うときの白の混ぜ量。暗所では濃い色が沈むため持ち上げる */
  --accent-lift: 0%;

  --radius: 20px;
  --radius-lg: 28px;

  --shadow-soft: 0 6px 18px -8px rgb(150 100 40 / 30%);
  --shadow-pop: 0 10px 22px -10px rgb(190 110 20 / 48%);

  --font-jp: "Noto Sans JP", system-ui, -apple-system, "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", sans-serif;
}

/* 暗所のトークン。OS設定に従う場合と、閲覧側が明示的に暗所を選んだ場合の
   両方で効くよう2箇所に置く。:not([data-theme="light"]) を挟むのは、
   OSが暗所でも「明るい表示」を明示選択した側を優先させるため。
   ※2ブロックは同じ内容。片方だけ直すとテーマが食い違う */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --orange: #ffa938;
    --orange-deep: #ff9420;
    --yellow: #ffd75e;
    --teal: #63c9de;

    --peach: #33261a;
    --cream: #1d1712;
    --surface: #2b2219;
    --ink: #f8efe2;
    --sub: #b7a48d;
    --line: #453728;

    --shadow-soft: 0 6px 18px -8px rgb(0 0 0 / 65%);
    --shadow-pop: 0 10px 22px -10px rgb(0 0 0 / 75%);
    --accent-lift: 45%;
  }
}

:root[data-theme="dark"] {
  --orange: #ffa938;
  --orange-deep: #ff9420;
  --yellow: #ffd75e;
  --teal: #63c9de;

  --peach: #33261a;
  --cream: #1d1712;
  --surface: #2b2219;
  --ink: #f8efe2;
  --sub: #b7a48d;
  --line: #453728;

  --shadow-soft: 0 6px 18px -8px rgb(0 0 0 / 65%);
  --shadow-pop: 0 10px 22px -10px rgb(0 0 0 / 75%);
  --accent-lift: 45%;
}

* { box-sizing: border-box; }

/* display を持つクラス(grid/flex)はUAスタイルの [hidden]{display:none} より
   強いため、hidden 属性を立てても消えない。JS側の表示制御が全滅するので、
   個別に打ち消すのではなくここでまとめて優先させる */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100dvh;
  /* キャラ選択画面と同じ、上がピーチで下がクリームの空気感 */
  background: linear-gradient(180deg, var(--peach) 0%, var(--cream) 34%, var(--cream) 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-jp);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 540px;
  margin: 0 auto;
  padding: 30px 18px 76px;
}

/* --- hero --- */
.hero { text-align: center; margin-bottom: 20px; }

.hero-eyebrow {
  display: inline-block;
  margin: 0 0 12px;
  padding: 4px 16px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  box-shadow: var(--shadow-soft);
}

.hero h1 {
  margin: 0 0 10px;
  font-size: clamp(1.6rem, 7.2vw, 2.05rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

/* タイトルの主語だけ太いマーカーで抜く */
.hero h1 em {
  font-style: normal;
  color: var(--orange-deep);
  background: linear-gradient(to top, var(--yellow) 38%, transparent 38%);
  padding: 0 3px;
  border-radius: 3px;
}

.hero-lead { margin: 0; color: var(--sub); font-size: 0.9rem; font-weight: 500; }

/* 冒頭の注釈。詳しい説明は結果末尾の「この診断について」に置き、ここは一行で控えめに */
.hero-note {
  display: inline-block;
  margin: 10px 0 0;
  padding: 3px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--sub);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.6;
}

/* --- 分布プレビュー ---
   設問を1問ずつ出すため1画面に収まり、sticky は不要 */
.chart-panel {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 18px 16px 14px;
  box-shadow: var(--shadow-soft);
}

.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-base { stroke: var(--line); stroke-width: 2; stroke-linecap: round; }
.chart-tick { stroke: var(--line); stroke-width: 2; stroke-linecap: round; }
.chart-label { fill: var(--sub); font-size: 8.5px; font-family: var(--font-jp); font-weight: 700; }

.chart-band { fill: color-mix(in srgb, var(--orange) 14%, transparent); }
.chart-area--weekday { fill: color-mix(in srgb, var(--orange) 26%, transparent); }
.chart-area--weekend { fill: color-mix(in srgb, var(--teal) 20%, transparent); }
.chart-line { fill: none; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.chart-line--weekday { stroke: var(--orange); }
.chart-line--weekend { stroke: var(--teal); }

.chart-caption {
  margin: 12px 0 0;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--sub);
  text-align: center;
}

.chart-legend { display: flex; gap: 16px; justify-content: center; margin-top: 8px; }
.legend { font-size: 0.72rem; color: var(--sub); display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.legend::before { content: ""; width: 16px; height: 4px; border-radius: 999px; }
.legend--weekday::before { background: var(--orange); }
.legend--weekend::before { background: var(--teal); }

/* --- 開始前 ---
   いきなり設問を出さず、何が得られるかを見せてから始めてもらう */
.start { margin-top: 26px; display: grid; gap: 14px; }

.start-points {
  list-style: none;
  margin: 0;
  padding: 18px 20px;
  display: grid;
  gap: 12px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.start-points li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 0.93rem;
  font-weight: 500;
  line-height: 1.6;
}
.start-points span { font-size: 1.15rem; line-height: 1.4; flex: 0 0 auto; }

.start-note { margin: -6px 0 0; text-align: center; font-size: 0.79rem; font-weight: 500; color: var(--sub); }

/* --- 進捗(現在地つき) ---
   1本のバーではなく設問ごとの区切りにして、あと何問かが一目でわかるようにする。
   スキップで総数が5→4に変わるためセグメントはJS側で組み立てる */
.stepper { margin: 24px 0 0; }

.stepper-track { display: flex; gap: 6px; }

.segment {
  flex: 1 1 0;
  height: 9px;
  border-radius: 999px;
  background: var(--line);
  transition: background 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.segment.is-done {
  background: linear-gradient(90deg, var(--orange), var(--yellow));
  box-shadow: var(--shadow-soft);
}

/* 現在地だけ少し持ち上げる。色だけだと回答済みとの区別がつきにくい */
.segment.is-current {
  background: color-mix(in srgb, var(--orange) 46%, var(--line));
  transform: scaleY(1.5);
}

.stepper-label {
  margin: 12px 0 0;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--sub);
  font-variant-numeric: tabular-nums;
}

/* --- 設問(1問ずつ) --- */
.questions { padding-top: 26px; min-height: 250px; }

.question { border: 0; margin: 0; padding: 0; }

.question legend {
  padding: 0;
  margin-bottom: 20px;
  width: 100%;
  text-align: center;
  font-weight: 700;
  font-size: clamp(1.16rem, 5.4vw, 1.36rem);
  line-height: 1.55;
}

/* 切り替わりを一瞬フェードさせて、入れ替わったことを気づかせる */
.question.is-entering { opacity: 0; transform: translateY(10px); }
.question {
  opacity: 1;
  transform: none;
  transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 短い選択肢は横に並び、長いものは自然に折り返して1行を占める */
.options { display: flex; flex-wrap: wrap; gap: 11px; justify-content: center; }

.option {
  appearance: none;
  flex: 1 1 auto;
  min-width: max-content;
  padding: 15px 24px;
  border-radius: 999px;
  border: 2.5px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.98rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.2s ease,
    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.option:hover { border-color: var(--orange); transform: translateY(-1px); }
.option:active { transform: scale(0.96); }
.option:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

.option.is-selected {
  border-color: transparent;
  background: linear-gradient(135deg, var(--orange-deep), var(--yellow));
  color: #fff;
  box-shadow: var(--shadow-pop);
  animation: pop 0.34s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 選んだ瞬間に軽く弾ませる。ポップさは動きで出る */
@keyframes pop {
  0% { transform: scale(0.94); }
  60% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* --- 前後移動 --- */
.nav { display: flex; justify-content: center; gap: 10px; margin-top: 24px; }

.nav-btn {
  appearance: none;
  padding: 10px 24px;
  border-radius: 999px;
  border: 2.5px solid var(--line);
  background: var(--surface);
  color: var(--sub);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.nav-btn:hover { color: var(--orange); border-color: var(--orange); transform: translateY(-1px); }
.nav-btn:active { transform: scale(0.96); }
.nav-btn:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.nav-btn--next { color: var(--orange); border-color: var(--orange); }

/* --- 開始前のティザー ---
   4グループ・13タイプを先に見せ、「自分はどれ？」を始める動機にする。
   グループ色は theme.js から --g-from / --g-to として注入される */
.teaser {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 16px 16px 18px;
  box-shadow: var(--shadow-soft);
}

.teaser-lead {
  margin: 0 0 12px;
  text-align: center;
  font-size: 0.86rem;
  font-weight: 700;
}

.teaser-groups {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.teaser-group {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--g-from), var(--g-to));
  color: #fff;
}

.teaser-name { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; }
.teaser-members { display: flex; gap: 4px; font-size: 1.25rem; line-height: 1.2; }
/* 始める前は正体を伏せる */
.teaser-members span { filter: brightness(0) invert(1); opacity: 0.85; }

/* --- 結果発表の溜め --- */
.result { margin-top: 40px; }

.reveal {
  display: grid;
  place-items: center;
  gap: 14px;
  min-height: 240px;
}

.reveal-paws { display: flex; gap: 14px; font-size: 2rem; }
.reveal-paws span { animation: paw-step 1.2s ease-in-out infinite; opacity: 0.25; }
.reveal-paws span:nth-child(2) { animation-delay: 0.2s; }
.reveal-paws span:nth-child(3) { animation-delay: 0.4s; }

@keyframes paw-step {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-8px); }
}

.reveal-text { margin: 0; font-weight: 700; color: var(--sub); letter-spacing: 0.08em; }

/* --- ヒーロー ---
   グループ色の風景の上にタイプを大きく出す。結果の「当たった！」はここで決まる */
.type-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 22px 20px 30px;
  border-radius: var(--radius-lg);
  background: linear-gradient(170deg, var(--g-from), var(--g-to));
  color: #fff;
  text-align: center;
  box-shadow: 0 16px 34px -14px color-mix(in srgb, var(--g-accent) 70%, transparent);
  animation: hero-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.type-hero > :not(.scene) { position: relative; }
.type-hero p, .type-hero h2 { text-shadow: 0 2px 12px rgb(0 0 0 / 22%); }

@keyframes hero-in {
  from { opacity: 0; transform: translateY(18px) scale(0.94); }
  to { opacity: 1; transform: none; }
}

/* 風景。空(太陽・月・星)と地面(丘・波)をグループごとに描き分ける */
.scene { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.scene-sky, .scene-ground { position: absolute; inset: 0; }

/* 地面はレベルのピルより下に収め、文字の背後を明るくしない */
.scene-ground {
  top: auto;
  height: 16%;
  background:
    radial-gradient(120% 90% at 20% 100%, rgb(255 255 255 / 20%) 60%, transparent 61%),
    radial-gradient(110% 80% at 85% 100%, rgb(255 255 255 / 14%) 60%, transparent 61%);
}

/* 朝日は柴犬の背後から昇る光輪として描く(文字の背後に明るい面を置かない) */
[data-group="dawn"] .scene-sky {
  background:
    radial-gradient(circle at 50% 149px, rgb(255 236 170 / 70%) 0 100px, transparent 101px),
    radial-gradient(circle at 50% 149px, rgb(255 236 170 / 28%) 0 132px, transparent 133px);
}

[data-group="steady"] .scene-sky {
  background:
    radial-gradient(circle at 84% 14%, rgb(255 250 210 / 85%) 0 7%, transparent 7.5%),
    radial-gradient(circle at 12% 30%, rgb(255 255 255 / 30%) 0 2%, transparent 2.5%),
    radial-gradient(circle at 20% 22%, rgb(255 255 255 / 22%) 0 1.4%, transparent 1.9%);
}
[data-group="steady"] .scene-ground {
  background:
    radial-gradient(60% 70% at 15% 100%, rgb(255 255 255 / 22%) 60%, transparent 61%),
    radial-gradient(60% 60% at 50% 100%, rgb(255 255 255 / 16%) 60%, transparent 61%),
    radial-gradient(60% 75% at 88% 100%, rgb(255 255 255 / 20%) 60%, transparent 61%);
}

[data-group="wave"] .scene-sky {
  background: radial-gradient(circle at 16% 16%, rgb(255 255 255 / 80%) 0 6%, transparent 6.5%);
}
[data-group="wave"] .scene-ground {
  height: 16%;
  background:
    radial-gradient(34px 22px at 50% 0, transparent 97%, rgb(255 255 255 / 22%)) 0 0 / 68px 100% repeat-x,
    radial-gradient(34px 22px at 50% 0, transparent 97%, rgb(255 255 255 / 16%)) 34px 18px / 68px 100% repeat-x;
}

[data-group="night"] .scene-sky {
  background:
    radial-gradient(circle at 12% 12%, #fff 0 0.5%, transparent 0.9%),
    radial-gradient(circle at 30% 26%, #fff 0 0.4%, transparent 0.8%),
    radial-gradient(circle at 58% 9%, #fff 0 0.5%, transparent 0.9%),
    radial-gradient(circle at 68% 34%, #fff 0 0.35%, transparent 0.75%),
    radial-gradient(circle at 8% 44%, #fff 0 0.35%, transparent 0.75%),
    radial-gradient(circle at 92% 40%, #fff 0 0.4%, transparent 0.8%);
}
/* 三日月: 透明な円の影だけを見せる */
[data-group="night"] .scene-sky::after {
  content: "";
  position: absolute;
  top: 22px;
  right: 34px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  box-shadow: -11px 7px 0 0 rgb(255 246 200);
}

.group-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgb(255 255 255 / 24%);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}
.group-chip span { font-size: 0.72rem; letter-spacing: 0.04em; opacity: 0.9; text-transform: none; }

.type-figure {
  display: grid;
  place-items: center;
  width: 168px;
  height: 168px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: rgb(255 255 255 / 28%);
  box-shadow: inset 0 0 0 6px rgb(255 255 255 / 30%);
  animation: float 3.6s ease-in-out 0.7s infinite;
}
.type-figure img { width: 92%; height: 92%; object-fit: contain; }
.type-figure .figure-emoji { font-size: 5.4rem; line-height: 1; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

.type-lead { margin: 0; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; opacity: 0.92; }

.type-name {
  margin: 2px 0 0;
  font-size: clamp(2.5rem, 12vw, 3.2rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.type-name-en {
  margin: 0 0 12px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.88;
}

.type-tagline { margin: 0 0 16px; font-size: 1.08rem; font-weight: 700; line-height: 1.6; }

.type-level {
  display: inline-flex;
  gap: 6px;
  margin: 0;
  padding: 7px 18px;
  border-radius: 999px;
  background: #fff;
  color: var(--g-accent);
  font-size: 0.86rem;
  font-weight: 700;
  text-shadow: none !important;
  box-shadow: 0 6px 14px -8px rgb(0 0 0 / 35%);
}

/* --- 結果の本文パネル --- */
.result-body { display: grid; gap: 14px; margin-top: 16px; }

.panel {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 18px 18px 20px;
  box-shadow: var(--shadow-soft);
}

.panel-title {
  margin: 0 0 12px;
  font-size: 0.95rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--g-accent), #fff var(--accent-lift));
}

.persona { margin: 0; font-size: 0.93rem; font-weight: 500; }

.group-summary {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 2.5px dotted var(--line);
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--sub);
}
.group-summary strong { color: color-mix(in srgb, var(--g-accent), #fff var(--accent-lift)); }

/* --- 歩き方バランス(4軸)---
   16Personalities の軸バーと同じ読み方: どちらの端に寄っているかと、その割合 */
.gauges { display: grid; gap: 16px; }

.gauge-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.gauge-label { font-size: 0.8rem; font-weight: 700; color: var(--sub); }
.gauge-verdict { font-size: 0.95rem; color: color-mix(in srgb, var(--g-accent), #fff var(--accent-lift)); font-variant-numeric: tabular-nums; }

.gauge-bar {
  position: relative;
  height: 12px;
  margin: 6px 0 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--g-from), var(--g-to));
  opacity: 0.9;
}

.gauge-knob {
  position: absolute;
  top: 50%;
  left: var(--pos);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface);
  border: 4px solid var(--g-accent);
  transform: translate(-50%, -50%);
  box-shadow: 0 3px 8px -2px rgb(0 0 0 / 30%);
  animation: knob-in 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}

/* 真ん中から寄っている側へ滑らせる */
@keyframes knob-in {
  from { left: 50%; }
  to { left: var(--pos); }
}

.gauge-ends { display: flex; justify-content: space-between; font-size: 0.74rem; font-weight: 700; color: var(--sub); }
.gauge[data-leaning="high"] .gauge-end--high,
.gauge[data-leaning="low"] .gauge-end--low { color: color-mix(in srgb, var(--g-accent), #fff var(--accent-lift)); }

/* --- 13タイプ図鑑 ---
   自分のグループだけ色を出し、ほかはシルエット。友だちに聞く口実を作る */
.dex-lead { margin: -6px 0 14px; font-size: 0.82rem; font-weight: 500; color: var(--sub); }

.dex-group { padding: 12px 0; border-top: 2px solid var(--line); }
.dex-group:first-of-type { border-top: 0; padding-top: 0; }

.dex-group-name {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--sub);
}
.dex-group-name span { margin-left: 8px; font-size: 0.72rem; letter-spacing: 0; font-weight: 500; }
.dex-group.is-own .dex-group-name { color: color-mix(in srgb, var(--g-accent), #fff var(--accent-lift)); }

.dex-tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.dex-tile { position: relative; }

.dex-btn {
  appearance: none;
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 4px 0;
  border: 0;
  border-radius: 14px;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.18s ease;
}
.dex-btn:hover { background: color-mix(in srgb, var(--g-accent) 8%, transparent); transform: translateY(-2px); }
.dex-btn:active { transform: scale(0.95); }
.dex-btn:focus-visible { outline: 3px solid var(--g-accent); outline-offset: 2px; }

.dex-medal {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--line);
}
.dex-medal img { width: 90%; height: 90%; object-fit: contain; }
.dex-medal .figure-emoji { font-size: 1.9rem; line-height: 1; }

.dex-group:not(.is-own) .dex-medal img,
.dex-group:not(.is-own) .dex-medal .figure-emoji { filter: brightness(0); opacity: 0.28; }

.dex-group.is-own .dex-medal { background: linear-gradient(135deg, var(--g-from), var(--g-to)); }

.dex-name { font-size: 0.72rem; font-weight: 700; color: var(--sub); }
.dex-group.is-own .dex-name { color: var(--ink); }

.dex-tile.is-you .dex-medal { box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--g-accent); }

.dex-you {
  position: absolute;
  top: -6px;
  right: calc(50% - 38px);
  padding: 0 7px;
  border-radius: 999px;
  background: var(--g-accent);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* --- シェア ---
   X は投稿画面(画像はシェア用ページのOGPカードで出る)、Instagram はストーリーズ用の縦長画像。
   それ以外は共有シートに任せる */
.share {
  display: grid;
  gap: 10px;
  padding: 16px 16px 14px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
}
.share p { margin: 0; }

.share-title { text-align: center; font-size: 0.95rem; font-weight: 700; }

.share-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.share .btn { padding: 14px 10px; font-size: 0.92rem; }

/* 共通の .btn が後ろで定義されているため、.share で詳細度を上げて勝たせる */
.share .btn--x { background: #111; border-color: #111; color: #fff; }
.share .btn--ig {
  background: linear-gradient(135deg, #6a4bd0, #d6297a 55%, #f59f3a);
  border-color: transparent;
  color: #fff;
}
.share .btn:disabled { opacity: 0.6; cursor: default; transform: none; }
.share .btn--sub { font-size: 0.86rem; color: var(--sub); }

.share-tags {
  text-align: center;
  font-size: 0.76rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--g-accent), #fff var(--accent-lift));
}
.share-status:empty { display: none; }
.share-status {
  padding: 8px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--g-accent) 8%, var(--surface));
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.7;
}

/* --- シェア用ページ(r/<type>/) --- */
.landing { padding-top: 22px; }
.landing-actions { display: grid; gap: 11px; }

/* --- アプリ版診断の予告 ---
   まだ無い機能を「使える」と読ませないよう、開発中であることをバッジで明示する */
.coming {
  display: grid;
  gap: 8px;
  padding: 16px 18px 18px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  text-align: center;
}
.coming p { margin: 0; }

.coming-badge {
  justify-self: center;
  padding: 2px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--g-from), var(--g-to));
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.coming-title { font-size: 0.95rem; font-weight: 700; }
.coming-text { font-size: 0.8rem; font-weight: 500; line-height: 1.75; color: var(--sub); text-align: left; }
.coming .btn { margin-top: 6px; }

/* --- この診断について ---
   結果を読み終えた位置に置く注釈。楽しさを損なわないよう、警告ではなく語りかけの調子で控えめに */
.about {
  padding: 16px 18px;
  border-radius: var(--radius);
  border: 2px dashed var(--line);
  color: var(--sub);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.8;
}
.about p { margin: 0; }
.about .about-title {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 700;
}
.about .about-sub { margin-top: 8px; font-size: 0.74rem; }

/* --- タイプ概要モーダル(図鑑から開く) ---
   ヒーローと同じ風景・配色を小さく再利用し、結果画面と同じ視覚言語で見せる */
.type-modal {
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 24px 48px -16px rgb(0 0 0 / 45%);
  overflow: auto;
  overscroll-behavior: contain;
}
.type-modal[open] { animation: modal-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.type-modal::backdrop { background: rgb(30 20 10 / 45%); backdrop-filter: blur(3px); }

/* モーダル表示中は背面のページをスクロールさせない */
body:has(.type-modal[open]) { overflow: hidden; }

@keyframes modal-in {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: none; }
}

.modal-head {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 18px 20px 22px;
  background: linear-gradient(170deg, var(--g-from), var(--g-to));
  color: #fff;
  text-align: center;
}
.modal-head > :not(.scene) { position: relative; }
.modal-head p, .modal-head h2 { text-shadow: 0 2px 12px rgb(0 0 0 / 22%); }

/* .modal-head > :not(.scene) の position: relative と同じ詳細度のため、後に書いて勝たせる */
.modal-head > .modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 28%);
  color: #fff;
  font: inherit;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}
.modal-close:hover { background: rgb(255 255 255 / 42%); }
.modal-close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* 朝日の光輪はヒーロー用の位置・大きさなので、モーダルの柴犬の位置に合わせ直す */
.modal-head[data-group="dawn"] .scene-sky {
  background:
    radial-gradient(circle at 50% 117px, rgb(255 236 170 / 70%) 0 68px, transparent 69px),
    radial-gradient(circle at 50% 117px, rgb(255 236 170 / 28%) 0 88px, transparent 89px);
}

.modal-figure {
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  margin: 0 auto 6px;
  border-radius: 50%;
  background: rgb(255 255 255 / 28%);
  box-shadow: inset 0 0 0 5px rgb(255 255 255 / 30%);
}
.modal-figure img { width: 92%; height: 92%; object-fit: contain; }
.modal-figure .figure-emoji { font-size: 3.6rem; line-height: 1; }

.modal-name { margin: 0; font-size: 2rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1.25; }
.modal-head .type-name-en { margin-bottom: 8px; }
.modal-tagline { margin: 0; font-size: 0.98rem; font-weight: 700; }

.modal-body { display: grid; gap: 18px; padding: 18px 20px 24px; }
.modal-body section + section { padding-top: 16px; border-top: 2.5px dotted var(--line); }

/* --- 続けるコツ / 落ちるとき ---
   タイプの当たり外れだけで終わらせず、行動に繋がるものを持ち帰ってもらう */
.insights { display: grid; gap: 12px; }

.insight {
  border-radius: var(--radius);
  padding: 16px 18px 18px;
  box-shadow: var(--shadow-soft);
  background: var(--surface);
}

.insight h3 {
  margin: 0 0 8px;
  font-size: 0.9rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.insight p {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.8;
  color: var(--ink);
}

.insight-icon { font-size: 1.05rem; line-height: 1; }

/* 強みは温かく、弱点は注意色ではなく落ち着いた面で。
   弱点を赤で煽ると「できていない」印象が先に立つ */
.insight--strength {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--yellow) 22%, var(--surface)),
    color-mix(in srgb, var(--orange) 10%, var(--surface)));
}
.insight--strength h3 { color: var(--orange-deep); }

.insight--pitfall {
  background: color-mix(in srgb, var(--line) 34%, var(--surface));
}
.insight--pitfall h3 { color: var(--sub); }

/* 弱点を見せた直後の受け皿。ここが連続達成＝アプリの価値へ繋がるため、
   3つのうちここだけ枠線で立たせる */
.insight--streak {
  background: var(--surface);
  border: 2.5px solid var(--orange);
  box-shadow: var(--shadow-pop);
}
.insight--streak h3 { color: var(--orange-deep); }

/* --- 8,000歩のつくりかた ---
   「連続の一手」を行動 × 歩数 × 回数まで落とし、合計が8,000歩になる内訳として見せる。
   得意を伸ばす項目(core)は濃く、かんたんに足す項目(easy)は淡く、土台はグレー */
.plan {
  margin-top: 14px;
  padding: 14px 14px 12px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--g-accent) 7%, var(--surface));
}

/* .insight p の本文スタイルより優先させるため .plan で詳細度を上げる */
.plan .plan-title { margin: 0 0 4px; font-size: 0.9rem; font-weight: 700; }

.plan-block { padding: 10px 0 4px; }
.plan-block + .plan-block { margin-top: 6px; border-top: 2px dashed var(--line); }

.plan .plan-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 0 8px;
  font-size: 0.86rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--g-accent), #fff var(--accent-lift));
}
.plan-label span { font-size: 0.76rem; color: var(--sub); font-weight: 500; }
.plan-label strong { color: var(--ink); }

.plan-bar {
  display: flex;
  gap: 2px;
  height: 12px;
  margin-bottom: 10px;
  border-radius: 999px;
  overflow: hidden;
}

.plan-seg { flex-grow: 0; flex-shrink: 1; background: color-mix(in srgb, var(--g-accent) var(--tone), var(--surface)); }
.plan-seg--base { background: var(--line); }

.plan-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.plan-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 8px;
  font-size: 0.86rem;
  line-height: 1.5;
}

.plan-dot {
  width: 10px;
  height: 10px;
  margin-top: 0.4em;
  border-radius: 3px;
  background: color-mix(in srgb, var(--g-accent) var(--tone), var(--surface));
}
.plan-item--base .plan-dot { background: var(--line); }
.plan-item--base { color: var(--sub); }

.plan-action { font-weight: 500; }

.plan-role {
  display: inline-block;
  margin-right: 6px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.7;
  vertical-align: 0.1em;
}
.plan-role--core { background: var(--g-accent); color: #fff; }
.plan-role--easy {
  background: color-mix(in srgb, var(--g-accent) 14%, var(--surface));
  color: color-mix(in srgb, var(--g-accent), #fff var(--accent-lift));
}

.plan-calc { display: block; font-size: 0.74rem; color: var(--sub); font-variant-numeric: tabular-nums; }
.plan-steps { font-size: 0.86rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

.plan .plan-note { margin: 8px 0 0; text-align: right; font-size: 0.72rem; color: var(--sub); }

.result-actions { display: grid; gap: 11px; margin-top: 6px; }

.btn {
  display: block;
  padding: 17px 18px;
  border-radius: 999px;
  border: 2.5px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

.btn--primary {
  background: linear-gradient(135deg, var(--orange-deep), var(--yellow));
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-pop);
}
.btn--primary:disabled { opacity: 0.6; cursor: default; box-shadow: none; transform: none; }

.btn--app { border-color: var(--orange); color: var(--orange-deep); }

/* Web Share 非対応時に出す生成画像 */
.card-preview { margin-top: 18px; }
.card-preview img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
/* ストーリーズ用の縦長画像は画面幅いっぱいだと長すぎるため、幅を絞る */
.card-preview--story img { width: min(100%, 300px); margin: 0 auto; }

.card-preview-note {
  margin: 10px 0 0;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--sub);
  text-align: center;
}

.footer { margin-top: 48px; text-align: center; color: var(--sub); font-size: 0.78rem; font-weight: 500; }
.footer p { margin: 0; }
.footer .footer-privacy { margin-top: 8px; font-size: 0.7rem; line-height: 1.7; }
.footer a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}