/* iOS開発妖怪診断 スタイル: 和風ホラー×ポップ、ダークベース+提灯アクセント */

:root {
  /* 御札・呪符。墨の地に朱と金（docs/design.md） */
  --color-bg: #0d0a12;
  --color-bg-alt: #151019;
  --color-surface: #1c1620;
  --color-accent: #c8102e;
  --color-accent-light: #d4af37;
  --color-text: #f2e8d5;
  --color-text-muted: #9d9285;
  --color-border: #3a3038;
  --color-seal: #c8102e;
  /* 符に刷る朱。墨地の上で沈まないよう、印（--color-seal）より少し明るくする */
  --color-vermilion: #e8394f;
  /* 札の紙。妖怪のイラストは白地の墨絵なので、
     この色の地に mix-blend-mode: multiply で載せると白地が溶けて「紙に描かれた絵」になる */
  --color-paper: #efe4cf;
  --color-gold: #d4af37;
  /* 見出しは明朝、本文はゴシック。和文の骨格で世界観を出す */
  --font-mincho: "Hiragino Mincho ProN", "HiraMinProN-W3", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  --font-gothic: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-family: var(--font-gothic);
  --max-width: 480px;
  /* 選択肢を押してから次の質問に進むまでの待ち。JSがこの値を読む（public/js/app.js）。
     アニメーションの設定を1か所にまとめるため、prefers-reduced-motion では0にする */
  /* 押した実感を見せる時間。7問ぶん積み上がるので短く保つが、
     130msだと押した位置の波紋が広がりきる前に次の質問へ切り替わってしまう */
  --choice-feedback-ms: 190;
}

* {
  box-sizing: border-box;
}

/* 和紙のような細かい粒状感。外部画像を使わずSVGのノイズで出す */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 答えた瞬間だけ気配が一段強くなる。
   滑らかに濃くなるだけだと「1問進んだ」手応えが出ない。
   触覚が使えないぶん、こういう視覚の段差で答えたことを伝える */
body.is-progress-pulse .app-glow {
  opacity: calc(var(--quiz-progress, 0) + 0.3);
  transition: opacity 0.1s ease-out;
}

/* 御札の二重枠。画面そのものを一枚の札に見立てる。
   fixedだと結果画面のような縦長ページで枠の下辺がコンテンツの途中に重なるため、
   文書全体（bodyの高さ＝コンテンツ下端）を包む absolute にする */
.ofuda-frame {
  position: absolute;
  inset: 7px;
  z-index: 3;
  pointer-events: none;
  border: 1px solid rgba(212, 175, 55, 0.45);
}

.ofuda-frame::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 2px solid rgba(200, 16, 46, 0.5);
}

/* 四隅の角飾り */
.ofuda-frame::after {
  content: "";
  position: absolute;
  inset: 4px;
  background:
    linear-gradient(var(--color-gold), var(--color-gold)) left 6px top 6px / 14px 1px no-repeat,
    linear-gradient(var(--color-gold), var(--color-gold)) left 6px top 6px / 1px 14px no-repeat,
    linear-gradient(var(--color-gold), var(--color-gold)) right 6px top 6px / 14px 1px no-repeat,
    linear-gradient(var(--color-gold), var(--color-gold)) right 6px top 6px / 1px 14px no-repeat,
    linear-gradient(var(--color-gold), var(--color-gold)) left 6px bottom 6px / 14px 1px no-repeat,
    linear-gradient(var(--color-gold), var(--color-gold)) left 6px bottom 6px / 1px 14px no-repeat,
    linear-gradient(var(--color-gold), var(--color-gold)) right 6px bottom 6px / 14px 1px no-repeat,
    linear-gradient(var(--color-gold), var(--color-gold)) right 6px bottom 6px / 1px 14px no-repeat;
  opacity: 0.75;
}

/* 質問が進むほど下から光が強まる。妖怪が近づいてくる感じを出す（docs/backlog.md D-5） */
/* 開始画面では、何かが潜んでいるように微かに脈動させる */
body[data-screen="start"] .app-glow {
  opacity: 1;
  animation: lurk 4.5s ease-in-out infinite;
}

@keyframes lurk {
  0%,
  100% {
    opacity: 0.16;
  }
  50% {
    opacity: 0.34;
  }
}

/* 全画面の霧（public/js/fog.js）。読みやすさを壊さないよう、
   ふだんは本文（.app-shell の z-index: 1）より後ろに敷く */
.app-fog {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 札をめくる瞬間だけ本文より手前に出て、札ごと霧に飲み込む。
   御札の枠（z-index: 3）よりは後ろに留める */
body[data-screen="summoning"] .app-fog {
  z-index: 2;
}

.app-glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 108%, rgba(200, 16, 46, 0.34), rgba(200, 16, 46, 0) 62%);
  opacity: var(--quiz-progress, 0);
  will-change: opacity;
  transition: opacity 0.5s ease;
}

.app-shell {
  position: relative;
  z-index: 1;
  padding: 0 26px;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
}

body {
  /* .ofuda-frame（absolute）の基準にする。コンテンツ下端まで枠を届かせる */
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
}

