@charset "utf-8";

/* ===========================================================
   こころたび — 生成りの紙に、くすんだ藍・えんじ・若草。
   色と字面は静かなまま。にぎやかにするのは「絵文字」と「動き」。
   読む文字そのものは、けっして揺らさない。
   =========================================================== */

:root {
  /* 紙と墨 */
  --paper:      #F6F1E7;  /* 生成り（地） */
  --paper-2:    #FBF8F1;  /* 生成り（うすい面） */
  --ink:        #3B3733;  /* 墨（本文） */
  --ink-2:      #6D655B;  /* うすい墨（そえ書き） */
  --ink-3:      #928A7C;  /* もっとうすい墨（端の言葉） */
  --line:       #E1D8C8;  /* 罫 */

  /* さし色（いずれも彩度をおさえたもの） */
  --ai:         #4C6274;  /* くすんだ藍 */
  --ai-deep:    #3B4E5E;  /* 藍（濃） */
  --ai-pale:    #E7EAEC;  /* 藍（ごくうすい面） */
  --enji:       #8E5B58;  /* えんじ */
  --enji-pale:  #F2E8E4;  /* えんじ（ごくうすい面） */
  --wakakusa:   #7C8B63;  /* 若草 */
  --wakakusa-pale: #EBEDE1; /* 若草（ごくうすい面） */

  /* 角 */
  --r:    14px;
  --r-lg: 22px;

  /* 余白（8px きざみ） */
  --s1: 0.5rem;   /*  8px */
  --s2: 1rem;     /* 16px */
  --s3: 1.5rem;   /* 24px */
  --s4: 2rem;     /* 32px */
  --s5: 3rem;     /* 48px */
  --s6: 4.5rem;   /* 72px */

  /* 動き。文字の入れかわりはゆっくり、絵文字だけは軽快に跳ねる */
  --dur:   0.7s;
  --dur-l: 1.1s;
  --ease:  cubic-bezier(0.25, 0.1, 0.25, 1);
  --hop:   cubic-bezier(0.28, 0.84, 0.42, 1);

  /* 絵文字の字面（本文の明朝には混ぜない） */
  --emoji-font: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", YuMincho,
               "Noto Serif JP", "Songti SC", serif;
  font-size: clamp(16.5px, 15.6px + 0.28vw, 19px);
  line-height: 2;
  letter-spacing: 0.045em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

[hidden] { display: none !important; }

.wrap {
  position: relative;
  z-index: 1;
  max-width: 34rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 9vw, 5.5rem) clamp(1.25rem, 5.5vw, 2rem) var(--s5);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--paper-2);
  color: var(--ai-deep);
  padding: var(--s1) var(--s2);
  border-radius: 0 0 var(--r) 0;
}
.skip-link:focus { left: 0; z-index: 10; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 絵文字は、ぜんぶこの字面で出す */
.parade span, .point-emoji, .btn-emoji, .stage-dots li, .stage-emoji, .walker-emoji,
.choice-emoji, .mate-emoji, .combo-emoji, .combo-op, .gauge-emoji, .trait-emoji,
.vow-emoji, .sky-emoji, .fanfare span, .burst span, .traits-title span,
.gauges-title span, .result-title span, .quiz-note span, .foot span, .home-link span {
  font-family: var(--emoji-font);
  font-style: normal;
  letter-spacing: 0;
}

/* ---------- 画面（1画面に1つのことだけ） ---------- */

.screen { animation: appear var(--dur-l) var(--ease) both; }

@keyframes appear {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* 絵文字だけの、ワシャワシャした動き */
@keyframes hop {
  0%, 62%, 100% { transform: translateY(0) rotate(0); }
  74%           { transform: translateY(-0.5em) rotate(-9deg); }
  86%           { transform: translateY(-0.16em) rotate(6deg); }
}
@keyframes wiggle {
  0%, 100% { transform: rotate(-8deg); }
  50%      { transform: rotate(8deg); }
}
@keyframes drift {
  0%, 100% { transform: translate(0, 0) rotate(-6deg); }
  50%      { transform: translate(var(--swing, 12px), -14px) rotate(8deg); }
}
@keyframes fallen {
  0%   { transform: translate3d(0, -12vh, 0) rotate(0deg); opacity: 0; }
  8%   { opacity: 1; }
  100% { transform: translate3d(var(--drift, 0px), 108vh, 0) rotate(var(--spin, 360deg)); opacity: 1; }
}
@keyframes scatter {
  0%   { transform: translate(0, 0) scale(0.6); opacity: 1; }
  100% { transform: translate(var(--dx, 0px), var(--dy, -40px)) scale(1.1); opacity: 0; }
}
@keyframes pulse-emoji {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.22); }
}

