

/* Hold every text/effect row at the same baseline, even when copy wraps. */
.growth-card-copy { display:grid; grid-template-rows:auto auto auto; row-gap:6px; }
.growth-card-copy>strong { display:flex; align-items:flex-end; height:2.4em; margin:0; line-height:1.2; font-size:clamp(16px,1.4vw,20px); }
.growth-card-description { height:3em; min-height:0; line-height:1.5; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.growth-card .card-effects { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:27px 26px; gap:5px; margin:0; justify-items:start; }
.growth-card .card-effect { font-size:11px; padding:5px 7px; }
.growth-card .stat-gains { display:flex; flex-wrap:nowrap; gap:8px; padding:4px 7px; font-size:11px; }
.growth-result.action-revealed .charm-reward .stat-gains b { animation-delay:300ms; }

/* The reveal's glass heart is reused for both failure surfaces. */
.glass-heart { display:block; width:100%; height:100%; overflow:visible; }
.glass-heart.is-broken { filter:grayscale(1) drop-shadow(0 6px 10px #0002); }
.glass-heart.is-broken .heart-liquid { transform:none; }
.glass-heart.is-broken .heart-whole { display:none; }
.glass-heart.is-broken .heart-half { opacity:1; }
.glass-heart.is-broken .heart-left { transform:translate(-10px,5px) rotate(-8deg); }
.glass-heart.is-broken .heart-right { transform:translate(10px,5px) rotate(8deg); }
.result-broken-heart { align-self:center; width:148px; height:142px; margin:0 auto 6px; }
.result-broken-heart .heart-left { animation:glass-left-settle 800ms ease-out both; }
.result-broken-heart .heart-right { animation:glass-right-settle 800ms ease-out both; }

/* A calendar chapter opening: arrival, deliberate page turn, then a new week. */
.week-opening { isolation:isolate; overflow:hidden; gap:24px; background:radial-gradient(ellipse at 50% 48%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 62%),var(--bg); }
.week-opening-kicker { font:11px Georgia,serif; letter-spacing:6px; color:var(--accent); }
.week-opening-calendar { width:228px; height:248px; transform:rotate(-5deg); }
.week-opening.is-playing .week-opening-calendar { animation:calendar-present 2500ms cubic-bezier(.2,.65,.3,1) both; }
.week-opening .calendar-sheet { background:linear-gradient(135deg,#fffdf8,#fff0e8); border-top-color:#e995a4; box-shadow:0 4px 0 #dfc8c8,0 8px 0 #f7eee5,0 22px 40px #0002; }
.week-opening .calendar-new::after { content:'♡'; position:absolute; right:16px; bottom:14px; color:#e995a4; font-size:25px; transform:rotate(-12deg); }
.week-opening.is-playing .calendar-turn { animation:calendar-turn 1650ms 600ms cubic-bezier(.42,0,.22,1) both; }
.week-opening.is-playing .calendar-new { animation:calendar-arrive 1500ms 700ms ease-out both; }
.week-opening.is-playing .calendar-new strong { animation:calendar-number 650ms 1800ms ease-out both; }
.week-opening>p { display:flex; flex-direction:column; gap:9px; align-items:center; text-align:center; }
.week-opening>p strong { color:var(--ink); font-size:24px; letter-spacing:-.5px; }
.week-opening>p span { color:var(--muted); font-size:14px; }
.week-opening.is-playing>p { animation:result-item-in 650ms 1650ms ease-out both; }
.week-opening.is-playing .week-opening-kicker { animation:result-item-in 600ms 100ms ease-out both; }
.week-opening-orbit { position:absolute; z-index:-1; width:min(520px,82vw); aspect-ratio:1; border:1px solid color-mix(in srgb,var(--accent) 18%,transparent); border-radius:50%; box-shadow:0 0 0 40px color-mix(in srgb,var(--accent) 3%,transparent),0 0 0 80px color-mix(in srgb,var(--accent) 2%,transparent); }
.week-opening.is-playing .week-opening-orbit { animation:chapter-orbit 2600ms ease-out both; }
.week-opening-sparks { position:absolute; inset:0; pointer-events:none; }
.week-opening-sparks i { position:absolute; left:50%; top:48%; color:var(--accent); opacity:0; transform:rotate(calc(var(--spark)*45deg)) translateY(-185px); }
.week-opening-sparks .icon { width:16px; height:16px; }
.week-opening.is-playing .week-opening-sparks i { animation:chapter-spark 1100ms ease-out both; animation-delay:calc(1550ms + var(--spark)*35ms); }

/* Keep the weekly recap on the same page surface as the other steps. */
.week-finale .week-cover { border:0; border-radius:0; background:none; padding:8px 0 0; }
.week-cover-header { padding-right:28px; min-height:160px; }
.week-calendar-advance { transform:rotate(-6deg); margin:16px 22px 20px; transition:transform 350ms cubic-bezier(.2,.65,.3,1),box-shadow 350ms; }
.week-calendar-advance:is(:hover,:focus-visible) { transform:rotate(0deg) translateY(-3px); }
.week-calendar-advance:active { transform:rotate(0deg) translateY(1px); }
.week-growth-list .stat-gains>span { display:inline-flex; align-items:center; gap:5px; }
.week-growth-list .stat-gains .icon { width:15px; height:15px; flex-shrink:0; }

@keyframes result-item-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes portrait-arrive { from { opacity:0; transform:scale(1.035); } to { opacity:1; transform:scale(1); } }
@keyframes portrait-light { from { transform:translateX(-70%); } to { transform:translateX(70%); } }
@keyframes glass-left-settle { from { opacity:0; transform:translate(-4px,-3px) rotate(-2deg); } to { opacity:1; transform:translate(-10px,5px) rotate(-8deg); } }
@keyframes glass-right-settle { from { opacity:0; transform:translate(4px,-3px) rotate(2deg); } to { opacity:1; transform:translate(10px,5px) rotate(8deg); } }
@keyframes calendar-present { 0% { opacity:0; transform:translateY(18px) rotate(-9deg) scale(.94); } 22%,60% { opacity:1; transform:translateY(0) rotate(-5deg) scale(1); } 100% { opacity:1; transform:rotate(0deg) scale(1); } }
@keyframes calendar-turn { 0%,12% { transform:rotateX(0); opacity:1; } 65% { opacity:1; } 100% { transform:rotateX(-160deg) translateY(-12px); opacity:0; } }
@keyframes calendar-number { 0% { color:#d17e87; text-shadow:0 0 0 transparent; } 45% { color:#eb8b9c; text-shadow:0 0 25px #ee9aab77; } 100% { color:#d17e87; text-shadow:none; } }
@keyframes chapter-orbit { from { opacity:0; transform:scale(.8); } 65% { opacity:1; } to { opacity:.6; transform:scale(1.05); } }
@keyframes chapter-spark { 0% { opacity:0; transform:rotate(calc(var(--spark)*45deg)) translateY(-160px) scale(.4); } 35% { opacity:.8; } 100% { opacity:0; transform:rotate(calc(var(--spark)*45deg)) translateY(-245px) scale(1.1); } }
@media(max-width:600px) {
 .growth-card .stat-gains { font-size:10px; gap:6px; padding:4px 6px; }
 .growth-card-copy>strong { font-size:16px; }
 .week-cover-header { padding-right:0; min-height:180px; }
 .week-calendar-advance { margin:18px 12px; }
 .week-cover-copy>h2 { font-size:23px; }
 .result-broken-heart { width:120px; height:115px; }
 .week-opening-calendar { width:204px; height:224px; }
 .week-opening { gap:22px; }
}
@media(max-height:600px) {
 .week-opening { gap:16px; }
 .week-opening-calendar { width:180px; height:196px; }
 .week-opening .calendar-sheet strong { font-size:72px; }
 .week-opening>p strong { font-size:21px; }
 .result-broken-heart { width:100px; height:96px; }
}
