/* 戀愛體檢 — design tokens
   刻意跟暈船指數區隔：那邊是奶油白＋珊瑚紅（輕、可愛），這裡是紫灰（沉穩、像報告）。 */
:root {
  --canvas: #FAF8FC;
  --surface: #FFFFFF;
  --accent: #7C5CD6;
  --accent-deep: #6547BC;
  --accent-weak: #F1ECFB;
  --ink: #241E33;
  --ink-2: #5C5473;
  --ink-3: #9A93AE;
  --line: #E6E0EE;
  --ok: #3D8F68;
  --warn: #C1802A;
  --bad: #C9564C;
  --ok-weak: #E8F3ED;
  --warn-weak: #FBF1E2;
  --bad-weak: #FBEBE9;

  --r-sm: .5rem;
  --r-md: .875rem;
  --r-lg: 1.25rem;
  --r-full: 999px;
  --wrap: 600px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--canvas); color: var(--ink);
  font-family: "Inter", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  font-size: 16px; line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
/* 不要用 text-wrap: pretty／balance——Safari 會重排整段，實機上每行只用到約三分之二寬度。 */
body { overflow-x: hidden; }

h1, h2, h3 { line-height: 1.35; margin: 0; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0; }
button { font-family: inherit; font-size: inherit; color: inherit; }
a { color: var(--accent-deep); }

/* 只設上下 padding，不要用 shorthand——會把 .wrap 的左右 20px 一起蓋掉 */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

.screen { display: none; }
.screen.is-active { display: block; animation: fade .3s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── 按鈕 ─────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 54px; padding: 0 28px;
  border: none; border-radius: var(--r-full);
  background: var(--accent); color: #fff;
  font-weight: 600; font-size: 17px; cursor: pointer; text-decoration: none;
  transition: transform .12s ease, background .18s ease;
  box-shadow: 0 4px 16px -5px rgba(124, 92, 214, .6);
}
.btn:active { transform: translateY(1px); }
.btn-ghost { background: transparent; color: var(--ink-2); border: 1px solid var(--line); box-shadow: none; font-weight: 500; }
.btn-block { width: 100%; }
:where(button, a, input, [tabindex]):focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: var(--r-sm); }

.brand { display: flex; align-items: center; justify-content: center; gap: 9px; padding-top: 26px; }
.brand svg { width: 26px; height: 26px; }
.brand-name { font-weight: 700; font-size: 15px; letter-spacing: .02em; }

/* 頁首。條款、隱私權那類靜態頁沿用置中的 .brand，主要頁面用這個左右分欄的版本。 */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: var(--wrap); margin: 0 auto; padding: 18px 20px 0; }
.top .brand { padding-top: 0; justify-content: flex-start; text-decoration: none; color: inherit; }
.top-nav { display: flex; align-items: center; gap: 4px; }
.top-nav a { color: var(--ink-2); text-decoration: none; font-size: 14px; padding: 9px 11px; border-radius: var(--r-full); white-space: nowrap; }
.btn-sm { min-height: 40px; padding: 0 17px; font-size: 14.5px; box-shadow: none; }

/* ── 首頁 ─────────────────────────────────── */
.hero { padding-top: 26px; padding-bottom: 34px; text-align: center; }
.hero h1 { font-size: clamp(30px, 8vw, 42px); }
.hero-sub { margin-top: 18px; color: var(--ink-2); font-size: 17px; }
.hero .btn { margin-top: 28px; }
.hero-meta { margin-top: 14px; color: var(--ink-3); font-size: 13.5px; }

