/* 柚木つばめ 1作品レコメンド診断（v2）
   「和モダン × やわらかい丸ゴシック × 赤」を基調に、「1作品だけを届ける」見せ方にする。

   v7（2026-10-20）
   - 視認性：白文字×金の見出し帯（コントラスト約1.7）をやめ、本文は濃い字・
     選択肢の枠や補足文は白地で 3:1 / 4.5:1 以上になる色にした。
   - マイクロインタラクション：選択のチェック、上限時の揺れ、質問の切替、
     進捗の段、次へボタンの合図。
   - 診断中画面 → 裏返しのカードをタップでひらく、の2段で期待を高める。
   - prefers-reduced-motion では動きを止める。 */

:root {
  --red: #d1203c;
  --red-header: #d53852;
  --red-dark: #8f1428;
  --red-deep: #5e0c1a;
  --red-light: #e96e82;
  --red-lighter: #f6c3cb;
  --red-tint: #fff0f2;
  --gold: #fcb900;
  --gold-soft: #ffe08a;
  --cream: #fde8de;
  --white: #ffffff;
  --text: #2b2120;
  --text-2: #4d3d39;
  --muted: #6b5752;          /* 白地 6.8:1 / クリーム地 5.7:1 */
  --line: #ecd3cb;           /* 飾りの線（操作部品には使わない） */
  --control: #bd8073;        /* 選択肢などの枠：白地 3.2:1 */
  --gray: #4a4a4a;
  --shadow: 0 10px 30px rgba(209, 32, 60, .12);
  --shadow-s: 0 4px 14px rgba(209, 32, 60, .10);
  --radius: 1.4rem;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --font: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  /* 質問の切替アニメーション（translateX）は文書幅を横にはみ出させる。
     そのままにするとページが横にスクロールできてしまい、
     スクロールした状態で「次へ」を押すと画面全体が横に滑ったように見える。
     clip はスクロールコンテナを作らないので position:sticky は壊れない。 */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: .02em;
  color: var(--text);
  background:
    radial-gradient(1200px 500px at 50% -200px, #fff6f2 0%, rgba(255, 246, 242, 0) 70%),
    var(--cream);
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}

.hidden { display: none !important; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: .6rem; }

/* ---------------------------------------------------------------- 共通 */

main { max-width: 820px; margin: 0 auto; padding: 0 1rem 3rem; }

.card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.6rem;
  margin-bottom: 1.2rem;
}

.card.center { text-align: center; }