/* ---------- はじめの画面 ---------- */

/* なかまの行列。文字ではないので、いくらでも跳ねてよい */
.parade {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.18em 0.3em;
  margin: 0 0 var(--s4);
  font-size: clamp(1.25rem, 1rem + 1.4vw, 1.7rem);
  line-height: 1.5;
}
.parade span {
  display: inline-block;
  animation: hop 2.6s var(--hop) infinite;
  animation-delay: calc(var(--i, 0) * 0.11s);
}
.parade span:nth-child(1)  { --i: 1;  }
.parade span:nth-child(2)  { --i: 2;  }
.parade span:nth-child(3)  { --i: 3;  }
.parade span:nth-child(4)  { --i: 4;  }
.parade span:nth-child(5)  { --i: 5;  }
.parade span:nth-child(6)  { --i: 6;  }
.parade span:nth-child(7)  { --i: 7;  }
.parade span:nth-child(8)  { --i: 8;  }
.parade span:nth-child(9)  { --i: 9;  }
.parade span:nth-child(10) { --i: 10; }
.parade span:nth-child(11) { --i: 11; }
.parade span:nth-child(12) { --i: 12; }
.parade span:nth-child(13) { --i: 13; }
.parade span:nth-child(14) { --i: 14; }
.parade span:nth-child(15) { --i: 15; }
.parade span:nth-child(16) { --i: 16; }

.site-title {
  margin: 0 0 var(--s4);
  font-size: clamp(2rem, 1.5rem + 2.4vw, 2.9rem);
  font-weight: 500;
  letter-spacing: 0.34em;
  line-height: 1.5;
  color: var(--ai-deep);
  text-indent: 0.34em;   /* 字間ぶんの見た目のずれをもどす */
  text-align: center;
}

.lede {
  margin: 0 0 var(--s3);
  color: var(--ink);
}

/* はじめの画面の、みじかい4つ */
.points {
  margin: var(--s4) 0;
  padding: var(--s3);
  list-style: none;
  background: var(--paper-2);
  border-radius: var(--r-lg);
}
.points li {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  margin: 0 0 var(--s2);
  font-size: 0.94em;
  line-height: 1.9;
}
.points li:last-child { margin-bottom: 0; }
.points b { font-weight: 500; color: var(--ai-deep); }
.point-emoji {
  flex: none;
  font-size: 1.25em;
  line-height: 1.5;
  display: inline-block;
  animation: hop 3.4s var(--hop) infinite;
}
.points li:nth-child(2) .point-emoji { animation-delay: 0.4s; }
.points li:nth-child(3) .point-emoji { animation-delay: 0.8s; }
.points li:nth-child(4) .point-emoji { animation-delay: 1.2s; }

/* 「参考です／性格は変わります」は、結果のいちばん最後に1回だけ置く */
.vow {
  margin: var(--s5) 0;
  padding: var(--s3);
  background: var(--paper-2);
  border-radius: var(--r);
  font-size: 1.02em;
}
.vow em { font-style: normal; color: var(--enji); }
.vow-result { margin-top: var(--s6); }
.vow-emoji {
  display: block;
  margin-bottom: var(--s1);
  font-size: 1.2em;
  letter-spacing: 0.2em;
}

.cta { margin: var(--s5) 0 var(--s3); text-align: center; }

.note {
  margin: var(--s2) 0 0;
  color: var(--ink-2);
  font-size: 0.86em;
  line-height: 1.9;
}
.quiz-note { margin-top: var(--s3); text-align: center; }
.fallback-msg { margin-top: var(--s4); text-align: center; }

/* ---------- ボタン ---------- */

.btn {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--paper-2);
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}