.app-shell {
  max-width: var(--max-width);
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* 御札の赤線（内側エッジ=画面端から13px）とコンテンツの間を16px空ける（13+16=29）。
     幅を狭めたぶん、選択肢の1行収まりは validate-quiz.mjs の表示幅上限14で守る */
  padding: 0 29px;
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px 0 14px;
}

/* 朱印。絵文字ではなくCSSで描くことで「デザインされた画面」にする */
.app-header__seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 4px;
  background: var(--color-seal);
  color: #fff;
  font-family: var(--font-mincho);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: 0 0 14px rgba(200, 16, 46, 0.45);
  animation: seal-breathe 3.6s ease-in-out infinite;
}

@keyframes seal-breathe {
  0%,
  100% {
    box-shadow: 0 0 10px rgba(200, 16, 46, 0.35);
  }
  50% {
    box-shadow: 0 0 20px rgba(200, 16, 46, 0.7);
  }
}

.app-header__title {
  font-family: var(--font-mincho);
  font-size: 19px;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.14em;
  color: var(--color-text);
}

.app-main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 0 40px;
  animation: fade-in 0.3s ease;
}

.screen[hidden] {
  display: none;
}

/* 質問画面は連打が前提。2打目が切り替わり直後の質問文や戻るボタンに当たると
   文字が選択されて青くなるので、画面ごと選択不可にする（コピーしたい文はない） */
.screen[data-screen="quiz"] {
  user-select: none;
  -webkit-user-select: none;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* text-wrap: pretty は日本語と相性が悪い。意図しない位置で分割したり、
   幅が余っているのに行を均等にしようとして13文字で折り返したりする
   （docs/playtest-log.md P-13 / P-21）。日本語の本文には効かせない */
.result__description,
.result__prescription p {
  line-height: 1.9;
}

/* 告知画面（メンテナンス・会期終了）。開始画面と同じ御札の空気のまま、一枚だけ静かに出す */
.notice__title {
  font-family: var(--font-mincho);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 0.08em;
  margin: 56px 0 18px;
  /* タイトルも自動折り返しに任せると375px幅で1文字だけ落ちる。改行は文面で決める */
  white-space: pre-line;
}

.notice__message {
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.03em;
  margin: 0 0 56px;
  /* 文面に入れた改行をそのまま使う（.start__error と同じ理由） */
  white-space: pre-line;
}

/* スタート画面 */
.start__lead {
  font-family: var(--font-mincho);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 0.06em;
  margin: 10px 0 4px;
}

/* 妖怪は朱の枠に納める。絵文字をそのまま置くと「絵文字」に見えてしまう */
.start__sigil {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 18px 0 16px;
}

.start__sigil-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 84px;
  padding: 3px;
  border: 1px solid rgba(200, 16, 46, 0.6);
  background: var(--color-paper);
  box-shadow: 0 0 16px rgba(200, 16, 46, 0.2), inset 0 0 0 1px rgba(212, 175, 55, 0.3);
  transition: opacity 0.32s ease, transform 0.32s ease;
}

/* 妖怪が1体ずつ入れ替わる。ふっと消えて別の姿が現れる */
.start__sigil-slot {
  transition: opacity 0.32s ease, transform 0.32s ease;
}

.start__sigil-slot.is-fading {
  opacity: 0;
}

.start__sigil-slot.is-fading {
  opacity: 0;
  transform: translateY(6px) scale(0.9);
}

.start__error {
  color: #ff8f6b;
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 12px;
  /* 文面に入れた改行をそのまま使う。自動折り返しに任せると
     「通信状況を確か / めて」のように読みにくい位置で割れる */
  white-space: pre-line;
}

.start__desc {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 0.03em;
  margin: 0 0 22px;
}


/* 質問画面 */
.quiz__progress {
  width: 100%;
  margin-top: 6px;
}

/* 進捗は短冊の列。答えた一つ一つが残って見える（docs/backlog.md D-22） */
.quiz__fuda {
  display: flex;
  gap: 4px;
  width: 100%;
}

/* 見るだけの表示。8つ横に並べると1つ31.5pxで、
   触れる対象にすると最小タップ領域（44px）を満たせない */
.quiz__fuda-item {
  flex: 1;
  display: flex;
  align-items: center;
  height: 18px;
}

.quiz__fuda-item::before {
  content: "";
  display: block;
  width: 100%;
  height: 6px;
  border-radius: 1px;
  background: rgba(212, 175, 55, 0.16);
  transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

/* 答え終わった問。朱に染まって残る */
.quiz__fuda-item.is-filled::before {
  background: linear-gradient(180deg, var(--color-seal), rgba(150, 12, 34, 0.95));
  box-shadow: 0 0 8px rgba(200, 16, 46, 0.4);
}

/* いま答えている問。金で立てる */
.quiz__fuda-item.is-current::before {
  background: var(--color-gold);
  transform: scaleY(1.6);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.55);
}





/* 進捗と「1つ戻る」を1行に並べる */
.quiz__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 4px 0 12px;
  min-height: 44px;
}

.quiz__progress-text {
  font-family: var(--font-mincho);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin: 0;
}

