/* ==========================================================================
   Love Languages — intro, statement quiz and ranked results.
   Builds on ../assets/core.css.
   ========================================================================== */

.page-love {
  --accent: #ff7aa2;
  --accent-2: #ffa36b;
}

.love { padding-block: clamp(18px, 4vw, 40px) 0; }

/* Colored icon orb, one per love language (--c set inline). */
.orb {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 50%;
  color: #1b0d14;
  background: radial-gradient(circle at 32% 26%, #fff 0, var(--c) 46%, color-mix(in oklab, var(--c) 55%, #000));
  box-shadow: 0 14px 30px -12px var(--c);
}
.orb .icon { width: 44%; height: 44%; }

/* ---------- Intro ---------- */
.view--intro {
  justify-items: center;
  text-align: center;
  gap: 18px;
  padding-top: 10px;
}
.view--intro .lede { margin-inline: auto; }
.view--intro .eyebrow .icon { width: 14px; height: 14px; color: var(--accent); }
.view--intro .display { font-size: clamp(40px, 10.5vw, 88px); }
.orbit {
  position: relative;
  width: min(100%, 360px);
  height: 130px;
  margin-bottom: 6px;
}
.orbit .orb {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  animation: orb-in 0.9s var(--spring) both, bob 6s var(--ease-in-out) infinite;
}
.orbit .orb:nth-child(1) { transform: translate(-132px, 22px); animation-delay: 0.05s, -1s; }
.orbit .orb:nth-child(2) { transform: translate(-66px, -12px); animation-delay: 0.12s, -2.2s; }
.orbit .orb:nth-child(3) { transform: translate(0, -30px) scale(1.18); animation-delay: 0.19s, -3.1s; }
.orbit .orb:nth-child(4) { transform: translate(66px, -12px); animation-delay: 0.26s, -4s; }
.orbit .orb:nth-child(5) { transform: translate(132px, 22px); animation-delay: 0.33s, -5s; }
@keyframes orb-in { from { opacity: 0; scale: 0.4; } }
@keyframes bob { 50% { translate: -50% calc(-50% - 8px); } }
.start { min-width: 220px; margin-top: 6px; }
.meta-line { font-size: 14px; font-weight: 650; margin-top: -6px; }
.resume .orb { width: 30px; height: 30px; box-shadow: none; }

/* ---------- Quiz ---------- */
.view--quiz {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 640px;
  width: 100%;
  min-height: calc(100svh - 100px);
  margin-inline: auto;
}
.view--quiz[hidden] { display: none; }
.quiz-bar { display: flex; align-items: center; gap: 14px; }
#quizBack:disabled { opacity: 0.35; }
.ticks {
  flex: 1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 3px;
}
.ticks i {
  height: 6px;
  border-radius: 9px;
  background: rgb(255 255 255 / 0.1);
  transition: background-color 0.4s, transform 0.4s var(--spring);
}
.ticks i.is-done { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.ticks i.is-current { background: var(--text-2); transform: scaleY(1.5); }
.quiz-count { min-width: 50px; text-align: right; color: var(--text-3); font-weight: 750; font-variant-numeric: tabular-nums; }

.statement-wrap { display: grid; gap: 16px; }
.statement-wrap.is-out { animation: st-out 0.2s var(--ease-in-out) forwards; }
.statement-wrap.is-in { animation: st-in 0.5s var(--ease-out); }
.statement-wrap.is-back { --dir: -1; }
@keyframes st-out { to { opacity: 0; transform: translateX(calc(-26px * var(--dir, 1))); } }
@keyframes st-in { from { opacity: 0; transform: translateX(calc(32px * var(--dir, 1))); } }
.statement {
  font-family: var(--font-display);
  font-size: clamp(27px, 7.4vw, 42px);
  font-weight: 460;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
  min-height: 2.3em;
}
.statement::before { content: "“"; color: var(--accent); margin-right: 0.04em; }
.statement::after { content: "”"; color: var(--accent); margin-left: 0.02em; }

.scale { display: grid; gap: 10px; }
.scale button {
  --w: 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 0 18px;
  border-radius: 18px;
  border: 1px solid var(--line-strong);
  background: rgb(255 255 255 / 0.035);
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.35s var(--spring), border-color 0.2s, background-color 0.2s, box-shadow 0.3s;
}
.scale button:hover { border-color: color-mix(in oklab, var(--accent) 60%, transparent); background: rgb(255 255 255 / 0.07); }
.scale button:active { transform: scale(0.98); }
.scale__dots { display: flex; gap: 4px; width: 56px; flex: none; }
.scale__dots i { width: 8px; height: 8px; border-radius: 50%; background: rgb(255 255 255 / 0.14); }
.scale__dots i.on { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.scale__key {
  margin-left: auto;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 800;
}
.scale button.is-picked {
  border-color: transparent;
  background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 30%, transparent), color-mix(in oklab, var(--accent-2) 18%, transparent));
  box-shadow: 0 0 0 2px var(--accent), 0 16px 34px -18px var(--accent);
}

.meterbar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: auto;
  padding: 14px 14px 12px;
  border-radius: 22px;
}
.bar {
  display: grid;
  justify-items: center;
  gap: 8px;
}
.bar__track {
  position: relative;
  width: 100%;
  max-width: 38px;
  height: 64px;
  border-radius: 12px;
  background: rgb(255 255 255 / 0.06);
  overflow: hidden;
}
.bar__track i {
  position: absolute;
  inset: auto 0 0 0;
  height: calc(var(--v, 0) * 100%);
  border-radius: 12px 12px 0 0;
  background: linear-gradient(0deg, color-mix(in oklab, var(--c) 70%, #000), var(--c));
  box-shadow: 0 0 18px -2px var(--c);
  transition: height 0.6s var(--spring);
}
.bar .orb { width: 30px; height: 30px; box-shadow: none; }

/* ---------- Result ---------- */
.view--result { gap: 22px; }
.hero-result {
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
  padding-top: 8px;
}
.hero-result .lede { margin-inline: auto; }
.hero-result .eyebrow { color: var(--c); }
.hero-result .display {
  font-size: clamp(42px, 11vw, 96px);
  background: linear-gradient(180deg, #fff, color-mix(in oklab, var(--c) 70%, #fff));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.06em;
}
.hero-orb {
  position: relative;
  width: 112px;
  height: 112px;
  margin-bottom: 6px;
  animation: hero-orb-in 1s var(--spring) both;
}
.hero-orb .orb { width: 100%; height: 100%; box-shadow: 0 24px 60px -16px var(--c); }
.hero-orb::before {
  content: "";
  position: absolute;
  inset: -60%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--c) 45%, transparent), transparent);
}
@keyframes hero-orb-in { from { opacity: 0; transform: scale(0.4) rotate(-30deg); } }