.btn-main {
  display: inline-block;
  padding: 0.85em 2.4em;
  border-radius: 999px;
  border-color: var(--ai-deep);
  background: var(--ai-deep);
  color: var(--paper);
  letter-spacing: 0.22em;
  text-indent: 0.22em;
}
.btn-main:hover { background: var(--ai); border-color: var(--ai); }
.btn-emoji {
  display: inline-block;
  margin-right: 0.5em;
  text-indent: 0;
  animation: hop 2.8s var(--hop) infinite;
}
.btn-main:hover .btn-emoji { animation-duration: 0.9s; }

.btn:focus-visible {
  outline: 2px solid var(--ai);
  outline-offset: 3px;
}

/* ---------- 質問の画面 ---------- */

.journey { margin: 0 0 var(--s4); }

/* 道の目じるし。いま居るところだけ跳ねる */
.stage-dots {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 0.2em;
  margin: 0 0 var(--s1);
  padding: 0 0.4em;
  list-style: none;
  font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.2rem);
  line-height: 1.4;
}
.stage-dots li {
  display: inline-block;
  opacity: 0.32;
  filter: grayscale(0.75);
  transition: opacity var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.stage-dots li.is-done { opacity: 0.7; filter: grayscale(0.2); }
.stage-dots li.is-here {
  opacity: 1;
  filter: none;
  animation: hop 1.5s var(--hop) infinite;
}

.journey-map {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.road {
  stroke: var(--line);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1 6;
}
.road-done {
  stroke: var(--ai);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--dur-l) var(--ease);
}
.walker {
  transition: transform var(--dur-l) var(--ease);
}
.walker-emoji {
  font-size: 13px;
  animation: wiggle 0.9s ease-in-out infinite;
  transform-origin: center;
}

.journey-stage {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.45em;
  margin: var(--s1) 0 0;
  color: var(--ink-2);
  font-size: 0.88em;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}
.stage-emoji {
  display: inline-block;
  font-size: 1.15em;
  text-indent: 0;
  animation: hop 2.2s var(--hop) infinite;
}

.q-scene {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin: 0 0 var(--s1);
  color: var(--ink-3);
  font-size: 0.86em;
  letter-spacing: 0.14em;
}
.q-scene .scene-emoji { font-family: var(--emoji-font); font-size: 1.15em; }

.q-text {
  margin: 0 0 var(--s3);
  font-size: clamp(1.16rem, 1.02rem + 0.7vw, 1.45rem);
  font-weight: 500;
  line-height: 1.85;
}

.choices { display: flex; flex-direction: column; gap: 0.7rem; }

.choice {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  width: 100%;
  text-align: left;
  padding: 0.85em 1.1em;
  font-size: 1em;
  line-height: 1.7;
}
.choice:hover {
  background: #fff;
  border-color: var(--ai);
}
.choice-emoji {
  flex: none;
  display: inline-block;
  font-size: 1.2em;
  line-height: 1.5;
}
.choice:hover .choice-emoji,
.choice:focus-visible .choice-emoji { animation: hop 0.8s var(--hop) infinite; }

/* ---------- 結果の画面 ---------- */

.result-title {
  margin: 0 0 var(--s3);
  font-size: 1.06em;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: 0.1em;
}
.result-title span { display: inline-block; animation: hop 2s var(--hop) infinite; }

/* 「どの動物 × どの性格」のかけ算 */
.combo {
  margin: 0 0 var(--s4);
  padding: var(--s3) var(--s2);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-align: center;
}
.combo-lead {
  margin: 0 0 var(--s3);
  color: var(--ink-3);
  font-size: 0.8em;
  letter-spacing: 0.12em;
  line-height: 1.8;
}
.combo-eq {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.4rem, 2vw, 1.2rem);
}
.combo-part {
  flex: 1 1 0;
  max-width: 11rem;
  padding: var(--s2) 0.4em;
  border-radius: var(--r);
}
.combo-animal { background: var(--ai-pale); }
.combo-color  { background: var(--wakakusa-pale); }
.combo-emoji {
  display: block;
  font-size: clamp(2rem, 1.5rem + 2.6vw, 2.9rem);
  line-height: 1.25;
  animation: hop 2.4s var(--hop) infinite;
}
.combo-color .combo-emoji { animation-delay: 0.5s; }
.combo-role {
  display: block;
  margin: 0.3em 0 0.1em;
  color: var(--ink-3);
  font-size: 0.74em;
  letter-spacing: 0.1em;
  line-height: 1.6;
}
.combo-name {
  display: block;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.2rem);
  line-height: 1.6;
  color: var(--ai-deep);
}
.combo-op {
  flex: none;
  font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem);
  color: var(--ink-3);
  animation: pulse-emoji 2.4s var(--ease) infinite;
}
.combo-arrow {
  margin: var(--s2) 0 var(--s1);
  color: var(--ink-3);
  font-size: 1.2em;
  line-height: 1;
}
.combo-result {
  margin: 0;
  font-size: clamp(1.16rem, 1rem + 1vw, 1.5rem);
  line-height: 1.7;
  color: var(--ai-deep);
}
.combo-result .combo-emoji {
  display: inline-block;
  font-size: 1.15em;
  margin-right: 0.25em;
  animation: none;
}
.combo-count {
  margin: var(--s2) 0 0;
  color: var(--ink-3);
  font-size: 0.78em;
  letter-spacing: 0.1em;
}