/* タップ領域は44pxを確保する（立ったまま片手で押す） */
.quiz__back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 4px;
  font-family: var(--font-mincho);
  font-size: 13px;
  letter-spacing: 0.06em;
  /* 誤タップして焦っている人が見つけられる必要がある（S-6）。
     進捗テキストと同じ薄いグレーだと画面に埋もれるので金にする。
     ただし通常の流れで押させたいボタンではないので、彩度は抑える */
  color: rgba(212, 175, 55, 0.72);
  background: none;
  border: none;
  cursor: pointer;
}

.quiz__back[hidden] {
  display: none;
}

.quiz__back:disabled {
  opacity: 0.4;
  cursor: default;
}

.quiz__question {
  font-family: var(--font-mincho);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: 0.04em;
  margin: 0 0 20px;
}

/* 読点で切った断片。ここでしか改行させない（public/js/app.js renderQuestionText）。
   inline-block にすると断片の途中では折り返らず、断片の境界だけで折り返る */
.quiz__question-part {
  display: inline-block;
}

.quiz__choices {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

/* 短冊。角を落とさず、左に金の細い罫を立て、漢数字の番号を振る */
.choice-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 14px 14px 14px 11px;
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
  color: var(--color-text);
  background: linear-gradient(180deg, rgba(28, 22, 32, 0.95), rgba(20, 16, 24, 0.95));
  border: 1px solid var(--color-border);
  border-left: 2px solid rgba(212, 175, 55, 0.5);
  border-radius: 2px;
  /* 波紋を札の中に収める */
  overflow: hidden;
  cursor: pointer;
  /* 連打やダブルタップで選択肢の文言が選択されて青くなるのを防ぐ */
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

/* 札の番号。壱・弐・参・肆 */
.choice-btn::before {
  content: attr(data-mark);
  flex: none;
  width: 17px;
  font-family: var(--font-mincho);
  font-size: 15px;
  color: var(--color-gold);
  opacity: 0.72;
  text-align: center;
}

.choice-btn.is-chosen::before {
  color: #fff7ea;
  opacity: 1;
}

/* 押し込まれて戻る。紙の札を押した感触に寄せる */
.choice-btn:active {
  transform: translateY(1px) scale(0.985);
}

/* 押した場所から広がる朱の波紋。
   iOSはWebから振動を出せない（Vibration API非対応。iOS 26.5でハックも塞がれた）ので、
   手応えは「触った座標が反応する」ことで作る */
.choice-btn::after {
  content: "";
  position: absolute;
  left: var(--ripple-x, 50%);
  top: var(--ripple-y, 50%);
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 57, 79, 0.55), rgba(232, 57, 79, 0) 70%);
  opacity: 0;
  pointer-events: none;
}

.choice-btn.is-rippling::after {
  /* --choice-feedback-ms（190ms）の間に広がりきる長さにする */
  animation: choice-ripple 0.19s ease-out;
}

@keyframes choice-ripple {
  from {
    opacity: 0.85;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(20);
  }
}

/* 選んだ短冊。朱に染まる */
.choice-btn.is-chosen {
  border-color: var(--color-gold);
  border-left-color: var(--color-gold);
  background: linear-gradient(180deg, rgba(200, 16, 46, 0.95), rgba(150, 12, 34, 0.95));
  color: #fff7ea;
  font-weight: 700;
  transform: scale(1.015);
  box-shadow: 0 0 18px rgba(200, 16, 46, 0.5);
}

/* 選択後は他の選択肢を沈める */
.quiz__choices.is-locked .choice-btn:not(.is-chosen) {
  opacity: 0.35;
}

.quiz__choices.is-locked .choice-btn {
  pointer-events: none;
}

.choice-btn:focus-visible {
  border-color: var(--color-gold);
  background: #241c26;
}

/* hoverはマウスを持つ環境だけに限定する。
   タッチ環境でhoverを効かせると、タップした座標にhover状態が残り（sticky hover）、
   次の質問の同じ位置にある選択肢が「選択済み」に見えてしまう（docs/backlog.md B-17）。 */
@media (hover: hover) and (pointer: fine) {
  .choice-btn:hover {
    border-color: var(--color-gold);
    background: #241c26;
  }
}

/* 結果発表の演出（山場3） */
/* 縦中央に寄せて間延びを解消する（docs/backlog.md D-13） */
body[data-screen="summoning"] .screen {
  justify-content: center;
  padding: 12px 0 20px;
}

/* 発表の演出の見出し。text-wrapのセレクタリストとは別に定義する
   （リストに紛れると、他の見出しまで色とアニメーションを被る） */
.summoning__label {
  font-family: var(--font-mincho);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-gold);
  margin: 0;
  animation: summon-flicker 1.6s ease-in-out infinite;
}

.summoning__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 232px;
  height: 232px;
  margin: 22px 0;
}

/* 提灯の灯りのような光。脈動させて「近づいてくる」感じを出す */
.summoning__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 16, 46, 0.5), rgba(200, 16, 46, 0) 70%);
  animation: summon-pulse 1.2s ease-in-out infinite;
}

/* 伏せ札の器。揺れはここに、めくりは中の .summoning-card に持たせる */
.summoning__sigil {
  position: relative;
  z-index: 1;
  width: 168px;
  height: 186px;
  line-height: 1;
  animation: summon-sway 0.9s ease-in-out infinite;
}