.stats { display: flex; margin-top: 30px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.stats div { flex: 1; padding: 14px 6px; border-left: 1px solid var(--line); }
.stats div:first-child { border-left: none; }
.stats b { display: block; font-size: 24px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.stats span { font-size: 12.5px; color: var(--ink-3); }

.resume {
  display: block; width: 100%; text-align: left; margin-bottom: 10px;
  background: var(--accent-weak); border: 1px solid #DED2F5; border-radius: var(--r-md);
  padding: 14px 16px; cursor: pointer;
}
.resume b { display: block; font-size: 15.5px; }
.resume span { color: var(--ink-2); font-size: 14px; }
.resume-done { background: var(--surface); border-color: var(--line); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; box-shadow: 0 1px 2px rgba(36, 30, 51, .035); }
.sec { margin-top: 40px; }
.sec-title { display: flex; align-items: center; gap: 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; color: var(--accent); margin-bottom: 12px; }
.sec-title::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.lede { font-size: 18px; font-weight: 600; line-height: 1.6; }
.body-p { color: var(--ink-2); font-size: 15.5px; margin-top: 12px; }

.mini-grid { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.mini { display: grid; grid-template-columns: 34px 1fr; gap: 4px 12px; align-items: center; padding: 12px 14px; background: var(--accent-weak); border-radius: var(--r-md); }
.mini-ic { grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--accent); display: grid; place-items: center; }
.mini-ic svg { width: 19px; height: 19px; }
.mini b { font-size: 15px; align-self: end; }
.mini > span:last-child { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; align-self: start; }

.get { display: flex; gap: 14px; padding: 15px 0; border-top: 1px solid var(--line); }
.get:first-child { border-top: none; padding-top: 0; }
.get-no { font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: .04em; padding-top: 3px; flex: none; }
.get b { font-size: 15.5px; display: block; }
.get p { color: var(--ink-2); font-size: 14.5px; margin-top: 4px; }

.scene-chip { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.scene-chip svg { display: block; width: 100%; height: auto; }
.scene-chip span { display: block; padding: 7px 4px; font-size: 12.5px; color: var(--ink-2); font-weight: 600; text-align: center; }

/* 首頁「結果有兩層」：兩層一定要長得不一樣，不然讀者分不出這是兩組東西。
   第一層＝少而大的寬幅場景（有天空有地面，看得出是一個處境）；
   第二層＝多而小的裸圓人像（沒有卡片框，看得出是一個人）。
   場景不要縮到 100px 以下——背景道具會糊成一塊粉彩，那時候它跟圓頭像就沒差別了。 */
/* 手機是兩欄，第三張橫跨整列——排成 2+1 的拼貼。375px 的機器上前兩張約 136px、
   第三張約 287px；那張大的負責把「這是一個有背景的場景」講清楚，
   小的兩張只要看得出底色不同就夠了。擠成三欄的話每張只剩 100px，背景會糊掉。 */
.scene-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 16px; }
.scene-strip .scene-chip:nth-child(3) { grid-column: span 2; }
.scene-strip .scene-chip span { padding: 9px 4px; font-size: 13px; color: var(--ink); }

.soul-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.soul-row .soul-dot { display: grid; justify-items: center; gap: 6px; }
.soul-row .soul-dot svg { width: 100%; max-width: 56px; height: auto; }
.soul-row .soul-dot span { font-size: 12px; color: var(--ink-2); font-weight: 600; text-align: center; }

.type-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.type-chip { display: grid; justify-items: center; gap: 5px; padding: 10px 4px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.type-chip svg { width: 100%; max-width: 64px; height: auto; }
.type-chip span { font-size: 12.5px; color: var(--ink-2); font-weight: 600; text-align: center; }

.qa-row { padding: 14px 0; border-top: 1px solid var(--line); }
.qa-row:first-child { border-top: none; padding-top: 0; }
.qa-row b { font-size: 15.5px; }
.qa-row p { color: var(--ink-2); font-size: 14.5px; margin-top: 5px; }

.final-cta { margin-top: 40px; text-align: center; }
.final-cta p { color: var(--ink-2); }

.pitch-rows { margin-top: 4px; }
.pitch-row { display: flex; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); }
.pitch-row:first-child { border-top: none; }
.pitch-row i { width: 24px; height: 24px; border-radius: var(--r-sm); background: var(--accent-weak); color: var(--accent); display: grid; place-items: center; font-size: 12px; font-weight: 700; font-style: normal; flex: none; }
.pitch-row b { display: block; font-size: 15.5px; }
.pitch-row span { color: var(--ink-2); font-size: 14.5px; }

/* ── 取代號 ───────────────────────────────── */
.intro { padding-top: 40px; padding-bottom: 40px; }
.intro h2 { font-size: 24px; text-align: center; }
.intro-note { text-align: center; color: var(--ink-2); font-size: 15px; margin-top: 10px; }
.field { margin-top: 26px; }
.field label { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 8px; }
.field input {
  width: 100%; min-height: 54px; padding: 0 18px;
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink); font-size: 17px;
}
.field input:focus { outline: none; border-color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: var(--r-full); padding: 7px 14px; font-size: 14px; cursor: pointer; min-height: 38px; }
.note-box { margin-top: 22px; padding: 14px 16px; background: var(--accent-weak); border-radius: var(--r-md); color: var(--ink-2); font-size: 13.5px; line-height: 1.7; }

/* ── 插圖 ─────────────────────────────────── */
/* 插圖全部由 js/art.js 產生。這裡只管尺寸與動態，圖形本身不在 CSS 裡。 */
.lc-scene { display: block; width: 100%; height: auto; }
.lc-face { display: block; }
.lc-icon { display: block; }
.hero-art { max-width: 330px; margin: 0 auto 2px; }
.intro-art { max-width: 320px; margin: 0 auto 4px; }
.loading-art { max-width: 300px; margin: 0 auto 10px; }

.lc-float { animation: floaty 4.6s ease-in-out infinite; transform-origin: 200px 160px; }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(-.6deg); } 50% { transform: translateY(-7px) rotate(.6deg); } }