.mates { margin: 0 0 var(--s5); }

.mate {
  padding: var(--s4) var(--s3);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.mate + .mate { margin-top: var(--s3); }

.mate-emoji {
  display: inline-block;
  font-size: 2.6rem;
  line-height: 1.2;
  animation: hop 3s var(--hop) infinite;
}
.mate-rank {
  display: block;
  margin: var(--s2) 0 var(--s1);
  color: var(--ink-3);
  font-size: 0.8em;
  letter-spacing: 0.18em;
}
.mate-name {
  margin: 0;
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem);
  font-weight: 500;
  line-height: 1.7;
  color: var(--ai-deep);
}
.mate-formula {
  margin: var(--s1) 0 0;
  color: var(--ink-2);
  font-size: 0.86em;
  letter-spacing: 0.08em;
  line-height: 1.9;
}
.mate-formula .combo-emoji { display: inline-block; font-size: 1.15em; animation: none; }
.mate-sub .mate-name { font-size: clamp(1.1rem, 1rem + 0.6vw, 1.35rem); }
.mate-sub .mate-emoji { font-size: 1.9rem; animation-delay: 0.6s; }
.mate-lead { margin: var(--s2) 0 0; max-width: 34rem; }

.mate-facets {
  margin: var(--s3) 0 0;
  padding: var(--s3) 0 0;
  border-top: 1px solid var(--line);
}
.mate-facets div { margin: 0 0 var(--s2); }
.mate-facets div:last-child { margin-bottom: 0; }
.mate-facets dt {
  display: flex;
  align-items: center;
  gap: 0.4em;
  color: var(--ink-3);
  font-size: 0.82em;
  letter-spacing: 0.14em;
}
.mate-facets dt span { font-family: var(--emoji-font); font-size: 1.15em; }
.mate-facets dd { margin: 0; font-size: 0.98em; max-width: 34rem; }

/* 得意なこと／苦手なこと */
.traits { margin: 0 0 var(--s5); }
.traits-title {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin: 0 0 var(--s3);
  font-size: 1.02em;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--ai-deep);
}
.traits-title span { display: inline-block; animation: hop 3.2s var(--hop) infinite; }
.traits-body { display: grid; gap: var(--s3); }
.trait {
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.trait-good { background: var(--wakakusa-pale); }
.trait-weak { background: var(--enji-pale); }
.trait-head {
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin: 0 0 var(--s2);
  font-size: 1em;
  font-weight: 500;
  letter-spacing: 0.14em;
}
.trait-good .trait-head { color: #5C6B45; }
.trait-weak .trait-head { color: #7A4744; }
.trait-emoji { display: inline-block; font-size: 1.3em; animation: hop 2.6s var(--hop) infinite; }
.trait-weak .trait-emoji { animation-delay: 0.7s; }
.trait-list { margin: 0; padding: 0; list-style: none; }
.trait-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  margin: 0 0 var(--s2);
  font-size: 0.97em;
  line-height: 1.9;
}
.trait-list li:last-child { margin-bottom: 0; }
.trait-list li > span:first-child {
  flex: none;
  font-family: var(--emoji-font);
  font-size: 1.05em;
  line-height: 1.85;
}
.trait-whose {
  display: block;
  margin-bottom: 0.1em;
  color: var(--ink-3);
  font-size: 0.82em;
  letter-spacing: 0.1em;
}

.gauges-title {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin: 0 0 var(--s1);
  font-size: 1.02em;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--ai-deep);
}
.gauges-title span { display: inline-block; animation: hop 3.6s var(--hop) infinite; }
.gauges-lead { margin: 0 0 var(--s4); color: var(--ink-2); font-size: 0.86em; max-width: 34rem; }
.gauges { margin: 0; }

.gauge { margin: 0 0 var(--s4); }
.gauge-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s2);
  line-height: 1.6;
}
.gauge-name { display: flex; align-items: baseline; gap: 0.4em; font-size: 1em; }
.gauge-emoji { font-size: 1.1em; }
.gauge-val {
  font-size: 0.9em;
  color: var(--ai-deep);
  font-variant-numeric: tabular-nums;
}
.gauge-track {
  position: relative;
  height: 2px;
  margin: 0.95em 0 0.5em;
  background: var(--line);
  border-radius: 2px;
}
.gauge-track::before {   /* まんなかの目印 */
  content: "";
  position: absolute;
  left: 50%;
  top: -4px;
  width: 1px;
  height: 10px;
  background: var(--line);
}
.gauge-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 11px;
  margin: 0;
  border-radius: 50%;
  background: var(--ai);
  transform: translate(-50%, -50%);
  transition: left var(--dur-l) var(--ease);
}
.gauge-ends {
  display: flex;
  justify-content: space-between;
  gap: var(--s2);
  color: var(--ink-3);
  font-size: 0.79em;
  line-height: 1.7;
}
.gauge-ends span { max-width: 46%; }
.gauge-ends span:last-child { text-align: right; }