/* めくりは3D（rotateY + backface-visibility）ではなく、
   横に潰れる瞬間に面を入れ替えるかたちで表現する。
   3Dでやると、親（.summoning__sigil）の揺れの transform が
   3Dコンテキストを平坦化して backface-visibility が効かず、
   伏せているのに表が見えてしまった（docs/playtest-log.md P-20）。
   この方式なら表は opacity: 0 なので、めくる前に漏れることが原理的にない */
.summoning-card {
  position: relative;
  width: 100%;
  height: 100%;
}

/* 触れた瞬間の抵抗。すぐ返るのではなく、一度押し込まれてから返る。
   これがないと「触れた」と「めくれた」が同時に起きて手応えがない */
.summoning-card.is-resisting {
  animation: card-resist 0.09s ease-out;
}

@keyframes card-resist {
  0%,
  100% {
    transform: scale(1);
  }
  55% {
    transform: scale(0.95) rotate(-0.7deg);
  }
}

.summoning-card.is-revealed {
  animation: card-flip 0.48s cubic-bezier(0.4, 0, 0.6, 1) both;
}

.summoning-card__face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 潰れきった中間地点（0.24s）で入れ替える。切り替えそのものは一瞬でよい */
  transition: opacity 0.01s linear 0.24s;
}

.summoning-card__back {
  opacity: 1;
}

.summoning-card__front {
  opacity: 0;
}

.summoning-card.is-revealed .summoning-card__back {
  opacity: 0;
}

.summoning-card.is-revealed .summoning-card__front {
  opacity: 1;
}

/* 紙が横を向いて一瞬消え、また開く */
@keyframes card-flip {
  0% {
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(0.04);
  }
  100% {
    transform: scaleX(1);
  }
}

/* 伏せ面。墨地に朱印「憑」。ヘッダーの印と同じ字を大きく使う */
.summoning-card__back {
  background: linear-gradient(180deg, #1d1224, #0d0a12);
  border: 1px solid rgba(200, 16, 46, 0.7);
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.28), 0 0 34px rgba(200, 16, 46, 0.34);
}

.summoning-card__back span {
  font-family: var(--font-mincho);
  font-size: 82px;
  font-weight: 600;
  color: var(--color-vermilion);
  text-shadow: 0 0 26px rgba(200, 16, 46, 0.65);
}

/* 表。生成りの札に妖怪のイラスト */
.summoning-card__front {
  padding: 8px;
  background: var(--color-paper);
  border: 1px solid rgba(200, 16, 46, 0.75);
  box-shadow: 0 0 34px rgba(200, 16, 46, 0.34);
}

/* 結果の妖怪で止まった瞬間。ここが発表 */
.summoning__sigil.is-settled {
  animation: summon-settle 0.26s cubic-bezier(0.2, 1.4, 0.4, 1) both;
  filter: drop-shadow(0 0 26px rgba(212, 175, 55, 0.8));
}

/* 決まった瞬間の締め。輪が広がって消える（docs/backlog.md D-14）。
   強い明滅は光感受性への配慮で避け、穏やかな広がりにする */
.summoning__stage.is-settled::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid rgba(212, 175, 55, 0.9);
  animation: summon-burst 0.5s ease-out forwards;
}

.summoning__stage.is-settled::before {
  animation: none;
  opacity: 1;
}

@keyframes summon-burst {
  from {
    opacity: 0.9;
    transform: scale(0.72);
  }
  to {
    opacity: 0;
    transform: scale(1.28);
  }
}

/* 触ってもらわないと先に進まない画面なので、誘導は読める濃さにする。
   遅らせすぎると「何をすればいいか分からない数秒」が生まれる */
.summoning__hint {
  font-family: var(--font-mincho);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: rgba(212, 175, 55, 0.85);
  margin: 0;
  opacity: 0;
  animation: summon-hint 0.32s ease 0.22s forwards;
}

@keyframes summon-pulse {
  0%,
  100% {
    transform: scale(0.88);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

@keyframes summon-sway {
  0%,
  100% {
    transform: translateY(0) rotate(-4deg);
  }
  50% {
    transform: translateY(-8px) rotate(4deg);
  }
}

@keyframes summon-settle {
  from {
    transform: scale(0.62);
  }
  to {
    transform: scale(1.15);
  }
}

@keyframes summon-flicker {
  0%,
  100% {
    opacity: 1;
  }
  45% {
    opacity: 0.55;
  }
}

@keyframes summon-hint {
  to {
    opacity: 1;
  }
}

/* 結果画面: 段階的に現れる（docs/backlog.md D-2） */
.reveal-step {
  animation: reveal-rise 0.42s ease both;
  animation-delay: var(--reveal-delay, 0s);
}

@keyframes reveal-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* 結果画面 */
.result__label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mincho);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  margin: 6px 0 14px;
}

.result__label::before,
.result__label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(212, 175, 55, 0), rgba(212, 175, 55, 0.55));
}

.result__label::after {
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.55), rgba(212, 175, 55, 0));
}

.result__sigil {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 118px;
  height: 130px;
  margin: 0 auto 12px;
  /* 妖怪のイラストを納める札。生成りの紙に朱の枠（docs/design.md） */
  padding: 4px;
  border: 1px solid rgba(200, 16, 46, 0.75);
  background: var(--color-paper);
  box-shadow: 0 0 26px rgba(200, 16, 46, 0.28), inset 0 0 0 1px rgba(212, 175, 55, 0.35);
}