.muted { color: var(--muted); margin: .4rem 0 1rem; }
.tiny { font-size: .8rem; line-height: 1.6; }
.warn { color: var(--red-dark); background: #fff2f4; border-radius: .5rem; padding: .3rem .6rem; }
/* 選択したのに当たらなかった要素（结果的为什么不一致かを明示する） */
.miss-note { color: var(--muted); margin: .35rem 0 0; }

.eyebrow {
  display: inline-block;
  font-size: .76rem;
  font-weight: 700;
  color: var(--red-dark);
  background: var(--red-tint);
  border: 1px solid var(--red-lighter);
  border-radius: 999px;
  padding: .2rem .8rem;
  margin: 0 0 .8rem;
  letter-spacing: .06em;
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 3rem;
  font-family: inherit;
  font-weight: 800;
  font-size: 1rem;
  border: none;
  border-radius: 999px;
  padding: .7rem 1.5rem;
  cursor: pointer;
  overflow: hidden;
  transition: transform .18s var(--ease-spring), box-shadow .18s ease, background .18s ease, opacity .2s ease;
  text-decoration: none;
  touch-action: manipulation;
}

.btn.primary { background: var(--red); color: #fff; box-shadow: 0 6px 16px rgba(209, 32, 60, .30); }
.btn.primary:hover:not(:disabled) { background: var(--red-dark); transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: scale(.96); }
.btn.primary:active:not(:disabled) { box-shadow: 0 2px 6px rgba(209, 32, 60, .28); }
.btn.ghost { background: #fff; color: var(--red); border: 2px solid var(--red); }
.btn.ghost:hover:not(:disabled) { background: #fff5f6; }
.btn.big { font-size: 1.1rem; padding: .9rem 2.4rem; min-height: 3.4rem; }
.btn:disabled { cursor: not-allowed; }
.btn.primary:disabled { background: #d9c3bf; color: #fff; box-shadow: none; }
/* 枠線と文字色をそろえる（無効時も枠線色＝文字色） */
.btn.ghost:disabled { border-color: #d3bfba; color: #d3bfba; }

/* 押せることを知らせる光の筋（ゆっくり、控えめに） */
.btn.shine::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: shine 3.2s ease-in-out 1.2s infinite;
  pointer-events: none;
}
.btn.shine:disabled::after { animation: none; }
@keyframes shine { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* 押した位置から広がる波紋（JS が .rip を入れる） */
.rip {
  position: absolute;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .22;
  pointer-events: none;
  animation: rip .55s var(--ease-out) forwards;
}
@keyframes rip { to { transform: scale(28); opacity: 0; } }

/* ---------------------------------------------------------------- ヘッダー */

.topbar {
  background: var(--red-header);
  color: #fff;
  padding: .8rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.brand { display: flex; align-items: baseline; gap: .6rem; }
.brand .logo { font-weight: 800; font-size: 1.1rem; }
.brand .brand-sub { font-size: .8rem; font-weight: 700; }
.brand-en { font-size: .78rem; font-weight: 700; }

/* ---------------------------------------------------------------- ゲート */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(94, 12, 26, .94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  z-index: 50;
  transition: opacity .35s ease;
}
.overlay.leaving { opacity: 0; }
.overlay.leaving .gate { transform: scale(.94); }

.gate { max-width: 30rem; max-height: calc(100vh - 2.4rem); max-height: calc(100dvh - 2.4rem); overflow-y: auto; overscroll-behavior: contain; margin: 0; text-align: center; transition: transform .35s var(--ease-out); animation: pop-in .5s var(--ease-spring) both; }
.gate-logo {
  width: 4.2rem; height: 4.2rem;
  margin: 0 auto 1rem;
  display: grid; place-items: center;
  background: var(--red); color: #fff;
  border-radius: 50%;
}
.gate-logo svg { width: 2.4rem; height: 2.4rem; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; }
.gate-logo svg rect { fill: #fff; stroke: none; }
.gate-title { margin: 0 0 .4rem; font-size: 1.3rem; font-weight: 800; color: var(--text); }
.gate-actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin: 1.2rem 0; }

@keyframes pop-in { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- はじめ */

.screen { animation: screen-in .45s var(--ease-out) both; }
@keyframes screen-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

#screen-intro { padding-top: 1.4rem; }

.intro-title {
  margin: .2rem 0 1.2rem;
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.5;
  color: var(--text);
}
/* 金は文字色にせず、文字の下の蛍光ペンとして使う */
.marker {
  background: linear-gradient(transparent 58%, var(--gold-soft) 58%, var(--gold-soft) 92%, transparent 92%);
  color: var(--red-dark);
  padding: 0 .1em;
}

.flow {
  display: flex; align-items: stretch; justify-content: center; gap: .4rem;
  list-style: none; padding: 0; margin: 0 auto 1.2rem; max-width: 30rem;
}
.flow-step {
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  background: var(--red-tint);
  border-radius: 1rem;
  padding: .7rem .3rem .6rem;
  animation: pop-in .5s var(--ease-spring) both;
}
.flow-step:nth-child(3) { animation-delay: .08s; }
.flow-step:nth-child(5) { animation-delay: .16s; }
.flow-num { font-size: .85rem; font-weight: 800; color: var(--red-dark); line-height: 1.2; min-height: 1.9rem; display: flex; align-items: flex-end; }
.flow-num b { font-size: 1.5rem; color: var(--red); margin-right: .05em; }
.flow-icon svg { width: 1.9rem; height: 1.9rem; fill: none; stroke: var(--red); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.flow-label { font-size: .78rem; font-weight: 700; color: var(--text-2); }
.flow-arrow {
  flex: 0 0 .7rem; height: .7rem;
  border-top: 3px solid var(--red-light); border-right: 3px solid var(--red-light);
  transform: rotate(45deg);
  margin: 0 .1rem;
  align-self: center;
}

.intro-list {
  text-align: left; margin: 0 auto 1.5rem; max-width: 32rem;
  padding: .9rem 1rem .9rem 2.2rem;
  background: #fffaf8; border-radius: 1rem; color: var(--text-2);
}
.intro-list li { margin: .3rem 0; }
.intro-list li::marker { color: var(--red); }
#intro-note { margin-bottom: 0; }

/* ---------------------------------------------------------------- 質問 */

.progress-wrap { margin: 1.1rem 0 .8rem; }

/* 10問を段で見せる（済み=赤、いま=脈打つ、まだ=薄い） */
.steps { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.steps li {
  flex: 1 1 0;
  height: 8px;
  border-radius: 999px;
  background: #f1d2cc;
  position: relative;
  overflow: hidden;
}
.steps li::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--red);
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease-out);
}
.steps li.done::before { transform: scaleX(1); }
.steps li.skip::before { transform: scaleX(1); background: #b9a6a1; }
.steps li.now { background: var(--red-lighter); }
.steps li.now::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--red-light);
  border-radius: inherit;
  animation: now-pulse 1.4s ease-in-out infinite;
}
.steps li.avoid.now::after { background: #8b8b8b; }
@keyframes now-pulse { 0%, 100% { opacity: .25; } 50% { opacity: .9; } }

.progress-label {
  display: flex; align-items: center; gap: .6rem;
  font-size: .85rem; color: var(--muted); margin-top: .45rem;
}
.q-count { font-variant-numeric: tabular-nums; }
.q-count b { font-size: 1.15rem; color: var(--red); }
.q-axis {
  font-size: .78rem; font-weight: 700; color: var(--red-dark);
  background: #fff; border-radius: 999px; padding: .05rem .7rem;
}

.question { overflow: hidden; }
/* 質問の切替：進む=右から / 戻る=左から */
.question.enter-next { animation: q-in-next .34s var(--ease-out) both; }
.question.enter-prev { animation: q-in-prev .34s var(--ease-out) both; }
@keyframes q-in-next { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes q-in-prev { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }

.q-kind {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-size: .76rem; font-weight: 700;
  border-radius: 999px;
  padding: .15rem .8rem;
  margin: 0 0 .6rem;
}
/* 否定軸（避けたいもの）は赤い強調ではなく、グレーで「マイナス」を示す */
.q-kind.avoid { background: var(--gray); }

/* 否定軸の説明帯 */
.q-note {
  display: block;
  background: #f1edeb;
  border-left: 4px solid var(--muted);
  border-radius: .5rem;
  padding: .6rem .8rem;
  margin: 0 0 .9rem;
  font-size: .85rem;
  line-height: 1.6;
  color: var(--text-2);
  text-align: left;
}

.q-title {
  margin: 0 0 .35rem;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.45;
  color: var(--text);
}

.q-sub { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; }
.q-hint { margin: 0; flex: 1 1 16rem; font-size: .9rem; color: var(--muted); }

/* 「あと◯個」：変化のたびに跳ねる / 上限で赤く点滅 */
.pick-count {
  flex: 0 0 auto;
  font-size: .8rem; font-weight: 800;
  color: var(--red-dark);
  background: var(--red-tint);
  border: 1.5px solid var(--red-lighter);
  border-radius: 999px;
  padding: .12rem .75rem;
  font-variant-numeric: tabular-nums;
}
.pick-count.muted { color: var(--muted); background: #f5f1f0; border-color: #e3d9d6; margin: 0; }
.pick-count.full { color: #fff; background: var(--red); border-color: var(--red); }
.pick-count.bump { animation: bump .32s var(--ease-spring); }
.pick-count.flash { animation: flash .5s ease 2; }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes flash { 50% { background: var(--red-dark); color: #fff; border-color: var(--red-dark); } }

.options { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.1rem; }
/* 選択肢が多い質問は、広い画面で2列に */
@media (min-width: 641px) {
  .options.many { display: grid; grid-template-columns: 1fr 1fr; }
}

.option {
  position: relative;
  display: flex;
  align-items: center;
  gap: .85rem;
  width: 100%;
  min-height: 3.4rem;
  text-align: left;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  background: #fff;
  border: 2px solid var(--control);
  border-radius: 1rem;
  padding: .7rem 1rem;
  cursor: pointer;
  overflow: hidden;
  touch-action: manipulation;
  transition: border-color .16s ease, background .16s ease, transform .18s var(--ease-spring), box-shadow .16s ease;
  animation: opt-in .36s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 28ms);
}
@keyframes opt-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (hover: hover) {
  .option:hover { border-color: var(--red-light); background: #fff8f8; }
}
.option:active { transform: scale(.98); }

/* 選択中：薄い赤の面＋赤い枠＋塗りの印＋影。文字色は枠線と同じ赤にそろえる */
.option.on {
  border-color: var(--red);
  color: var(--red);
  background: var(--red-tint);
  box-shadow: 0 4px 12px rgba(209, 32, 60, .16), inset 4px 0 0 var(--red);
}
@media (hover: hover) { .option.on:hover { background: #ffe6ea; border-color: var(--red-dark); color: var(--red-dark); } }
.option.on .desc { color: var(--red); }

.option .mark {
  flex: 0 0 1.5rem;
  width: 1.5rem; height: 1.5rem;
  border: 2px solid var(--control);
  border-radius: 50%;
  display: grid; place-items: center;
  background: #fff;
  transition: background .16s ease, border-color .16s ease;
}
.option .mark svg { width: 1rem; height: 1rem; fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.option .mark svg path { stroke-dasharray: 24; stroke-dashoffset: 24; }
.option.on .mark { background: var(--red); border-color: var(--red); }
.option.on .mark svg path { stroke-dashoffset: 0; transition: stroke-dashoffset .28s var(--ease-out) .05s; }
.option.just .mark { animation: mark-pop .4s var(--ease-spring); }
@keyframes mark-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* 上限に達しているのに押した → 横に揺れる */
.option.nope { animation: nope .38s ease; }
@keyframes nope { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* 上限に達したら、選んでいない選択肢を少しだけ下げる（押せば揺れて知らせる） */
.options.at-max .option:not(.on) { opacity: .62; }

/* --- 選択方式を見分ける --------------------------------------------
   1つだけ選ぶ=ラジオボタン（丸・内側ドット）/ 複数選ぶ=チェックボックス（四角・✓） */
.options.multi .option .mark { border-radius: .4rem; }
.options.single .option .mark { border-radius: 50%; }
.options.single .option .mark svg { display: none; }
.options.single .option .mark::after {
  content: "";
  width: .62rem; height: .62rem;
  border-radius: 50%;
  background: #fff;
  transform: scale(0);
  transition: transform .22s var(--ease-spring);
}
.options.single .option.on .mark::after { transform: scale(1); }

/* --- 「この質問は回答に含めない」 ----------------------------------
   選んだ好物とは別の条件なので、選択肢リストから分けて枠も分ける。 */
.options-skip {
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px dashed var(--line);
}
.options-skip:empty { display: none; }

.option.skip {
  background: #faf8f7;
  border-color: #b9a6a1;
  border-style: dashed;
  color: var(--text-2);
  min-height: 3rem;
}
@media (hover: hover) { .option.skip:hover { border-color: var(--muted); background: #f3eeec; color: var(--text); } }
.option.skip .mark { border-radius: 50%; border-style: dashed; border-color: #b9a6a1; }
.option.skip .mark svg { display: none; }
.option.skip.on {
  background: #ece6e3;
  border-color: var(--muted);
  border-style: solid;
  color: var(--text);
  box-shadow: inset 4px 0 0 var(--muted);
}
.option.skip.on .mark { background: var(--muted); border-color: var(--muted); border-style: solid; }
.option.skip.on .mark::after {
  content: "";
  width: .7rem; height: 3px; border-radius: 2px;
  background: #fff;
}

/* --- 否定軸（避けたいもの）は肯定側とまったく別に見せる ------------ */
.options.avoid .option { border-style: dashed; border-color: #a8a8a8; background: #fafafa; }
@media (hover: hover) { .options.avoid .option:hover { background: #f1f1f1; border-color: #6d6d6d; } }
.options.avoid .option.on {
  background: #ededed;
  border-color: var(--gray);
  color: var(--gray);
  border-style: solid;
  box-shadow: inset 4px 0 0 var(--gray);
}
.options.avoid .option.on .desc { color: var(--gray); }
.options.avoid .option .mark { border-color: #a8a8a8; }
.options.avoid .option.on .mark { background: var(--gray); border-color: var(--gray); }
/* 「外す」ことが分かるよう、選ぶと名前に打ち消し線を引く */
.options.avoid .option .label {
  background: linear-gradient(var(--gray), var(--gray)) no-repeat 0 55% / 0 2px;
  transition: background-size .28s var(--ease-out);
}
.options.avoid .option.on .label { background-size: 100% 2px; }

.option .labels { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.option .label { line-height: 1.4; }
.option .desc { font-size: .82rem; font-weight: 500; color: var(--muted); line-height: 1.45; }

/* 戻る／次へ：スマホでは画面下に固定して親指で届くように */
.nav-row {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex; justify-content: space-between; gap: .8rem;
  margin: 1rem -1rem 0;
  padding: .8rem 1rem calc(.8rem + var(--safe-b));
  background: linear-gradient(rgba(253, 232, 222, 0), var(--cream) 30%);
}
.nav-row .btn { flex: 0 0 auto; }
.nav-row #btn-next { flex: 1 1 auto; max-width: 18rem; }
/* 押せるようになった瞬間に一度だけ合図 */
#btn-next.ready { animation: ready .6s var(--ease-spring); }
@keyframes ready {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(209, 32, 60, .45); }
  45% { transform: scale(1.04); }
  100% { transform: scale(1); box-shadow: 0 0 0 14px rgba(209, 32, 60, 0); }
}

/* ---------------------------------------------------------------- 診断中 */

#screen-diagnose { padding-top: 1.4rem; }
.diag { text-align: center; padding: 2rem 1.4rem 1.4rem; overflow: hidden; }

.diag-visual {
  position: relative;
  width: 11rem; height: 11rem;
  margin: 0 auto 1.2rem;
  display: grid; place-items: center;
}
/* 耳元に届く音の波紋 */
.ripple {
  position: absolute; inset: 1.2rem;
  border-radius: 50%;
  border: 2px solid var(--red-light);
  opacity: 0;
  animation: ripple 2.4s var(--ease-out) infinite;
}
.ripple:nth-child(2) { animation-delay: .8s; }
.ripple:nth-child(3) { animation-delay: 1.6s; }
@keyframes ripple { 0% { transform: scale(.7); opacity: .7; } 100% { transform: scale(1.45); opacity: 0; } }

.diag-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: #f6dcd6; stroke-width: 8; }
.ring-fill {
  fill: none; stroke: var(--red); stroke-width: 8; stroke-linecap: round;
  stroke-dasharray: 326.73; stroke-dashoffset: 326.73;
  transition: stroke-dashoffset .5s var(--ease-out);
}

.diag-core {
  position: relative;
  width: 7.4rem; height: 7.4rem;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #fff 0%, var(--red-tint) 100%);
  box-shadow: 0 6px 18px rgba(209, 32, 60, .16);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
}
.eq { display: flex; align-items: center; gap: 4px; height: 1.8rem; }
.eq i {
  width: 5px; height: 100%;
  border-radius: 3px;
  background: var(--red);
  transform-origin: center;
  animation: eq 1s ease-in-out infinite;
}
.eq i:nth-child(1) { animation-delay: -.2s; }
.eq i:nth-child(2) { animation-delay: -.5s; }
.eq i:nth-child(3) { animation-delay: -.1s; }
.eq i:nth-child(4) { animation-delay: -.7s; }
.eq i:nth-child(5) { animation-delay: -.35s; }
@keyframes eq { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }

.diag-pct { font-size: .9rem; font-weight: 800; color: var(--red-dark); font-variant-numeric: tabular-nums; }
.diag-pct b { font-size: 1.6rem; color: var(--red); }

/* 最後の絞り込み：鼓動のように2回脈打つ */
.diag.final .diag-core { animation: heartbeat 1.1s ease-in-out 2; }
.diag.final .eq i { animation-duration: .45s; }
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.1); } 30% { transform: scale(1); } 45% { transform: scale(1.07); } }
/* 決定の瞬間 */
.diag.done .diag-core { animation: done-pop .5s var(--ease-spring) both; background: var(--red); }
.diag.done .eq i { background: #fff; animation: none; transform: scaleY(.6); }
.diag.done .diag-pct, .diag.done .diag-pct b { color: #fff; }
.diag.done .ripple { border-color: var(--gold); animation-duration: 1s; }
@keyframes done-pop { 0% { transform: scale(1); } 50% { transform: scale(1.18); } 100% { transform: scale(1); } }

.diag-title { margin: 0 0 .3rem; font-size: 1.3rem; font-weight: 800; color: var(--text); }
.diag-sub { margin: 0 0 1.1rem; font-size: .9rem; color: var(--muted); min-height: 1.5em; }
.diag-sub.swap { animation: swap .35s var(--ease-out); }
@keyframes swap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 照合ログ：上に積み上がり、古い行は薄くなる */
.diag-log {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: 26rem;
  display: flex; flex-direction: column; gap: .4rem;
  min-height: 9.6rem;
  text-align: left;
}
.diag-log li {
  display: flex; align-items: center; gap: .55rem;
  background: #fffaf8;
  border: 1px solid var(--line);
  border-radius: .8rem;
  padding: .45rem .7rem;
  font-size: .85rem;
  animation: log-in .32s var(--ease-out) both;
  transition: opacity .3s ease;
}
.diag-log li.old { opacity: .55; }
.diag-log li.gone { display: none; }
@keyframes log-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.log-q { flex: 0 0 auto; font-size: .74rem; font-weight: 800; color: var(--red-dark); background: var(--red-tint); border-radius: 999px; padding: 0 .55rem; }
.log-q.avoid { color: #fff; background: var(--gray); }
.log-q.final { color: var(--red-deep); background: var(--gold); }
.log-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font-weight: 700; }
.log-n { flex: 0 0 auto; font-size: .78rem; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.log-ok {
  flex: 0 0 1.2rem; width: 1.2rem; height: 1.2rem; border-radius: 50%;
  border: 2px solid var(--red-lighter);
  border-top-color: var(--red);
  animation: spin .7s linear infinite;
}
li.ok .log-ok { animation: none; border: none; background: var(--red); position: relative; }
li.ok .log-ok::after {
  content: ""; position: absolute; left: .4rem; top: .2rem;
  width: .3rem; height: .55rem; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
li.ok.avoid .log-ok { background: var(--gray); }
@keyframes spin { to { transform: rotate(360deg); } }

.diag-skip {
  margin-top: 1rem;
  background: none; border: 0;
  font-family: inherit; font-size: .82rem; font-weight: 700;
  color: var(--muted);
  text-decoration: underline; text-underline-offset: .2em;
  cursor: pointer; padding: .6rem 1rem;
}
.diag-skip:hover { color: var(--red); }

/* ---------------------------------------------------------------- 結果 */

#screen-result { padding-top: 1.1rem; }
.result-head { text-align: center; padding-bottom: 1rem; }

/* 作品番号（RJ…）：ひらくまでは伏せ字、ひらくと数字が回って決まる */

.nick-lead { margin: 0; font-size: .85rem; font-weight: 700; color: var(--muted); }
/* 二つ名 */
.nickname {
  margin: 0 0 .3rem;
  color: var(--red);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.35;
}
.nickname .ch { display: inline-block; animation: ch-in .5s var(--ease-spring) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes ch-in { from { opacity: 0; transform: translateY(.5em) scale(.6); } to { opacity: 1; transform: none; } }

/* 裏返しのカード（タップでひらく） */
.reveal { position: relative; perspective: 1400px; margin: .4rem 0 0; }
.flipper {
  position: relative;
  transform-style: preserve-3d;
  transition: transform .8s var(--ease-out);
}
.reveal.open .flipper { transform: rotateY(180deg); }
.face { -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: var(--radius); }
.face.front { transform: rotateY(180deg); }
.face.back {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
  width: 100%;
  border: 0;
  font-family: inherit;
  color: #fff;
  background: linear-gradient(150deg, var(--red) 0%, var(--red-dark) 100%);
  box-shadow: var(--shadow);
  cursor: pointer;
  overflow: hidden;
  animation: card-in .6s var(--ease-spring) both, float 3s ease-in-out .6s infinite;
}
.reveal.open .face.back { animation: none; pointer-events: none; }
.face.back[hidden] { display: none; }
@keyframes card-in { from { opacity: 0; transform: translateY(24px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.back-pattern {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .14) 0 2px, transparent 3px) 0 0 / 22px 22px,
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .1) 0 1px, transparent 2px) 11px 11px / 22px 22px;
}
.back-pattern::after {
  content: "";
  position: absolute; inset: -50%;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .28) 50%, transparent 60%);
  animation: sheen 2.6s ease-in-out infinite;
}
@keyframes sheen { 0% { transform: translateX(-40%); } 100% { transform: translateX(40%); } }
.back-q {
  position: relative;
  width: 4.6rem; height: 4.6rem;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 2.6rem; font-weight: 800;
  color: var(--red-dark);
  background: var(--gold);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .22);
  animation: q-wobble 1.6s ease-in-out infinite;
}
@keyframes q-wobble { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.back-label { position: relative; font-size: 1.15rem; font-weight: 800; }
.back-tap {
  position: relative;
  font-size: .85rem; font-weight: 800;
  background: rgba(255, 255, 255, .95);
  color: var(--red-dark);
  border-radius: 999px;
  padding: .3rem 1rem;
  animation: tap-pulse 1.3s ease-in-out infinite;
}
@keyframes tap-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); } 50% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); } }
.face.back:active .back-q { transform: scale(.92); }
/* ひらく直前の溜め */
.reveal.charging .face.back { animation: charge .42s ease-in-out both; }
@keyframes charge { 0% { transform: scale(1); } 40% { transform: scale(.95) rotate(-1.5deg); } 70% { transform: scale(1.03) rotate(1.5deg); } 100% { transform: scale(1); } }

/* 紙吹雪（JS がひらいた瞬間に入れる） */
.burst { position: absolute; left: 50%; top: 38%; width: 0; height: 0; pointer-events: none; z-index: 5; }
.burst i {
  position: absolute; left: 0; top: 0;
  width: var(--s, 8px); height: var(--s, 8px);
  background: var(--c, var(--gold));
  border-radius: var(--r, 2px);
  opacity: 0;
  animation: burst 1.1s var(--ease-out) var(--d, 0s) forwards;
}
@keyframes burst {
  0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(.6); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--rot)) scale(1); }
}

/* 作品1件の表示（サムネイル → 作品情報） */
.result-work { margin: 0; }
.work {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 2px solid var(--red-lighter);
  padding: 1.1rem;
  text-align: left;
}
.work.relaxed { box-shadow: var(--shadow-s); outline: 2px dashed var(--red-lighter); }

/* サムネイルはトリミングしない（縦横比のまま全体を表示）／角丸も付けない */
.thumbbox { position: relative; width: 100%; max-width: 12rem; }
.thumb {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 0;
  background: #f6ece8;
  display: block;
}
/* ひらいた直後にぼかしから合う */
.reveal.open .thumbbox { animation: focus-in .9s var(--ease-out) .45s both; }
@keyframes focus-in { from { filter: blur(10px) saturate(.4); transform: scale(.92); } to { filter: none; transform: none; } }
.thumb-fallback {
  display: flex; flex-direction: column; justify-content: center; gap: .3rem;
  padding: .6rem; text-align: center;
  background: #f6ece8; color: var(--muted);
  min-height: 7rem;
}
.fb-title { font-size: .78rem; font-weight: 700; line-height: 1.35; }
.fb-maker { font-size: .72rem; }

.work .body { min-width: 0; width: 100%; }
.work .title { margin: 0 0 .2rem; font-size: 1.08rem; font-weight: 800; line-height: 1.45; }
.work .title a { color: var(--text); text-decoration: none; }
.work .title a:hover { color: var(--red); text-decoration: underline; }
.work .maker { margin: 0 0 .5rem; font-size: .84rem; color: var(--muted); }

.work .meta { display: flex; flex-wrap: wrap; gap: .45rem .7rem; align-items: center; font-size: .82rem; color: var(--text-2); }
.match-badge {
  background: var(--gold); color: var(--red-deep);
  border-radius: 999px; font-weight: 800;
  padding: .1rem .65rem; font-size: .78rem;
}

.rate { display: flex; align-items: center; gap: .6rem; margin: .7rem 0 .5rem; }
.rate-label { font-size: .78rem; font-weight: 800; color: var(--red-dark); flex: 0 0 auto; }
.rate-bar { flex: 1; height: 10px; background: #f3e2dd; border-radius: 999px; overflow: hidden; }
.rate-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--red-light), var(--red));
  border-radius: 999px;
  transition: width 1.1s var(--ease-out);
}
.rate-num { font-size: 1.15rem; font-weight: 800; color: var(--red); min-width: 3.4rem; text-align: right; font-variant-numeric: tabular-nums; }

.reasons { display: flex; flex-wrap: wrap; gap: .35rem .6rem; margin-top: .5rem; }
.reason { display: inline-flex; align-items: baseline; gap: .3rem; opacity: 0; }
.reveal.open .reason { animation: pop-in .4s var(--ease-spring) both; animation-delay: calc(1.3s + var(--i, 0) * 90ms); }
.reason-q { font-size: .76rem; color: var(--muted); font-weight: 700; flex: 0 0 auto; }
.reason-tags { display: inline-flex; gap: .25rem; flex-wrap: wrap; }

/* ---- 主要な操作（Xへ投稿する → 最初から） ----
   ひらくまでは隠し、ひらいたら下から出す。スマホでは画面下に固定。 */

.result-cta {
  position: relative;
  z-index: 8;
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  margin: 1.2rem -1.6rem 0;
  padding: .8rem 1rem calc(.6rem + var(--safe-b));
  background: linear-gradient(rgba(255, 255, 255, 0), #fff 22%);
  transition: opacity .4s ease, transform .5s var(--ease-spring);
}
.result-cta.wait { opacity: 0; transform: translateY(24px); pointer-events: none; visibility: hidden; }
.result-cta .btn.big { width: 100%; max-width: 22rem; }
.x-btn { background: #111 !important; box-shadow: 0 6px 16px rgba(0, 0, 0, .25) !important; }
.x-btn:hover { background: #333 !important; }
.x-logo { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.result-cta.show .x-btn { animation: ready .7s var(--ease-spring) .2s; }
.chip {
  display: inline-block;
  background: var(--red-tint);
  color: var(--red-dark);
  border: 1px solid var(--red-lighter);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  padding: .08rem .6rem;
  white-space: nowrap;
}
.chip.hit { background: var(--red); border-color: var(--red); color: #fff; }

/* ---------------------------------------------------------------- その他 */

.footer { max-width: 820px; margin: 0 auto; padding: 1rem 1rem 2.5rem; text-align: center; }

.toast {
  position: fixed;
  left: 50%; bottom: calc(5.4rem + var(--safe-b));
  transform: translateX(-50%);
  background: rgba(43, 33, 32, .95);
  color: #fff;
  padding: .6rem 1.2rem;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 700;
  z-index: 60;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
  animation: toast-in .3s var(--ease-spring);
  max-width: calc(100vw - 2rem);
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------------------------------------------------------------- レスポンシブ */

@media (max-width: 640px) {
  .card { padding: 1.3rem 1.1rem; }
  .work { padding: 1rem .9rem; }
  .thumbbox { max-width: 9.5rem; }
  .intro-title { font-size: 1.3rem; }
  .q-title { font-size: 1.22rem; }
  .nickname { font-size: 1.35rem; }
  .work .title { font-size: 1rem; }
  .result-cta { margin-left: -1.1rem; margin-right: -1.1rem; }
  .diag { padding-top: 1.6rem; }
  .diag-visual { width: 9.5rem; height: 9.5rem; }
  .diag-core { width: 6.4rem; height: 6.4rem; }
}

/* 動きを減らす設定では、移動・揺れ・回転を止めて色の変化だけ残す */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .reason { opacity: 1; }
  .burst { display: none; }
}

/* ---------------------------------------------------------------- 開発用ナビ
   localhost でのみ表示（公開時には出ない）。 */

.devnav {
  position: relative;
  width: fit-content;
  max-width: calc(100% - 2rem);
  margin: 0 auto 1rem;
  display: flex;
  gap: .4rem;
  background: rgba(43, 43, 43, .92);
  padding: .3rem .5rem;
  border-radius: 999px;
  z-index: 70;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}
.devnav a {
  white-space: nowrap;
  color: #fff;
  text-decoration: none;
  font-size: .72rem;
  font-weight: 700;
  padding: .18rem .6rem;
  border-radius: 999px;
}
.devnav a:hover { background: var(--red); }

/* 回答確認・最優先条件・推薦の根拠 */
.answer-mode { margin: 1.2rem 0 0; padding: 1rem; border: 1px solid var(--control); border-radius: .8rem; }
.answer-mode legend { font-weight: 700; padding: 0 .3rem; }
.answer-mode label { display: flex; align-items: center; gap: .6rem; min-height: 44px; cursor: pointer; }
.answer-mode input { accent-color: var(--red-dark); flex-shrink: 0; width: 1.2rem; height: 1.2rem; }
.option:disabled { opacity: .6; cursor: not-allowed; }
.main-options { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.2rem 0; }
.main-option { white-space: normal; text-align: left; min-height: 44px; }
.main-option[aria-pressed="true"] { background: var(--red-dark); border-color: var(--red-dark); color: var(--white); }
.confirm-row { display: flex; align-items: center; gap: .8rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.confirm-row > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.confirm-row p { margin: .2rem 0; color: var(--text-2); }
.confirm-row > button { flex-shrink: 0; }
#screen-confirm .nav-row { position: sticky; flex-wrap: nowrap; }
#screen-confirm #btn-confirm { flex: 1 1 16rem; min-width: 0; white-space: normal; }
#screen-confirm #btn-confirm-back { flex: 0 0 auto; white-space: normal; }
.main-banner { background: var(--red-tint); color: var(--red-dark); padding: .8rem; border-radius: .8rem; overflow-wrap: anywhere; }
.empty-result { padding: 1rem 0; text-align: left; }
.evidence-list { list-style: none; padding: 0; margin: .8rem 0; }
.evidence-row { padding: .75rem 0; border-bottom: 1px solid var(--line); }
.evidence-row p { margin: .35rem 0; overflow-wrap: anywhere; }
.evidence-status { display: inline-block; margin-left: .4rem; color: var(--red-dark); font-size: .8rem; }
#result-cta .btn { white-space: normal; }
#screen-confirm h3, .work h3 { font-size: 1rem; margin: 1.2rem 0 .4rem; }
@media (max-width: 420px) {
  #screen-confirm .nav-row { align-items: stretch; gap: .6rem; }
  #screen-confirm .nav-row .btn { padding: .65rem .9rem; font-size: .9rem; }
  #screen-confirm #btn-confirm { flex: 1 1 auto; }
  #screen-confirm #btn-confirm-back { flex: 0 0 auto; }
  .confirm-row { align-items: flex-start; }
  .confirm-row > button { padding: .5rem .7rem; }
  .main-option { width: 100%; }
}

/* DOPE / AFTER DARK：既存の画面構成・選択・リング・カード演出を継承 */
:root {
  color-scheme: dark;
  --red: #ad335e;
  --accent-text: #f3a6c0;
  --primary-hover: #9b2c54;
  --red-header: #140f1c;
  --red-dark: #f3a6c0;
  --red-deep: #210f1c;
  --red-light: #d65a83;
  --red-lighter: #76415c;
  --red-tint: #2e182b;
  --gold: #bdb0dd;
  --gold-soft: #dfd4fa;
  --cream: #100d16;
  --white: #1c1624;
  --text: #f4eaf1;
  --text-2: #d6c5d1;
  --muted: #b3a0b1;
  --line: #3c2c42;
  --control: #92718c;
  --gray: #c1afbd;
  --shadow: 0 15px 40px rgba(0,0,0,.32);
  --shadow-s: 0 5px 22px rgba(0,0,0,.25);
  --radius: 1.15rem;
}
body { background: radial-gradient(ellipse at 85% -5%, #3a1733 0, transparent 42%), radial-gradient(ellipse at 0 55%, #1c142e 0, transparent 55%), var(--cream); }
.topbar { background: rgba(20,15,28,.96); border-bottom: 1px solid #57304b; box-shadow: 0 6px 24px #08050c66; }
.brand-en { color: #d8b5c8; }
.card { background: #1c1624; border: 1px solid #473044; box-shadow: var(--shadow); }
.overlay { background: #08060de8; }
.gate-logo { background: #32192e; color: #f4c1d2; }
.gate-title, .intro-title, .q-title, .nickname { color: var(--text); }
.gate .muted, .footer, .footer .muted { color: #bfaebe; }
.eyebrow { background: #2b192b; color: #f1acc7; border-color: #6a3a55; }
.intro { text-align: left; }
.intro-title { font-size: clamp(1.85rem, 6vw, 2.7rem); line-height: 1.45; letter-spacing: .035em; }
.intro-lead { color: #c4adbf; line-height: 2; font-size: .94rem; }
.marker { background: none; color: var(--accent-text); box-shadow: none; text-shadow: 0 0 30px #9a1d4a33; }
.flow { background: #130f1b; border: 1px solid #3e2b42; border-radius: .9rem; padding: 1rem .7rem; }
.flow-num, .flow-label { color: #ddc9dc; }
.flow-icon svg { stroke: #d2a9ca; }
.flow-arrow { border-color: #86627f; }
.intro-list { color: var(--text-2); background: #15101d; border: 1px solid #473044; }
.intro-list li::before { color: #e38baa; }
.btn.primary { background: var(--red); color: #fff; box-shadow: 0 6px 20px #9a1d4a33; }
.btn.primary:hover:not(:disabled) { background: var(--primary-hover); }
.btn.primary:disabled { background: #443343; color: #bfa7b8; }
.btn.ghost { color: #e7c1d6; border-color: #87617e; background: transparent; }
.btn.ghost:hover:not(:disabled) { background: #362139; }
.btn.ghost:disabled { color: #baadbd; border-color: #6f5b71; background: #251c2d; }
.question { background: #191421; }
.q-hint, .q-note, .pick-count { color: #c7adbf; }
.q-note { background: #2d1d2b; border-color: #855b74; }
.q-kind.avoid { color: #f2a6bf; background: #381b2a; }
.option { color: #f1e3ec; background: #241b2e; border-color: #71536f; }
.option .desc { color: #bfabbf; }
.option .mark { background: #17121e; border-color: #a1849e; }
.option.on { background: #47213e; border-color: var(--red-light); color: #fff1f7; box-shadow: 0 0 0 1px #e78aae33; }
.option.on .desc { color: #f2c2d8; }
.option.on .mark { background: var(--red); border-color: var(--red-light); }
.option.skip { background: #17121e; color: #cbb5c6; border-color: #755a73; }
.option.skip.on { background: #37273e; border-color: #c39bb9; }
@media (hover:hover) { .option:hover:not(:disabled):not(.on) { background: #33223b; border-color: #b082a6; } .option.on:hover { background: #512544; color: #fff1f7; } }
.option:disabled { opacity: 1; background: #211b28; color: #bcb0c2; border-color: #68566d; }
.option:disabled .desc { color: #bcb0c2; }
.options .option[aria-disabled="true"] {
  background: #211b28;
  color: #d6c5d1;
  border-color: #92718c;
  border-style: dashed;
  cursor: help;
}
.options.at-max .option[aria-disabled="true"] { opacity: 1; }
.option .option-conflict { font-size: .8rem; line-height: 1.65; font-weight: 700; color: #f3b7cc; margin-top: .35rem; }
.q-conflict-help { margin-top: 1rem; padding: .8rem; border: 1px solid #92718c; border-radius: .8rem; background: #2d1d2b; }
.q-conflict-help p { margin: 0 0 .6rem; font-size: .85rem; line-height: 1.7; color: #f4eaf1; overflow-wrap: anywhere; }
.q-conflict-help .btn { min-height: 44px; font-size: .85rem; max-width: 100%; white-space: normal; }
.options.avoid .option { background: #241e2b; color: #f1e3ec; border-color: #a1849e; }
.options.avoid .option.on { background: #3c2c40; color: #fff1f7; border-color: #c1afbd; box-shadow: inset 4px 0 0 #c1afbd; }
.options.avoid .option .desc { color: #cbb9cc; }
.options.avoid .option.on .desc { color: #ead8e8; }
.options.avoid .option.on .mark { background: #65516c; border-color: #c1afbd; }
@media (hover:hover) {
  .options.avoid .option:hover:not(:disabled):not(.on) { background: #332b3b; border-color: #c1afbd; }
  .options.avoid .option.on:hover { background: #4a3650; color: #fff1f7; }
  .option.skip:hover:not(:disabled) { background: #33223b; color: #f1e3ec; }
}
.flow-num b, .q-count b, .diag-skip:hover, .work .title a:hover { color: var(--accent-text); }
.q-axis, .pick-count.muted { background: #2d2035; color: #e7c8d8; border-color: #775b72; }
.warn { background: #341923; color: #ffb6c7; }
.nav-row { background: linear-gradient(transparent, #100d16 28%); }
.steps li { background: #4a374e; }
.steps li.done { background: var(--red); }
.steps li.now { background: #efbfd7; box-shadow: 0 0 12px #d85a8577; }
.diag { background: #191320; }
.ripple { border-color: #835474; }
.ring-track { stroke: #3a2542; }
.ring-fill { stroke: #d789b3; }
.diag-core { background: #20152c; border-color: #64435e; box-shadow: 0 0 45px #b3376e22; }
.eq i { background: var(--red-light); }
.diag-pct, .diag-title, .diag-log .log-text { color: #ecdeee; }
.diag-log li { background: #2a2032; border-color: #634c69; }
.diag-log li.old { opacity: 1; background: #211a29; }
.log-q { background: #442331; color: #ffc4cf; }
.log-q.avoid { background: #514158; color: #fff; }
.log-q.final { background: var(--red); color: #fff; }
.log-ok { background: #402b47; }
.log-n { color: #d4b3cf; }
.diag-log li.ok .log-ok { background: var(--red); }
.diag-skip { color: #c7adbf; }
.main-banner { background: #2d1b2f; color: #efc2d9; border: 1px solid #68425d; }
.main-option { background: #2c2035; color: #ead5e5; border: 1px solid #775b72; }
.main-option[aria-pressed="true"] { background: var(--red); color: #fff; border-color: var(--red-light); }
.work { background: #1c1525; border-color: #6c3d59; box-shadow: none; }
.work .title a, .work .maker, .work .meta { color: #e7d7e3; }
.thumb { background: #302538; }
.thumb-fallback { background: #302538; color: #dec8dc; }
.match-badge { background: #40223e; color: #f4c4de; }
.rate-bar { background: #4b314f; }
.rate-fill { background: var(--red); }
.rate-label, .rate-num { color: #f1bdd6; }
.chip { background: #32213a; color: #e5bfd8; border-color: #8a5d7f; }
.chip.hit { background: var(--red); border-color: var(--red-light); color: #fff; }
.evidence-status { color: #e5b5d4; }
.face.back { background: linear-gradient(145deg,#3a1d3c,#160f20); border: 1px solid #97648b; color: #f1d9eb; box-shadow: 0 0 35px #b14e8122; }
.back-q { color: #fff; background: var(--red); text-shadow: none; }
.back-label { color: #efd7e7; }
.back-tap { color: #fff; background: var(--red); }
.result-cta { background: #1c1624; margin-top: .6rem; padding-top: .25rem; }
.x-btn { background: #111 !important; color: #fff !important; border: 1px solid #78647e; }
.x-btn:hover:not(:disabled) { background: #333 !important; }
.x-btn:disabled { background: #332d36 !important; color: #c8bdcb !important; }
.share-editor { width: 100%; max-width: 30rem; margin: .2rem 0; text-align: left; color: #e7d2e1; }
.share-comment-label { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.share-comment-label label { font-weight: 700; font-size: .9rem; }
#share-comment-count { flex-shrink: 0; }
.share-editor textarea { display: block; width: 100%; min-height: 4.5rem; border: 1px solid #92728c; border-radius: .7rem; background: #110d19; color: #f3e6ef; font: inherit; font-size: 1rem; line-height: 1.5; padding: .65rem .8rem; margin-top: .4rem; resize: vertical; }
.share-editor textarea:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.share-editor textarea[aria-invalid="true"] { border-color: #ffb6c7; }
.share-editor .share-check { display: flex; align-items: center; gap: .6rem; min-height: 44px; font-size: .85rem; cursor: pointer; }
.share-check input { accent-color: var(--red); width: 1.2rem; height: 1.2rem; flex-shrink: 0; margin: 0; }
#share-privacy { margin: 0; line-height: 1.5; }
#share-draft { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: .85rem; background: #130d1b; border: 1px solid #563a54; border-radius: .7rem; padding: .8rem; margin: .35rem 0; }
.compact-accordion > summary { display: flex; align-items: center; justify-content: space-between; gap: .8rem; min-height: 44px; cursor: pointer; list-style: none; font-weight: 700; color: var(--text-2); }
.compact-accordion > summary::-webkit-details-marker { display: none; }
.compact-accordion > summary::after { content: "＋"; flex-shrink: 0; }
.compact-accordion[open] > summary::after { content: "−"; }
.compact-accordion > summary:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; border-radius: .3rem; }
.confirm-review { margin-top: .8rem; border-top: 1px solid var(--line); }
.share-preview-wrap { width: 100%; max-width: 30rem; text-align: left; }
.share-preview-details > summary { font-size: .85rem; }
#share-draft { user-select: text; -webkit-user-select: text; }
#btn-copy-post { font-size: .85rem; min-height: 44px; margin-bottom: .5rem; }
#x-fallback:not([hidden]) { display: inline-flex; align-items: center; min-height: 44px; }
.main-option, .compact-accordion > summary, .confirm-row button { scroll-margin-block: 1rem 6rem; }
.share-error:empty { display: none; }
.share-error { color: #ffb6c7; }
.share-preview { display: block; width: 100%; height: auto; border-radius: .8rem; margin: 1rem 0; }
.share-landing main { padding-top: 3rem; }

/* 結果・共有ページ共通の下部固定ボタン。本文と演出のtransformから独立させる。 */
html { scroll-padding-bottom: var(--active-dock-height, calc(5.5rem + var(--safe-b))); }
body.has-bottom-cta { padding-bottom: var(--active-dock-height, calc(5.5rem + var(--safe-b))); }
.bottom-cta {
  position: fixed;
  inset: auto 0 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: .65rem max(1rem, env(safe-area-inset-right, 0px)) calc(.65rem + var(--safe-b)) max(1rem, env(safe-area-inset-left, 0px));
  border-top: 1px solid #68425d;
  background: #1c1624;
  box-shadow: 0 -6px 24px #08050c66;
}
.bottom-cta > .btn.big { width: 100%; max-width: 32rem; min-height: 3.1rem; white-space: normal; text-align: center; }
.bottom-cta #x-fallback { max-width: 32rem; text-align: center; }
.thumbbox { display: block; }
.share-editor .share-check { align-items: flex-start; }
.share-editor .share-check input { flex: 0 0 auto; margin-top: .3rem; }
#share-work-example { display: inline-block; font-variant-numeric: tabular-nums; }
#share-work-help { margin-top: 0; }
.share-landing main { padding-top: 1rem; }
.share-age-gate {
  width: min(100%, 32.4rem);
  max-width: none;
  max-height: 100vh;
  max-height: 100dvh;
  padding: 1.2rem;
  border: 0;
  background: transparent;
  color: var(--text);
}
.share-age-gate::backdrop { background: #08060df5; }
.share-age-gate .gate { width: 100%; }