/* ---------- 結果が出たときの、にぎやかな絵文字 ---------- */

/* 降ってくるほう（動いてよいときだけ、JS が入れる） */
.fanfare {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.fanfare:empty { display: none; }
.fanfare span {
  position: absolute;
  top: 0;
  left: var(--x, 50%);
  font-size: var(--size, 1.6rem);
  line-height: 1;
  will-change: transform;
  animation: fallen var(--fall, 4s) linear var(--delay, 0s) both;
}

/* 動きを止めている人には、絵文字の「数と色」でにぎやかさを出す */
.fanfare.is-still {
  position: static;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2em 0.35em;
  margin: 0 0 var(--s3);
  padding: var(--s2);
  background: var(--paper-2);
  border-radius: var(--r-lg);
  overflow: visible;
}
.fanfare.is-still span {
  position: static;
  animation: none;
  font-size: 1.35rem;
}

/* えらんだ瞬間に散るほう */
.burst {
  position: fixed;
  z-index: 3;
  pointer-events: none;
  font-size: 1.3rem;
  line-height: 1;
}
.burst span {
  position: absolute;
  display: inline-block;
  animation: scatter 0.85s var(--ease) both;
}

/* 広い画面の余白でゆれているもの（1024px 未満では出さない） */
.sky { display: none; }
.sky-emoji {
  position: fixed;
  top: var(--top, 20%);
  font-size: 1.5rem;
  line-height: 1;
  opacity: 0.5;
  animation: drift 9s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.sky-l { left: clamp(0.5rem, 3vw, 3.5rem); }
.sky-r { right: clamp(0.5rem, 3vw, 3.5rem); }

/* ---------- 見つからない画面（404） ---------- */

.lost-title {
  margin: 0 0 var(--s4);
  font-size: clamp(1.4rem, 1.2rem + 1.2vw, 1.9rem);
  font-weight: 500;
  color: var(--ai-deep);
  letter-spacing: 0.14em;
  line-height: 1.7;
}
.home-link {
  color: var(--ai-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.15em;
  transition: border-color var(--dur) var(--ease);
}
.home-link:hover { border-color: var(--ai); }

/* ---------- ゆかした（footer） ---------- */

.foot {
  padding-top: 0;
  padding-bottom: var(--s5);
  color: var(--ink-3);
  font-size: 0.78em;
  text-align: center;
  line-height: 1.9;
}
.foot p { margin: 0; }

/* ===========================================================
   画面の幅（375 / 768 / 1280 で実測して合わせている）
   =========================================================== */

/* 携帯：問いと選択肢が、スクロールなしで1画面に収まるようにする */
@media (max-width: 47.99rem) {
  /* はじめの画面は、「はじめる」が1画面のなかに見えるところまで詰める */
  body[data-screen="start"] .wrap { padding-top: var(--s3); }
  .parade { margin-bottom: var(--s3); }
  .site-title { margin-bottom: var(--s3); }
  .lede { margin-bottom: var(--s2); }
  .points { margin: var(--s3) 0; padding: var(--s2); }
  body[data-screen="start"] .cta { margin-top: var(--s3); }

  body[data-screen="quiz"] .wrap {
    padding-top: var(--s3);
    padding-bottom: var(--s3);
  }
  body[data-screen="quiz"] .foot { display: none; }
  .journey { margin-bottom: var(--s3); }
  .q-text { margin-bottom: var(--s3); line-height: 1.75; }
  .choices { gap: 0.6rem; }
  .choice { padding: 0.7em 0.9em; line-height: 1.6; }
  .quiz-note { margin-top: var(--s2); font-size: 0.8em; }
  .combo-part { padding: var(--s2) 0.2em; }
  .combo-role { letter-spacing: 0.04em; }
}

/* 背の低い携帯（SE など、ブラウザの枠を引いたあと）。
   問いと選択肢がいちばん長いときでも、スクロールせずに答えられるようにする。
   道はしまうが、そのかわり絵文字の目じるしが道になる。 */
@media (max-width: 47.99rem) and (max-height: 47rem) {
  body[data-screen="quiz"] .wrap { padding-top: var(--s2); }
  .journey-map { display: none; }
  .journey { margin-bottom: var(--s2); }
  .stage-dots {
    position: relative;
    margin-bottom: 0;
    padding-bottom: 0.45em;
  }
  .stage-dots::after {
    content: "";
    position: absolute;
    left: 0.4em; right: 0.4em; bottom: 0;
    border-bottom: 2px dotted var(--line);
  }
  .q-text { font-size: 1.08rem; line-height: 1.7; margin-bottom: var(--s2); }
  .choices { gap: 0.45rem; }
  .choice { padding: 0.6em 0.85em; line-height: 1.55; }
  .quiz-note { margin-top: var(--s1); }
}

/* せまい携帯（375 未満・SE など）は、さらに詰める */
@media (max-width: 23.5rem) {
  .site-title { letter-spacing: 0.2em; text-indent: 0.2em; }
  .btn-main { padding: 0.85em 1.6em; }
  .parade { font-size: 1.15rem; }
  .stage-dots { font-size: 0.9rem; }
}

/* 板（768）から上：ゆとりを戻す */
@media (min-width: 48rem) {
  body { line-height: 2.05; }
  .gauge-ends { font-size: 0.8em; }
  .points li { font-size: 0.96em; }
}

/* PC（1024〜）：読む幅は保ったまま、余白にだけ絵文字を置く */
@media (min-width: 64rem) {
  .sky { display: block; }
  body[data-screen="result"] .wrap { max-width: 46rem; }
  body[data-screen="result"] .gauges {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s5);
  }
  /* 幅が広がった結果の画面でだけ、得意と苦手をならべる（読む幅は保つ） */
  body[data-screen="result"] .traits-body {
    grid-template-columns: 1fr 1fr;
    gap: var(--s4);
    align-items: start;
  }
  .combo-part { max-width: 13rem; }
}

/* 1280 以上でも、本文はこれ以上ひろげない（横に間延びさせない） */
@media (min-width: 80rem) {
  .sky-emoji { font-size: 1.8rem; }
  .sky-l { left: max(1rem, calc(50vw - 30rem)); }
  .sky-r { right: max(1rem, calc(50vw - 30rem)); }
}

/* ===========================================================
   動きを止める（この配慮は外さない）
   止めたぶんのにぎやかさは、絵文字の数と色が引き受ける
   =========================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .screen { animation: none; }
  .road-done, .walker, .gauge-dot { transition: none; }
  .parade span, .point-emoji, .btn-emoji, .stage-emoji, .walker-emoji,
  .choice-emoji, .mate-emoji, .combo-emoji, .combo-op, .trait-emoji,
  .stage-dots li.is-here, .sky-emoji, .result-title span,
  .traits-title span, .gauges-title span {
    animation: none !important;
    transform: none !important;
  }
  /* 降らせるかわりに、そのまま並べて見せる */
  .fanfare { position: static; overflow: visible; }
  .fanfare span { position: static; animation: none !important; }
  .sky-emoji { opacity: 0.6; }
}