/* 妖怪のイラストは白地の墨絵。生成りの札に multiply で載せると
   白地が地の色に溶けて、線だけが残る（docs/design.md） */
.start__sigil-slot img,
.summoning-card__front img,
.result__sigil img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* 符の上下に金の罫を渡し、札に留められた姿に見せる（docs/design.md） */
.start__sigil-slot::before,
.start__sigil-slot::after,
.result__sigil::before,
.result__sigil::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 62%;
  height: 1px;
  background: linear-gradient(90deg, rgba(212, 175, 55, 0), rgba(212, 175, 55, 0.75), rgba(212, 175, 55, 0));
}

.start__sigil-slot::before,
.result__sigil::before {
  top: 7px;
}

.start__sigil-slot::after,
.result__sigil::after {
  bottom: 7px;
}

/* 憑かれているメンバーが0人の妖怪にだけ、札のまわりで舞う金の粒。
   4方向にとがった星形をCSSで描く（外部の画像・アイコンは読み込まない / docs/design.md） */
.result__sparkles {
  position: absolute;
  /* 札の外にはみ出して舞う。札の地（生成り）の上だと粒が沈む */
  inset: -26px;
  pointer-events: none;
}

.result__sparkles[hidden] {
  display: none;
}

.result__sparkles i {
  position: absolute;
  width: var(--sparkle-size, 13px);
  height: var(--sparkle-size, 13px);
  background: var(--color-gold);
  clip-path: polygon(50% 0%, 59% 41%, 100% 50%, 59% 59%, 50% 100%, 41% 59%, 0% 50%, 41% 41%);
  filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.9));
  opacity: 0;
  /* 明滅は避ける。ゆっくり現れてゆっくり消える（光感受性への配慮 / docs/design.md） */
  animation: sparkle-twinkle 3.2s ease-in-out infinite;
  /* 妖怪名が出てから舞い始める。発表と同時だと札より粒に目がいく */
  animation-delay: var(--sparkle-delay, 0s);
}

/* 札の上と左右に散らす。大きさと間を変えて、規則正しく並んで見えないようにする。
   下辺には置かない。すぐ下が妖怪名なので、粒が文字にかぶって読みにくくなる */
.result__sparkles i:nth-child(1) { top: 3%;  left: 5%;   --sparkle-size: 16px; --sparkle-delay: 0.5s; }
.result__sparkles i:nth-child(2) { top: 1%;  right: 12%; --sparkle-size: 11px; --sparkle-delay: 1.3s; }
.result__sparkles i:nth-child(3) { top: 20%; right: -1%; --sparkle-size: 14px; --sparkle-delay: 0.9s; }
.result__sparkles i:nth-child(4) { top: 46%; right: 3%;  --sparkle-size: 9px;  --sparkle-delay: 2.1s; }
.result__sparkles i:nth-child(5) { top: 68%; right: -2%; --sparkle-size: 15px; --sparkle-delay: 1.7s; }
.result__sparkles i:nth-child(6) { top: 72%; left: 1%;   --sparkle-size: 10px; --sparkle-delay: 0.7s; }
.result__sparkles i:nth-child(7) { top: 44%; left: -2%;  --sparkle-size: 14px; --sparkle-delay: 2.4s; }
.result__sparkles i:nth-child(8) { top: 18%; left: 3%;   --sparkle-size: 10px; --sparkle-delay: 1.5s; }

/* ふわりと現れて、回りながら消える */
@keyframes sparkle-twinkle {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.3) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1) rotate(35deg);
  }
}


.result__name {
  font-family: var(--font-mincho);
  font-size: 29px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.35;
  text-indent: 0.16em;
  margin: 0 0 8px;
  text-shadow: 0 0 22px rgba(212, 175, 55, 0.25);
}


/* 一番笑える一文。その場で読んで笑えるかがこの企画の要（docs/delight.md 山場3）。
   上下を金の罫で挟んで、掲示された一文に見せる */
.result__punchline {
  font-family: var(--font-mincho);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 0.04em;
  color: var(--color-text);
  margin: 0 0 12px;
  padding: 10px 4px;
  border-top: 1px solid rgba(212, 175, 55, 0.35);
  border-bottom: 1px solid rgba(212, 175, 55, 0.35);
  text-wrap: balance;
}

/* 日本語の長文は行頭が揃っていないと読む負荷が高い（docs/backlog.md B-18） */
.result__meta {
  width: 100%;
  margin: 0 0 14px;
}

/* 数値と段階ラベルは2行に分ける。横に並べるとラベルが数値の添え物に見えて読みにくい */
.result__possession {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  margin: 0 0 6px;
}

.result__possession-rate {
  font-family: var(--font-mincho);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-gold);
}

.result__possession-label {
  font-size: 13px;
  color: var(--color-text-muted);
}

/* 稀な憑依では符が金に染まる */
#screen-result.is-rare .result__sigil {
  border-color: rgba(212, 175, 55, 0.85);
  box-shadow: inset 0 0 30px rgba(212, 175, 55, 0.22), 0 0 30px rgba(212, 175, 55, 0.3);
}