/* 心電圖線：整條往左跑，看起來像監視器在跑。
   pulseLine 每 80 單位重複一次，所以剛好位移 80 就會無縫接上。
   不要用 stroke-dasharray 做「描線」——線會被切成一段一段，靜止的瞬間像散落的碎線。 */
.lc-pulse { animation: ecg 2.6s linear infinite; }
@keyframes ecg { to { transform: translateX(-80px); } }

.lc-scan { animation: scan 2.1s ease-in-out infinite alternate; }
@keyframes scan { from { transform: translateX(0); } to { transform: translateX(218px); } }

/* 心跳。這個角色是一顆心，所以這是全站最主要的動作。
   兩下一組（lub-dub）而不是單純的放大縮小，才像心跳而不像呼吸。 */
.lc-beat { animation: beat 2.6s ease-in-out infinite; }
.lc-beat-fast { animation-duration: 1.5s; }
@keyframes beat {
  0%, 42%, 100% { transform: scale(1); }
  6% { transform: scale(1.062); }
  13% { transform: scale(1); }
  20% { transform: scale(1.038); }
  30% { transform: scale(1); }
}

/* 眨眼。大部分時間是睜開的，只有一瞬間壓扁。 */
.lc-blink { animation: blink 5.4s ease-in-out infinite; }
@keyframes blink { 0%, 91%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }

