/* ================= 第一幕 人生星河 ================= */
.lf-stage { text-align: center; }
.lf-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.lf-head { position: absolute; top: calc(7% + var(--st)); left: 0; right: 0; z-index: 3; }
.lf-date { position: absolute; top: calc(7% + var(--st)); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; opacity: 0; z-index: 3; pointer-events: none; }
.lf-ymd { font-size: clamp(38px, 11vw, 60px); color: #fff2c4; letter-spacing: .04em; line-height: 1.1;
  text-shadow: 2.4px 0 var(--ink), -2.4px 0 var(--ink), 0 2.4px var(--ink), 0 -2.4px var(--ink), 1.7px 1.7px var(--ink), -1.7px -1.7px var(--ink), 1.7px -1.7px var(--ink), -1.7px 1.7px var(--ink), 0 5px 0 rgba(20, 10, 60, .45); }
.lf-meta { font-family: var(--f-cute); font-size: 15px; color: var(--pink3); background: rgba(20, 14, 70, .45); padding: 2px 14px; border-radius: 99px; }
.lf-cap { position: absolute; left: 20px; right: 20px; bottom: calc(max(13%, 104px) + var(--sb)); z-index: 3; opacity: 0; font-size: clamp(16px, 4.6vw, 21px); line-height: 1.8; pointer-events: none; }
.lf-intro { bottom: calc(max(14%, 110px) + var(--sb)); }
.lf-birth { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lf-bdate { font-size: 15px; color: var(--gold); background: rgba(20, 14, 70, .5); padding: 3px 14px; border-radius: 99px; border: 1.5px solid rgba(255, 211, 107, .5); margin-bottom: 4px; }
.lf-moonline { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: .9em; color: var(--txt2); }
.lf-moon { width: 32px; height: 32px; flex: none; }
.lf-sum { bottom: calc(max(11%, 96px) + var(--sb)); }
.lf-sum p { opacity: 0; }
.lf-sum b { font-weight: 600; color: #fff2c4; font-size: 1.15em; }
.lf-sum b.pinkb { color: var(--pink); }

/* milestone tag: a little paper label right outside its star */
.lf-tag { position: absolute; left: 0; top: 0; z-index: 4; display: flex; align-items: center; gap: 8px; padding: 6px 13px 7px; max-width: min(232px, calc(100vw - 24px));
  border-radius: 14px; background: rgba(255, 246, 232, .96); color: var(--ink); border: 2.5px solid var(--ink); box-shadow: 0 3px 0 rgba(42, 26, 18, .35), 0 8px 22px rgba(10, 6, 40, .35);
  opacity: 0; transition: opacity .3s; pointer-events: none; text-align: left; }
.lf-tag.on { opacity: 1; animation: tagpop .5s var(--ease-pop); }
@keyframes tagpop { 0% { scale: .7; } 100% { scale: 1; } }
.lf-tag.has-ph { padding-left: 6px; }
.lt-ph { flex: none; width: 44px; height: 52px; padding: 3px 3px 8px; background: #fff; border: 2px solid var(--ink); border-radius: 3px; transform: rotate(-4deg); box-shadow: 0 2px 0 rgba(42, 26, 18, .25); }
.lt-ph img { width: 100%; height: 100%; object-fit: cover; border-radius: 1px; }
.lt-tx { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.lt-tx b { font-size: 12px; font-weight: 600; color: var(--rose); letter-spacing: .02em; }
.lt-tx span { font-size: 16.5px; white-space: nowrap; }
.lt-tx em { font-style: normal; font-size: 12.5px; color: var(--ink2); line-height: 1.35; word-break: keep-all; overflow-wrap: anywhere; }
.lf-tag.t-together, .lf-tag.t-meet, .lf-tag.t-today { background: #fff3cf; }
.lf-tag.t-together .lt-tx b, .lf-tag.t-meet .lt-tx b, .lf-tag.t-today .lt-tx b { color: #c98a10; }
.lf-tag.t-apart { background: #e7e4f6; }
.lf-tag.t-apart .lt-tx b { color: #6f6aa0; }

.lf-today { position: absolute; left: 0; top: 0; z-index: 3; font-size: 13px; color: var(--ink); background: var(--gold3); border: 2px solid var(--ink); border-radius: 99px; padding: 0 10px; white-space: nowrap; opacity: 0; transition: opacity .5s; pointer-events: none; box-shadow: 0 2px 0 rgba(42, 26, 18, .35); }
.lf-today.on { opacity: 1; }

/* ================= 计时卡片 ================= */
#ch-counters { padding: calc(var(--vh) * 10) 0 calc(var(--vh) * 6); }
.ct-wrap { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.ct-title { font-size: clamp(22px, 6.2vw, 32px); color: #fff2c4; text-align: center; }
.ct-grid { width: 100%; display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 760px) { .ct-grid { grid-template-columns: 1fr 1fr; } .ct-wrap { width: min(100% - 40px, 820px); } }
.ct-card { padding: 14px 18px 14px; }
.ct-card:nth-child(2) { transform: rotate(.6deg); } .ct-card:nth-child(3) { transform: rotate(-.5deg); }
.ct-top { display: flex; align-items: center; gap: 8px; }
.ct-ic { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--pink3); border: 2px solid var(--ink); font-size: 14px; }
.ct-card[data-k='together'] .ct-ic { background: var(--pink); color: #c2185b; animation: ld-beat 1.2s ease-in-out infinite; }
.ct-label { font-size: 16px; flex: 1; }
.ct-since { font-size: 12px; color: var(--ink2); font-weight: 500; }
.ct-days { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
.ct-days b { font-size: clamp(42px, 12vw, 56px); line-height: 1; color: var(--rose); letter-spacing: .01em; }
.ct-card[data-k='together'] .ct-days b { color: #e2456f; }
.ct-days em { font-style: normal; font-size: 18px; }
.ct-hms { display: flex; align-items: baseline; gap: 3px; font-size: 20px; color: var(--ink); margin-top: 2px; }
.ct-hms span { display: inline-block; min-width: 1.35em; text-align: center; background: rgba(255, 158, 196, .22); border-radius: 6px; }
.ct-hms i { font-style: normal; font-family: var(--f-cute); font-size: 13px; color: var(--ink2); margin-right: 5px; }
.ct-hms .s.tick { animation: sec-tick .4s ease-out; }
@keyframes sec-tick { 0% { transform: translateY(-40%); opacity: .2; } 100% { transform: none; opacity: 1; } }
.ct-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ct-facts span { font-family: var(--f-cute); font-size: 13.5px; color: var(--ink); background: var(--gold3); border: 2px solid var(--ink); border-radius: 99px; padding: 3px 12px; box-shadow: 0 2px 0 rgba(42, 26, 18, .35); }