#screen-result.is-rare .result__possession-rate {
  text-shadow: 0 0 18px rgba(212, 175, 55, 0.6);
}

/* 憑かれているメンバーが0人の妖怪では、札が金の二重枠になって金の粒をまとう。
   稀な憑依（枠が金になるだけ）とは別の軸なので、二重枠と粒のぶんこちらを強くする。
   両方に当てはまったときはこちらが勝つ（この規則があとに来る） */
#screen-result.is-unseen .result__sigil {
  border-color: rgba(212, 175, 55, 0.95);
  /* 外側にもう一本。金の細枠を二重に回して「別格の札」に見せる */
  outline: 1px solid rgba(212, 175, 55, 0.5);
  outline-offset: 6px;
  box-shadow: inset 0 0 30px rgba(212, 175, 55, 0.25), 0 0 44px rgba(212, 175, 55, 0.45);
  animation: unseen-aura 3.6s ease-in-out infinite;
}

/* 札そのものも息をする。ヘッダーの朱印と同じ速さに揃えて、明滅には見せない */
@keyframes unseen-aura {
  0%,
  100% {
    box-shadow: inset 0 0 30px rgba(212, 175, 55, 0.2), 0 0 30px rgba(212, 175, 55, 0.32);
  }
  50% {
    box-shadow: inset 0 0 34px rgba(212, 175, 55, 0.3), 0 0 52px rgba(212, 175, 55, 0.6);
  }
}


.result__description {
  font-size: 14px;
  line-height: 1.75;
  color: var(--color-text);
  text-align: left;
  margin: 0 0 16px;
}

/* 妖怪名のふりがな。名前の直下に小さく添える */
.result__name-reading {
  margin: -4px 0 8px;
  font-family: var(--font-mincho);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--color-text-muted);
}

/* 会話の起点。同じ妖怪に憑かれているメンバーを1人1行で見せる */
.result-staff {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  /* 枠線は付けない（ボタン群と紛れて見える）。かわりに上下の余白で区切る */
  margin: 10px 0 28px;
}

.result-staff[hidden] {
  display: none;
}

.result-staff__lead {
  margin: 0;
  font-family: var(--font-mincho);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
}

.result-staff__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* ライブ配信のコメント欄のようなカプセル型の1行。アイコン→名前→一言と流す */
.result-staff-member {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 5px 14px 5px 6px;
  background: rgba(28, 22, 32, 0.85);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 999px;
  text-align: left;
}

.result-staff-member__icon {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-paper);
}

/* アイコン画像を持たない人は、名前の一文字目を朱の印にする（ヘッダーの印と同じ意匠） */
.result-staff-member__icon--letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-seal);
  color: #fff7ea;
  font-family: var(--font-mincho);
  font-size: 14px;
  font-weight: 600;
}

/* 名前と一言は同じ行に流し、長い一言だけカプセルの中で折り返す */
.result-staff-member__text {
  margin: 0;
  min-width: 0;
  font-size: 13px;
  line-height: 1.5;
}

.result-staff-member__name {
  margin-right: 8px;
  font-family: var(--font-mincho);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-gold);
}

.result-staff-member__comment {
  color: var(--color-text);
}

/* ブースに足を運ぶ理由。物語の結末も兼ねるので、朱の札として置く */
.result__sticker {
  width: 100%;
  margin: 0 0 14px;
  padding: 13px 16px 11px;
  font-family: var(--font-mincho);
  letter-spacing: 0.04em;
  text-align: center;
  color: #fff7ea;
  background: linear-gradient(180deg, rgba(200, 16, 46, 0.9), rgba(150, 12, 34, 0.9));
  border: 1px solid rgba(212, 175, 55, 0.55);
  border-radius: 2px;
  box-shadow: 0 0 20px rgba(200, 16, 46, 0.3);
}

.result__sticker p {
  margin: 0;
}

.result__sticker-lead {
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.9;
}

/* 「何がもらえるか」が要点なので、この行をいちばん強く出す */
.result__sticker-main {
  margin-top: 2px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-gold);
}

.result__prescription {
  width: 100%;
  background: linear-gradient(180deg, rgba(28, 22, 32, 0.9), rgba(20, 16, 24, 0.9));
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: 2px;
  margin-bottom: 14px;
  text-align: left;
}

/* 折りたたみの見出し。開く前は一行なので、結果画面が1画面に収まる。
   ボックスの余白はここに持たせる。details側に付けると余白部分が押せなくなり、
   タップ判定がテキスト行だけに縮む（立ったまま片手で押す前提。44px以上を確保） */
.result__prescription-summary {
  font-family: var(--font-mincho);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--color-gold);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 24px;
  padding: 12px 16px;
  /* 連打やドラッグで見出しが選択されて青くなるのを防ぐ */
  user-select: none;
  -webkit-user-select: none;
}

/* クリックで青い枠が付くのを防ぐ。キーボード操作のフォーカスリングは残す */
.result__prescription-summary:focus:not(:focus-visible) {
  outline: none;
}

.result__prescription-summary::-webkit-details-marker {
  display: none;
}

/* 三角は回転させない（回る動きが目につくとのフィードバック 2026-08-26）。
   向きの違う字形に差し替え、フェードインで馴染ませる */