.result-grid { display: grid; gap: 16px; }
.panel { display: grid; gap: 16px; align-content: start; padding: 24px 20px; }
.tips { display: grid; gap: 12px; }
.tips li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--text-2);
}
.tips li::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 10px var(--c);
}
.hurts {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px dashed var(--line-strong);
  color: var(--text-3);
  font-size: 14px;
}
.hurts strong { color: var(--text-2); }
.tips li,
.hurts { text-wrap: pretty; }

.ranking { display: grid; gap: 14px; }
.rank {
  display: grid;
  grid-template-columns: 22px 40px 1fr;
  align-items: center;
  gap: 12px;
  animation: view-in 0.6s var(--ease-out) both;
}
.rank__n { font-family: var(--font-display); font-style: italic; font-size: 20px; color: var(--text-3); }
.rank .orb { width: 40px; height: 40px; box-shadow: none; }
.rank__body { display: grid; gap: 7px; }
.rank__top { display: flex; justify-content: space-between; gap: 10px; font-weight: 750; font-size: 15px; }
.rank__top span:last-child { color: var(--text-2); font-variant-numeric: tabular-nums; }
.rank .meter { height: 7px; }
.rank .meter i { background: linear-gradient(90deg, color-mix(in oklab, var(--c) 65%, #fff), var(--c)); transition-duration: 1s; }

.share-note {
  color: var(--text-2);
  text-align: center;
  font-size: 15px;
  text-wrap: balance;
}
.share-note [data-icon] { display: inline; margin-right: 8px; }
.share-note .icon { display: inline; width: 16px; height: 16px; vertical-align: -3px; color: var(--accent); }

@media (min-width: 860px) {
  .result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result-actions { justify-content: center; }
}

/* ---------- 中文 ---------- */
/* Chinese prose breaks only between words (DCG.setWords() marks the breaks with <wbr>). */
:lang(zh) .phrases {
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
:lang(zh) .view--intro .display .phrase { display: inline-block; }
:lang(zh) .statement {
  text-wrap: balance;
  font-size: clamp(22px, 6vw, 36px);
  line-height: 1.42;
  letter-spacing: 0.02em;
  min-height: 2.84em;
}
/* 「」 instead of “ ”; the opening bracket's blank half is pulled back so it lines up like “ does. */
:lang(zh) .statement::before { content: "「"; margin: 0 0 0 -0.5em; }
:lang(zh) .statement::after { content: "」"; margin: 0; }
:lang(zh) .scale button { letter-spacing: 0.04em; }
:lang(zh) .view--intro .lede,
:lang(zh) .hero-result .lede,
:lang(zh) .hero-result .eyebrow { text-wrap: balance; }
:lang(zh) .tips li,
:lang(zh) .hurts { line-height: 1.7; }