.lc-rise { animation: rise 4.2s ease-in-out infinite; }
@keyframes rise {
  0% { transform: translateY(7px) scale(.85); opacity: 0; }
  22% { opacity: .95; }
  100% { transform: translateY(-26px) scale(1); opacity: 0; }
}
.lc-drift { animation: drift 9s ease-in-out infinite; }
@keyframes drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(13px); } }
.lc-bob { animation: bob 3.2s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.lc-sway { animation: sway 5.2s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.lc-twinkle { animation: twinkle 3.4s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: .6; } }
.lc-tick { animation: tick 8s linear infinite; }
@keyframes tick { to { transform: rotate(360deg); } }
.lc-drip { animation: drip 3.6s ease-in infinite; }
@keyframes drip {
  0%, 55% { transform: translateY(0); opacity: 0; }
  62% { opacity: 1; }
  100% { transform: translateY(13px); opacity: 0; }
}
/* 手機在震。幾乎都是靜止的，只有一小段抖，這樣才像通知進來而不像壞掉。 */
.lc-buzz { animation: buzz 4.4s ease-in-out infinite; }
@keyframes buzz {
  0%, 82%, 100% { transform: translateX(0) rotate(0); }
  85% { transform: translateX(-1.6px) rotate(-2.5deg); }
  89% { transform: translateX(1.6px) rotate(2.5deg); }
  93% { transform: translateX(-1px) rotate(-1.5deg); }
  96% { transform: translateX(0) rotate(0); }
}

/* ── 題目 ─────────────────────────────────── */
.bar { position: sticky; top: 0; z-index: 20; background: rgba(250, 248, 252, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.bar-inner { display: flex; align-items: center; gap: 12px; padding: 13px 20px 11px; max-width: var(--wrap); margin: 0 auto; }
.bar-track { flex: 1; height: 6px; background: var(--line); border-radius: var(--r-full); overflow: hidden; }
.bar-fill { height: 100%; width: 0; background: var(--accent); border-radius: var(--r-full); transition: width .35s cubic-bezier(.4, 0, .2, 1); }
.bar-count { font-size: 13px; color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.bar-chapter { max-width: var(--wrap); margin: 0 auto; padding: 0 20px 10px; font-size: 12.5px; color: var(--accent); font-weight: 600; }

.q { padding-top: 30px; padding-bottom: 44px; }
.q-num { font-size: 12.5px; color: var(--ink-3); font-weight: 600; letter-spacing: .06em; }
.q-text { font-size: clamp(21px, 5.2vw, 25px); margin-top: 8px; }
.q-hint { margin-top: 9px; color: var(--ink-2); font-size: 14.5px; }
.options { margin-top: 24px; display: flex; flex-direction: column; gap: 9px; }
.opt {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 56px; padding: 12px 16px; text-align: left;
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--r-md); cursor: pointer; font-size: 16px; line-height: 1.5;
  transition: border-color .14s ease, background .14s ease, transform .1s ease;
}
.opt:active { transform: scale(.994); }
.opt.is-picked { border-color: var(--accent); background: var(--accent-weak); }
.opt-mark { width: 20px; height: 20px; border-radius: 50%; flex: none; border: 1.5px solid var(--line); background: #fff; }
.opt.is-picked .opt-mark { border-color: var(--accent); border-width: 6px; }
.opt-skip { margin-top: 6px; border-style: dashed; color: var(--ink-2); font-size: 15px; min-height: 50px; }
.opt-skip.is-picked { border-style: solid; }

.slider-wrap { margin-top: 32px; }
.slider-value { text-align: center; font-size: 52px; font-weight: 700; color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums; }
input[type=range] { width: 100%; margin: 22px 0 6px; -webkit-appearance: none; appearance: none; background: transparent; }
input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: var(--r-full); background: linear-gradient(90deg, #D9CEF3 0%, var(--accent) 100%); }
input[type=range]::-moz-range-track { height: 8px; border-radius: var(--r-full); background: linear-gradient(90deg, #D9CEF3 0%, var(--accent) 100%); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; margin-top: -12px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); box-shadow: 0 3px 10px -2px rgba(36,30,51,.25); }
input[type=range]::-moz-range-thumb { width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); }
.slider-ends { display: flex; justify-content: space-between; color: var(--ink-3); font-size: 13px; }
.slider-ends span { max-width: 46%; }
.slider-ends span:last-child { text-align: right; }

.q-nav { display: flex; gap: 10px; margin-top: 26px; align-items: center; }
.q-back { min-height: 44px; padding: 0 16px; background: none; border: none; color: var(--ink-3); cursor: pointer; font-size: 15px; }
.q-anim { animation: fade .24s ease both; }

/* ── 計算中 ───────────────────────────────── */
.loading { min-height: 80vh; display: grid; place-content: center; text-align: center; padding: 20px; }
.loading-line { font-size: 18px; font-weight: 600; min-height: 30px; }
.loading-dots { display: flex; gap: 7px; justify-content: center; margin-top: 18px; }
.loading-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: bob 1s infinite ease-in-out; }
.loading-dots i:nth-child(2) { animation-delay: .16s; }
.loading-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes bob { 0%,100% { opacity:.3; transform: translateY(0);} 50% { opacity:1; transform: translateY(-6px);} }

/* ── 報告 ─────────────────────────────────── */
.report { padding-bottom: 60px; }
.rp-hero { padding-top: 28px; padding-bottom: 6px; }
/* 報告最上面是你的專屬場景：環境來自結果、角色來自人格，144 種組合。 */
.rp-scene { margin-bottom: 16px; border-radius: var(--r-lg); overflow: hidden; line-height: 0; }
.rp-scene svg { display: block; width: 100%; height: auto; }
.rp-tag { display: inline-block; margin-top: 8px; padding: 4px 12px; border-radius: var(--r-full); background: var(--accent-weak); color: var(--accent-deep); font-size: 12.5px; font-weight: 700; }
.rp-rank { margin-top: 14px; padding: 11px 14px; background: var(--accent-weak); border-radius: var(--r-md); font-size: 13.5px; color: var(--ink-2); }
.rp-rank b { color: var(--accent-deep); font-size: 15px; }
.rp-for { font-size: 14px; color: var(--ink-3); }
.rp-title { font-size: clamp(28px, 7.6vw, 40px); margin-top: 8px; }
.rp-lead { margin-top: 12px; font-size: 17.5px; color: var(--ink-2); font-weight: 500; }
.rp-health { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.rp-health-num { font-size: 44px; font-weight: 700; color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums; }
.rp-health-label { font-size: 14.5px; font-weight: 600; }
.rp-health-label span { display: block; font-size: 12.5px; color: var(--ink-3); font-weight: 400; }

.verdict-card p { margin-bottom: 14px; color: var(--ink-2); }
.verdict-card p:last-of-type { margin-bottom: 0; }
.advice { margin-top: 18px; padding: 16px 18px; background: var(--accent-weak); border-radius: var(--r-md); }
.advice b { display: block; font-size: 14px; color: var(--accent-deep); margin-bottom: 4px; }
.advice p { color: var(--ink); margin: 0; }

.radar { display: block; width: 100%; max-width: 340px; margin: 0 auto; height: auto; }
/* 三個指標本來只有數字，光看數字不知道要想什麼，所以每個底下加一句解讀。
   有了文字就不能再排成三欄，會擠成一團。 */
.pillars { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.pillars > div { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; align-items: baseline;
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; }
.pillars span { font-size: 13.5px; font-weight: 600; }
.pillars b { font-size: 22px; font-variant-numeric: tabular-nums; }
.pillars b.high { color: var(--ok); }
.pillars b.mid { color: var(--warn); }
.pillars b.low { color: var(--bad); }
.pillars p { grid-column: 1 / -1; font-size: 13.5px; color: var(--ink-2); margin-top: 2px; }

/* 每個維度的行動建議。只在分數不高的時候出現。 */
.fix { margin-top: 14px; padding: 12px 14px; background: var(--accent-weak); border-radius: var(--r-md); }
.fix b { display: block; font-size: 12.5px; color: var(--accent-deep); margin-bottom: 3px; }
.fix p { font-size: 14px; color: var(--ink-2); line-height: 1.65; }

/* ── 戀愛人格卡 ───────────────────────────── */
.persona-top { display: flex; gap: 14px; align-items: center; }
.persona-art { flex: none; }
.persona-art svg { width: 84px; height: 84px; }
.persona-tag { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--accent); }
.persona-name { font-size: 21px; margin-top: 3px; }
.persona-line { font-size: 14px; color: var(--ink-2); margin-top: 5px; }
.persona-p { color: var(--ink-2); font-size: 15px; margin-top: 14px; }
.persona-axes { margin-top: 18px; display: flex; flex-direction: column; gap: 7px; }
.persona-axes > div { display: grid; grid-template-columns: 66px 1fr; gap: 10px; align-items: center; }
.persona-axes span { font-size: 12.5px; color: var(--ink-3); }
.axis-bar { height: 7px; background: var(--line); border-radius: var(--r-full); overflow: hidden; }
.axis-bar i { display: block; height: 100%; background: var(--accent); border-radius: var(--r-full); }
.persona-two { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.persona-two > div { padding: 13px 15px; border-radius: var(--r-md); }
.pgood { background: var(--ok-weak); }
.pwatch { background: var(--warn-weak); }
.persona-two b { display: block; font-size: 12.5px; margin-bottom: 3px; }
.pgood b { color: var(--ok); }
.pwatch b { color: var(--warn); }
.persona-two p { font-size: 14px; color: var(--ink-2); line-height: 1.65; }
.persona-quote { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 12.5px; color: var(--ink-3); }
.persona-quote span { display: block; margin-top: 4px; font-size: 17px; font-weight: 700; color: var(--ink); }

.weak { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.weak:first-child { border-top: none; padding-top: 0; }
.weak-no { width: 24px; height: 24px; border-radius: 50%; background: var(--bad-weak); color: var(--bad); display: grid; place-items: center; font-size: 13px; font-weight: 700; flex: none; }
.weak b { display: block; font-size: 15.5px; }
.weak p { color: var(--ink-2); font-size: 14.5px; margin-top: 3px; }
.weak-fix { color: var(--accent-deep) !important; margin-top: 7px !important; }
.weak-none { color: var(--ink-2); font-size: 15px; }
.weak-none b { color: var(--ink); }

.dim-card { margin-bottom: 10px; }
.dim-head { display: flex; align-items: flex-start; gap: 12px; }
.dim-name { font-size: 17px; font-weight: 700; }
.dim-ask { font-size: 13px; color: var(--ink-3); }
.dim-score { margin-left: auto; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.dim-score.high { color: var(--ok); }
.dim-score.mid { color: var(--warn); }
.dim-score.low { color: var(--bad); }
.dim-bar { height: 6px; background: var(--line); border-radius: var(--r-full); margin-top: 12px; overflow: hidden; }
.dim-bar i { display: block; height: 100%; border-radius: var(--r-full); }
.dim-bar i.high { background: var(--ok); }
.dim-bar i.mid { background: var(--warn); }
.dim-bar i.low { background: var(--bad); }
.dim-text { margin-top: 12px; color: var(--ink-2); font-size: 15px; }

.qa { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.qa-title { font-size: 12.5px; color: var(--ink-3); font-weight: 600; margin-bottom: 7px; }
.qa ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.qa li { font-size: 14px; }
.qa-q { display: block; color: var(--ink-2); }
.qa-a { display: block; color: var(--accent-deep); font-weight: 600; margin-top: 1px; }

.pk { padding: 13px 0; border-top: 1px solid var(--line); }
.pk:first-child { border-top: none; padding-top: 0; }
.pk-label { font-size: 12.5px; color: var(--ink-3); }
.pk-value { font-size: 16px; font-weight: 700; margin-top: 1px; }
.pk-note { font-size: 14.5px; color: var(--ink-2); margin-top: 5px; }

.flag { padding: 13px 0; border-top: 1px solid var(--line); }
.flag:first-child { border-top: none; padding-top: 0; }
.flag b { font-size: 15.5px; }
.flag p { color: var(--ink-2); font-size: 14.5px; margin-top: 3px; }

/* 分享卡的分頁與預覽 */
.ctabs { display: flex; gap: 6px; margin-top: 16px; padding: 4px; background: var(--accent-weak); border-radius: var(--r-full); }
.ctab { flex: 1; border: 0; background: transparent; color: var(--ink-2); font: inherit; font-size: 14px;
  font-weight: 600; padding: 9px 4px; border-radius: var(--r-full); cursor: pointer; }
.ctab.is-on { background: var(--surface); color: var(--accent-deep); box-shadow: var(--sh-1); }
.card-preview { margin-top: 14px; border-radius: var(--r-md); overflow: hidden; background: var(--accent-weak);
  min-height: 200px; display: grid; place-items: center; transition: opacity .18s; }
.card-preview canvas { display: block; width: 100%; height: auto; }
.card-preview.is-busy { opacity: .45; }
.card-loading { padding: 60px 0; color: var(--ink-3); font-size: 13.5px; }

.opt-check { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; }
.opt-check input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--accent); }
.opt-check span { font-size: 14px; }
.opt-check i { display: block; font-style: normal; font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.share-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.share-note { margin-top: 10px; font-size: 13.5px; color: var(--ink-3); min-height: 19px; }
.rp-actions { margin-top: 40px; display: flex; flex-direction: column; gap: 10px; }
.disclaimer { margin-top: 32px; font-size: 13px; color: var(--ink-3); line-height: 1.7; }

/* ── 頁尾與法務頁 ─────────────────────────── */
footer { border-top: 1px solid var(--line); margin-top: 56px; padding-top: 26px; padding-bottom: 40px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: 13.5px; color: var(--ink-3); }
footer a { color: var(--ink-2); text-decoration: none; }
footer .foot-name { font-weight: 700; color: var(--ink); }
body.is-focused footer, body.is-focused .brand, body.is-focused .top { display: none; }

/* ── 付費牆 ───────────────────────────────── */
.paywall { background: var(--surface); border: 2px solid var(--accent); border-radius: var(--r-lg); padding: 24px 22px; box-shadow: var(--sh-2); }
.paywall-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.paywall-title { font-size: 21px; font-weight: 700; }
.paywall-price { font-size: 34px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.paywall-price span { font-size: 17px; margin-right: 2px; }
.paywall-soon { font-size: 13px; font-weight: 700; color: var(--accent); background: var(--accent-weak);
  padding: 5px 12px; border-radius: var(--r-full); white-space: nowrap; }
.paywall-lead { margin-top: 10px; color: var(--ink-2); font-size: 15px; }
.paywall-items { margin: 18px 0 20px; display: flex; flex-direction: column; gap: 14px; }
.pw-item { display: flex; gap: 12px; }
.pw-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-weak); color: var(--accent); display: grid; place-items: center; }
.pw-ic svg { width: 18px; height: 18px; }
.pw-item b { font-size: 15px; display: block; }
.pw-item p { font-size: 13.5px; color: var(--ink-2); margin-top: 3px; line-height: 1.6; }
.paywall-note { margin-top: 11px; font-size: 12.5px; color: var(--ink-3); text-align: center; }

/* ── 付費版的內容 ─────────────────────────── */
.deep-p { color: var(--ink-2); font-size: 15.5px; margin-top: 14px; }
.deep-p:first-child { margin-top: 0; }
.deep-watch { margin-top: 18px; padding: 14px 16px; background: var(--accent-weak); border-radius: var(--r-md); }
.deep-watch b { display: block; font-size: 12.5px; color: var(--accent-deep); margin-bottom: 4px; }
.deep-watch p { font-size: 14.5px; color: var(--ink-2); line-height: 1.7; }

.clash { padding: 16px 0; border-top: 1px solid var(--line); }
.clash:first-of-type { border-top: none; }
.clash > b { font-size: 16px; }
.clash > p { margin-top: 10px; font-size: 14.5px; color: var(--ink-2); }

.say { display: flex; gap: 13px; padding: 15px 0; border-top: 1px solid var(--line); }
.say:first-child { border-top: none; padding-top: 0; }
.say-no { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff;
  font-size: 13px; font-weight: 700; display: grid; place-items: center; }
.say-when { font-size: 12.5px; color: var(--ink-3); }
.say-line { margin-top: 7px; font-size: 16.5px; font-weight: 700; line-height: 1.7; }

.step { display: flex; gap: 13px; padding: 14px 0; border-top: 1px solid var(--line); }
.step:first-child { border-top: none; padding-top: 0; }
.step-span { flex: none; width: 74px; font-size: 12.5px; font-weight: 700; color: var(--accent); padding-top: 2px; }
.step b { font-size: 15px; }
.step p { font-size: 13.5px; color: var(--ink-2); margin-top: 4px; }
.quit { margin-top: 16px; padding: 14px 16px; background: var(--warn-weak); border-radius: var(--r-md); }
.quit b { display: block; font-size: 12.5px; color: var(--warn); margin-bottom: 4px; }
.quit p { font-size: 14px; color: var(--ink-2); line-height: 1.7; }

/* ── 心理學概念與書單 ─────────────────────── */
.concept { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: var(--r-md); background: var(--surface); }
.concept-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.concept-head b { font-size: 15.5px; }
.concept-head span { font-size: 12px; color: var(--ink-3); font-style: italic; }
.concept-who { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.concept > p:last-child { font-size: 14px; color: var(--ink-2); line-height: 1.75; margin-top: 9px; }
.concept-note { margin-top: 12px; font-size: 12.5px; color: var(--ink-3); }

.book { padding: 14px 0; border-top: 1px solid var(--line); }
.book:first-child { border-top: none; padding-top: 0; }
.book b { font-size: 15.5px; }
.book span { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.book p { font-size: 14px; color: var(--ink-2); margin-top: 6px; }

/* ── 大家的結果 ───────────────────────────── */
.stats-head { text-align: center; }
.stats-num { font-size: 52px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--accent); }
.stats-label { color: var(--ink-2); margin-top: 4px; }
.stats-thin { margin-top: 10px; font-size: 13px; color: var(--ink-3); }
.stats-foot { margin-top: 14px; font-size: 14px; color: var(--ink-2); }
.stats-foot b { color: var(--ink); }

.bars { display: flex; align-items: flex-end; gap: 5px; height: 150px; }
.bars .bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.bars i { display: block; width: 100%; background: var(--accent-weak); border-radius: 5px 5px 0 0; }
.bars .is-mine i { background: var(--accent); }
.bars span { font-size: 10.5px; color: var(--ink-3); margin-top: 5px; }
.bars .is-mine span { color: var(--accent-deep); font-weight: 700; }

.vrow { display: flex; gap: 11px; align-items: center; padding: 8px 0; }
.vrow-art { flex: none; }
.vrow-art svg { width: 40px; height: 40px; }
.vrow-body { flex: 1; min-width: 0; }
.vrow-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
.vrow-top span { color: var(--ink-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.vrow-bar { height: 8px; background: var(--line); border-radius: var(--r-full); margin-top: 5px; overflow: hidden; }
.vrow-bar i { display: block; height: 100%; background: var(--accent-weak); border-radius: var(--r-full); }
.vrow.is-mine .vrow-bar i { background: var(--accent); }
.vrow.is-mine .vrow-top b { color: var(--accent-deep); }

/* ── 圖鑑 ─────────────────────────────────── */
.gallery-head { padding-top: 40px; padding-bottom: 8px; text-align: center; }
.gallery-head h1 { font-size: clamp(28px, 7.4vw, 38px); }
.gallery-head p { margin-top: 12px; color: var(--ink-2); font-size: 15.5px; }
.gallery-head .btn { margin-top: 22px; }
.gallery-note { color: var(--ink-2); font-size: 14.5px; margin-bottom: 4px; }

/* 第一層（結果）用整張場景，第二層（人格）用圓形人物。
   兩層的圖如果長一樣，使用者會以為是同一組東西。 */
.scard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.scard-art { line-height: 0; }
.scard-art svg { display: block; width: 100%; height: auto; }
.scard-body { padding: 18px; }
.scard-body h2 { font-size: 20px; margin-top: 4px; }
.gallery { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.tcard { display: flex; gap: 14px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; }
/* 站姿人物是 120×108 的長方形，不是正方形。寫死 height 會把腳壓扁。 */
.tcard-art { flex: none; display: grid; place-items: end center; width: 76px; }
.tcard-art svg { width: 76px; height: auto; }

/* 背景 ＋ 人物 ＝ 最終圖。這一排要一眼看懂是「加起來」，所以三格等寬、
   運算子單獨佔一格，手機上改成直的（+ 和 = 還是留著，不然變成三張無關的圖）。 */
.combo-demo { padding: 18px; }
.combo-row { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: center; }
.combo-cell { margin: 0; }
.combo-cell svg { display: block; width: 100%; height: auto; border-radius: var(--r-md); }
.combo-cell figcaption { margin-top: 8px; font-size: 12.5px; color: var(--ink-3, var(--ink-2)); line-height: 1.5; }
.combo-cell figcaption b { display: block; font-size: 13.5px; color: var(--ink); }
.combo-fig { display: grid; place-items: center; padding: 10px 0;
  background: var(--accent-weak); border-radius: var(--r-md); }
.combo-cell-fig svg { width: 128px; border-radius: 0; }
.combo-cell-out svg { box-shadow: 0 0 0 2px var(--accent); }
.combo-op { justify-self: center; font-size: 19px; font-weight: 700; color: var(--accent); line-height: 1; }
.tcard-no { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--accent); }
.tcard h2 { font-size: 19px; margin-top: 4px; }
.tcard-lead { color: var(--ink-2); font-size: 14.5px; margin-top: 6px; }
.tcard-when { margin-top: 10px; padding: 10px 12px; background: var(--accent-weak); border-radius: var(--r-sm); font-size: 13.5px; color: var(--ink-2); line-height: 1.65; }
.tcard-when b { display: block; color: var(--accent-deep); font-size: 12.5px; margin-bottom: 2px; }
.tcard-quote { margin-top: 10px; font-size: 14.5px; font-weight: 700; color: var(--ink); }

.doc { padding-top: 40px; padding-bottom: 20px; }
.doc h1 { font-size: 30px; }
.doc h2 { font-size: 19px; margin-top: 32px; }
.doc p, .doc li { color: var(--ink-2); font-size: 15.5px; margin-top: 10px; }
.doc ul { padding-left: 20px; }
.doc .updated { color: var(--ink-3); font-size: 13.5px; margin-top: 8px; }
.back-link { display: inline-block; color: var(--ink-2); text-decoration: none; font-size: 14.5px; margin-top: 30px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (min-width: 640px) {
  .rp-actions, .share-actions { flex-direction: row; }
  .rp-actions .btn, .share-actions .btn { flex: 1; }
  .type-strip { grid-template-columns: repeat(6, 1fr); }
  .scene-strip { grid-template-columns: repeat(3, 1fr); }
  .scene-strip .scene-chip:nth-child(3) { grid-column: auto; }
  .soul-row { grid-template-columns: repeat(6, 1fr); }
  .persona-two { flex-direction: row; }
  .persona-two > div { flex: 1; }
  .persona-art svg { width: 108px; height: 108px; }
  .tcard-art { width: 96px; }
  .tcard-art svg { width: 96px; height: auto; }
  .combo-row { grid-template-columns: 1fr auto 1fr auto 1fr; gap: 14px; }
  .mini-grid { flex-direction: row; }
  .mini { flex: 1; grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .mini-ic { grid-row: auto; }
}

/* hover 一律關在這裡：手機點完選項會自動跳下一題，
   新按鈕渲染在同一個位置時會繼承黏住的 :hover，看起來像上一題的答案還亮著。 */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--accent-deep); }
  .btn-ghost:hover { background: #fff; color: var(--ink); border-color: var(--ink-3); }
  .chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-weak); }
  .opt:hover { border-color: var(--accent); background: var(--accent-weak); }
  .resume:hover { border-color: var(--accent); }
  .type-chip:hover { border-color: var(--accent); background: var(--accent-weak); }
  .q-back:hover { color: var(--ink); }
  footer a:hover { color: var(--accent); text-decoration: underline; }
  .back-link:hover { color: var(--accent); }
}