.result__prescription-summary::after {
  content: "▼";
  font-size: 10px;
  color: var(--color-text-muted);
  animation: marker-dissolve-closed 0.2s ease;
}

.result__prescription[open] .result__prescription-summary::after {
  content: "▲";
  /* 中身は同じでも、同名のままだと切り替え時に再生されない。向きごとに別名にする */
  animation: marker-dissolve-open 0.2s ease;
}

@keyframes marker-dissolve-closed {
  from {
    opacity: 0;
  }
}

@keyframes marker-dissolve-open {
  from {
    opacity: 0;
  }
}

/* 中身の開閉はスライド（高さの伸縮）。フェードと見比べてこちらを採用（2026-08-27）。
   ::details-content / interpolate-size 未対応のブラウザでは即時切り替えになるだけ */
.result__prescription {
  interpolate-size: allow-keywords;
}

.result__prescription::details-content {
  height: 0;
  overflow: clip;
  transition:
    height 0.25s ease,
    content-visibility 0.25s allow-discrete;
}

.result__prescription[open]::details-content {
  height: auto;
}

.result__prescription p {
  font-size: 14px;
  line-height: 1.7;
  text-align: left;
  /* 横と下の余白はボックスではなく本文が持つ（見出しの余白はsummary側）。
     閉時は非表示なので、開閉で切り替えず常時この余白を持たせる */
  margin: 0;
  padding: 0 16px 12px;
}

.share-canvas {
  display: none;
}

.share-preview {
  width: 100%;
  max-width: 176px;
  border-radius: 12px;
  margin: 0 auto 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* かつては sticky で画面下部に固定していた（docs/backlog.md B-2）。
   その目的は「結果を読んでいる間もシェア導線を画面に残す」ことだったが、
   保存もシェアもしない方針になり、残ったのは「最初に戻る」だけ。
   次の人のためのリセットなので、読み終わってから出てくればよく、
   読んでいる最中に視界にあると誤タップの元にもなる。

   固定をやめたことで、地の塗りにまつわる問題も同時に消えた（docs/playtest-log.md P-13）
   - 半透明だと下を通る説明文がボタンに透けて重なり、どちらも読めない
   - 墨色で塗りつぶすと、画面に収まる端末（iPad横）で「黒い帯」だけが浮く
   - backdrop-filter と mask-image の併用は WebKit で効かず、透けたままになる */
.result__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 8px 0 12px;
}

/* メンバー一覧を挟んだ下段。上の余白は一覧側のmarginが持つので重ねない */
.result__actions--restart {
  padding-top: 0;
}

.result__share {
  display: flex;
  gap: 8px;
}

.result__share > .btn {
  flex: 1;
  margin-top: 0; /* btn--primaryのmargin-topは開始ボタン用なので打ち消す */
}

/* .btnはdisplay:inline-flexを持つため、hidden属性のUAスタイルが負ける。明示して隠す */
.result__share > .btn[hidden] {
  display: none;
}

/* 小さめだがタップ領域は44pxを下回らないようにする */
.btn--compact {
  padding: 14px 16px;
  font-size: 13px;
  font-weight: 600;
}

/* ボタン共通 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  font-family: var(--font-mincho);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.16em;
  border-radius: 2px;
  border: none;
  cursor: pointer;
  /* 連打やダブルタップでラベルが選択されて青くなるのを防ぐ */
  user-select: none;
  -webkit-user-select: none;
  text-decoration: none;
  transition: transform 0.1s ease, opacity 0.15s ease;
}

.btn:active {
  transform: scale(0.97);
}

/* 全体をopacityで薄くするとラベルが読めなくなるため、色を差し替えて無効を示す */
/* キーボードやスイッチコントロールで現在位置が見えるようにする（docs/backlog.md B-9） */
.btn:focus-visible,
.quiz__back:focus-visible,
.choice-btn:focus-visible,
.result__name:focus-visible {
  outline: 2px solid var(--color-accent-light);
  outline-offset: 3px;
}

/* 結果の見出しはフォーカスを受け取るが、マウス操作では輪郭を出さない */
.result__name:focus:not(:focus-visible) {
  outline: none;
}

.btn:disabled {
  background: var(--color-surface);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  cursor: default;
}

.btn:disabled:active {
  transform: none;
}

/* 朱の札。押すところが一番強い赤になる */
.btn--primary {
  background: var(--color-seal);
  color: #fff7ea;
  margin-top: 8px;
  box-shadow: 0 0 24px rgba(200, 16, 46, 0.35), inset 0 0 0 1px rgba(212, 175, 55, 0.5);
}

/* 封をかけた札。押すと始まる。
   帯（文字を挟む2本の金線）は金の枠に一本化した（うるさく見えたため）。
   なぞって封を切る操作は廃止済み（docs/backlog.md D-23）。
   枠の金は結果画面の朱の札（.result__sticker）と同じ明るさに揃える */
.btn--seal {
  box-shadow: 0 0 24px rgba(200, 16, 46, 0.35), inset 0 0 0 1px rgba(212, 175, 55, 0.55);
}

.btn--secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.btn--x {
  background: #000000;
  color: #ffffff;
}

.btn--ghost {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid rgba(212, 175, 55, 0.35);
  font-size: 15px;
}

