.need-letter { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.need-letter div { display: flex; align-items: center; gap: .6rem; }
.need-letter b { width: 84px; height: 84px; display: grid; place-items: center; border-radius: 24px; background: var(--primary); color: var(--on-primary); font-size: 3rem; font-weight: 900; box-shadow: 0 10px 30px rgb(var(--primary-rgb) / .35); animation: pop .35s var(--ease); }
.need-letter small { color: var(--text-mute); font-weight: 800; }
.chain { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .45rem; margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px dashed var(--line-soft); }
.chain .link { display: inline-flex; flex-direction: column; align-items: center; padding: .4rem .75rem; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-soft); }
.chain .link b { font-size: 1.05rem; }
.chain .link small { font-size: .7rem; color: var(--text-mute); }
.chain .link.last { border-color: var(--primary); background: var(--tint); animation: pop .35s var(--ease); }
.ch-arrow { font-style: normal; color: var(--text-mute); }
.hearts { display: inline-flex; gap: 2px; }
.hearts i { width: 16px; height: 16px; color: var(--surface-3); }
.hearts i.on { color: #ef4444; }
.hearts svg { width: 100%; height: 100%; display: block; }