/* 質問中と発表の演出中はフッターを隠す。
   iPhone SEで質問画面を1画面に収めるため（docs/backlog.md B-23）。
   答えることに集中する画面なので、情報が減るのは体験としても良い */
/* 画面が高い端末（iPadなど）では結果が画面内に収まるので、縦中央に寄せて間延びを防ぐ。
   safe を付けているのは、収まらない端末で上端が切れないようにするため */
/* 画面が高い端末（iPad縦など）ではコンテンツが上に固まり、
   下半分が丸ごと空く。結果画面だけ中央に寄せていたが、
   開始画面と質問画面も同じ状態だった（docs/playtest-log.md P-17）。
   safe を付けているのは、収まらない端末で上端が切れないようにするため */
@media (min-height: 860px) {
  .screen {
    justify-content: safe center;
  }
}

/* 質問画面は縦の余裕がないので上下の余白も詰める */
body[data-screen="quiz"] .screen {
  padding: 12px 0 20px;
}

body[data-screen="quiz"] .app-footer,
body[data-screen="summoning"] .app-footer {
  display: none;
}

.app-footer {
  text-align: center;
  padding: 16px 0 24px;
  color: var(--color-text-muted);
  font-family: var(--font-mincho);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.app-footer p {
  margin: 0;
}

/* 計測の透明性の注記。誘い文句ではないので、クレジットの上に一段薄く添える */
.app-footer p.app-footer__privacy {
  margin: 0 0 6px;
  opacity: 0.75;
}

/* 動きを減らす設定を尊重する。演出はDelightのためのものだが、
   苦手な人には害になるので必ず尊重する（docs/backlog.md B-8） */
/* 大きな画面（ブースのiPadなど）では、iPhoneと同じ寸法のままだと
   コンテンツが画面の中央に小さく浮いて、上下が丸ごと空く。
   中央に寄せるだけでは空白が移動するだけなので、寸法そのものを上げて画面を使う。
   幅も広げるが、選択肢が1行に収まる余裕は増える側なので
   validate-quiz.mjs の表示幅の上限（iPhone SE基準）はそのままでよい */
@media (min-width: 700px) {
  :root {
    --max-width: 600px;
  }

  .app-header__title {
    font-size: 24px;
  }

  /* 注記をフッターへ移した際に開始画面の中身が縮んだので、余白を広げて画面を使う
     （tests/e2e/large-screen.spec.mjs の占有率検査を満たす寸法） */
  .start__lead {
    font-size: 30px;
    margin-bottom: 52px;
  }

  .start__sigil {
    gap: 20px;
    margin: 36px 0 48px;
  }

  .start__sigil-slot {
    width: 122px;
    height: 138px;
  }

  .start__desc {
    font-size: 17px;
    margin-bottom: 48px;
  }

  .quiz__question {
    font-size: 27px;
  }

  .quiz__choices {
    gap: 28px;
  }

  .quiz__question {
    margin-bottom: 40px;
  }

  .choice-btn {
    gap: 12px;
    padding: 28px 18px 28px 14px;
    font-size: 19px;
  }

  .choice-btn::before {
    width: 22px;
    font-size: 19px;
  }

  .summoning__sigil {
    width: 232px;
    height: 232px;
  }

  .result__sigil {
    width: 176px;
    height: 194px;
  }

  /* 札が大きくなるぶん粒も大きく、外に広く散らす */
  .result__sparkles {
    inset: -36px;
  }

  .result__sparkles i {
    width: calc(var(--sparkle-size, 13px) * 1.5);
    height: calc(var(--sparkle-size, 13px) * 1.5);
  }

  .result__name {
    font-size: 38px;
  }

  .result__punchline {
    font-size: 23px;
  }

  .result__description,
  .result__prescription p {
    font-size: 17px;
  }

  .btn {
    padding: 20px 28px;
    font-size: 21px;
  }
}

/* 幅は広いが縦が狭い端末（iPadの横置き・デスクトップ）。
   上の拡大をそのまま適用すると結果が1画面に収まらず、
   次の人に渡すための「最初に戻る」が画面外に出てしまう（docs/playtest-log.md P-18）。
   横置きスタンドに固定する運用なので、ここは収まることを優先する */
@media (min-width: 700px) and (max-height: 860px) {
  .result__sigil {
    width: 124px;
    height: 136px;
  }

  .result__name {
    font-size: 30px;
  }

  .result__punchline {
    font-size: 19px;
  }

  .result__description,
  .result__prescription p {
    font-size: 15px;
  }

  .btn {
    padding: 16px 24px;
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --choice-feedback-ms: 0;
  }

  /* 粒は舞わせない。消えたままにすると装飾ごと無くなるので、静かに置いておく。
     札の光も脈動させず、強い側で固定する */
  .result__sparkles i {
    animation: none;
    opacity: 0.9;
    transform: scale(1) rotate(35deg);
  }

  #screen-result.is-unseen .result__sigil {
    animation: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* 上のリストに混ぜると、::details-content 未対応ブラウザでセレクタ全体が無効になる。
     単独のルールに分けて、未対応環境ではこの1つだけが落ちるようにする */
  ::details-content {
    transition-duration: 0.01ms !important;
  }
}