/* Cinematic companions; palette remains in app.css. */
.pet-art{display:inline-block;position:relative;width:120px;height:120px;vertical-align:middle;isolation:isolate}
.pet-art>.pet-body{display:block;position:absolute;inset:0;transform-origin:50% 86%;animation:buddy-breathe 4.7s ease-in-out infinite;animation-delay:var(--motion-phase,0s)}
.character-sprite{position:absolute;inset:0;display:block;background-image:url('assets/jik-family-v2.png');background-size:200% 200%;background-repeat:no-repeat;filter:drop-shadow(0 5px 4px color-mix(in srgb,var(--scene-shadow) 14%,transparent));}
.pet-egg .character-sprite{background-size:200% 221.56%;background-position:0 0;inset:4%}.pet-chick .character-sprite{background-size:200% 230.09%;background-position:100% 0;inset:5%}.pet-young .character-sprite{background-size:200% 182.27%;background-position:0 100%;inset:3%}.pet-hen .character-sprite{background-size:200% 177.09%;background-position:100% 100%;inset:3%}
.pet-art.mood-excited>.pet-body{animation:buddy-hop 2.8s ease-in-out infinite;animation-delay:var(--motion-phase,0s)}.pet-art.mood-hungry>.pet-body{animation:buddy-peck 4s ease-in-out infinite;animation-delay:var(--motion-phase,0s)}.pet-art.mood-sleeping>.pet-body{animation:buddy-sleep 6s ease-in-out infinite;animation-delay:var(--motion-phase,0s)}
.buddy-spark{position:absolute;right:5%;top:12%;color:var(--status-doing);font-size:23px;animation:star-twinkle 3s ease-in-out infinite}.buddy-sleep{position:absolute;right:0;top:10%;font:500 17px var(--font-display);color:var(--brand-strong)}
.pet-open .pet-art{width:148px;height:136px;margin:-3px 0 -8px}.pet-panel{background:radial-gradient(ellipse at 50% 45%,var(--nav-active-bg),var(--nav-bg));border-radius:22px;box-shadow:inset 0 1px color-mix(in srgb,var(--brand-soft) 15%,transparent)}
.pet-profile .pet-art{width:205px;height:190px}.coop-grid .pet-art{width:135px;height:135px}.is-pecking .pet-art>.pet-body{animation:buddy-peck .65s ease-in-out}
.coop-scene{display:grid;grid-template-columns:1.15fr 1fr;min-height:232px;margin:0 0 28px;position:relative;border-radius:26px;background:linear-gradient(115deg,var(--brand-soft),var(--scene-peach) 66%,var(--scene-lilac));border:1px solid color-mix(in srgb,var(--brand) 16%,var(--surface-card));box-shadow:0 14px 36px color-mix(in srgb,var(--scene-shadow) 7%,transparent),inset 0 2px color-mix(in srgb,var(--surface-card) 80%,transparent);overflow:hidden}
.scene-copy{padding:28px 10px 26px 30px;position:relative;z-index:2}.scene-kicker{display:flex;align-items:center;gap:7px;font:800 9px var(--font-body);letter-spacing:1.4px;color:var(--brand-strong)}.scene-kicker i{width:7px;height:7px;background:var(--brand);border-radius:50%;box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 12%,transparent)}
.scene-copy h2{font-size:clamp(23px,2.4vw,33px);margin:12px 0 8px;letter-spacing:-.7px;color:var(--text-strong)}.scene-copy h2>span{display:inline-block;color:var(--brand);transform:rotate(12deg);padding-left:5px}.scene-copy p{font-size:12px;color:var(--text-body)}
.scene-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:19px}.scene-chips>span{font-size:11px;padding:7px 11px;border:1px solid color-mix(in srgb,var(--surface-card) 75%,transparent);background:color-mix(in srgb,var(--surface-card) 58%,transparent);border-radius:100px;box-shadow:0 4px 10px color-mix(in srgb,var(--scene-shadow) 4%,transparent)}.scene-chips b{font-size:15px;color:var(--brand-strong);margin-right:4px}
.scene-stage{position:relative;min-height:230px;align-self:stretch}.scene-orb{width:200px;height:200px;position:absolute;top:8px;left:21%;border-radius:50%;background:radial-gradient(circle at 35% 25%,var(--surface-card),var(--scene-lilac));opacity:.8}.scene-ring{position:absolute;top:24px;left:9%;width:290px;height:175px;border:1px solid color-mix(in srgb,var(--surface-card) 85%,transparent);border-radius:50%;transform:rotate(-27deg)}.scene-ground{position:absolute;left:8%;bottom:-70px;width:93%;height:160px;border-radius:50%;background:linear-gradient(var(--scene-mint),color-mix(in srgb,var(--accent) 55%,var(--scene-mint)));box-shadow:inset 0 3px 2px color-mix(in srgb,var(--surface-card) 60%,transparent)}
.scene-character{position:absolute;display:block}.scene-character .pet-art{width:100%;height:100%}.scene-hen{width:220px;height:220px;left:21%;bottom:4px;transform:rotate(-7deg)}.scene-chick{width:135px;height:135px;right:-2%;bottom:0;transform:rotate(9deg)}.scene-egg{width:92px;height:92px;left:3%;bottom:0;transform:rotate(-12deg)}.scene-star{position:absolute;z-index:2;color:var(--brand-strong);animation:star-twinkle 3.8s ease-in-out infinite}.star-a{font-size:33px;left:9%;top:24px;transform:rotate(10deg)}.star-b{font-size:23px;right:7%;top:25px;animation-delay:-1.8s}.scene-doodle{position:absolute;left:5%;top:94px;font-size:30px;color:var(--brand);transform:rotate(-17deg)}.scene-sticker{position:absolute;right:10%;top:12px;z-index:3;transform:rotate(10deg);background:var(--surface-card);border-radius:8px;padding:6px 13px;font:800 11px var(--font-body);box-shadow:0 4px 0 color-mix(in srgb,var(--brand) 25%,transparent);color:var(--brand-strong)}
.work-card{border-radius:22px;border-color:color-mix(in srgb,var(--status) 19%,var(--surface-card));background:linear-gradient(155deg,color-mix(in srgb,var(--status) 6%,var(--surface-card)),var(--surface-card) 32%);box-shadow:0 5px 0 color-mix(in srgb,var(--status) 8%,transparent),0 12px 30px color-mix(in srgb,var(--scene-shadow) 5%,transparent);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;overflow:visible}
.work-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--status) 45%,var(--surface-card));box-shadow:0 9px 0 color-mix(in srgb,var(--status) 8%,transparent),0 18px 36px color-mix(in srgb,var(--scene-shadow) 10%,transparent)}.work-card-top .work-status{background:color-mix(in srgb,var(--status) 12%,var(--surface-card));padding:4px 8px;border-radius:9px}.work-progress strong{font-weight:800;font-size:24px;letter-spacing:-1px}.work-title{line-height:1.65}.work-card .next-step{border-radius:12px;border-left:3px solid color-mix(in srgb,var(--status) 65%,var(--surface-card));background:color-mix(in srgb,var(--status) 5%,var(--surface-card))}.work-card>.btn{border-radius:12px}.work-card>.btn.primary{box-shadow:0 4px 0 color-mix(in srgb,var(--brand-strong) 28%,transparent)}
.chick-track{height:64px;position:relative;margin:2px 0 12px;--progress:0%;isolation:isolate}.track-rail{position:absolute;bottom:9px;left:0;right:0;height:10px;border-radius:20px;background:var(--surface-sunken);box-shadow:inset 0 2px 3px color-mix(in srgb,var(--scene-shadow) 9%,transparent);overflow:hidden}
.track-fill{display:block;width:var(--progress);height:100%;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--status,var(--brand)) 62%,var(--brand-soft)),var(--status,var(--brand)));box-shadow:inset 0 2px color-mix(in srgb,var(--surface-card) 38%,transparent);position:relative}.track-fill::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(115deg,transparent 0 10px,color-mix(in srgb,var(--surface-card) 22%,transparent) 10px 14px);opacity:.7}
.track-tick{position:absolute;top:2px;width:1px;height:6px;background:color-mix(in srgb,var(--text-muted) 14%,transparent)}.tick-one{left:25%}.tick-two{left:50%}.tick-three{left:75%}
.track-companion{position:absolute;bottom:6px;left:clamp(23px,var(--progress),calc(100% - 23px));width:61px;height:61px;transform:translateX(-50%);z-index:2}.track-companion .pet-art{width:61px;height:61px}.track-companion .pet-body{animation:buddy-breathe 5s ease-in-out infinite;animation-delay:var(--motion-phase)}.track-companion .buddy-spark{font-size:13px;right:0;top:12%}.track-review .track-companion .pet-body{animation:buddy-hop 3.5s ease-in-out infinite;animation-delay:var(--motion-phase)}
.track-finish{position:absolute;right:1px;bottom:23px;color:var(--status,var(--accent));font-size:17px}.track-done .track-finish{right:41px;font-size:23px;animation:star-twinkle 4s ease-in-out infinite}.track-dust{position:absolute;left:clamp(4px,calc(var(--progress) - 42px),calc(100% - 62px));bottom:19px;font-size:13px;color:var(--status,var(--brand));opacity:.65}.track-todo .track-dust{display:none}
.progress-grew .track-companion{animation:buddy-advance .8s cubic-bezier(.22,1,.36,1)}.progress-grew .track-fill{animation:fill-advance .8s cubic-bezier(.22,1,.36,1)}.work-card:hover .track-companion .pet-body{animation:buddy-hop 1.6s ease-in-out infinite}.detail-progress-box .chick-track{margin-top:5px;--status:var(--brand)}
.status-summary{border-radius:17px;box-shadow:0 4px 0 color-mix(in srgb,var(--status,var(--brand)) 7%,transparent);transition:transform .2s ease}.status-summary:hover{transform:translateY(-3px)}.status-summary.active{background:linear-gradient(135deg,var(--brand-soft),var(--surface-card));box-shadow:0 5px 0 color-mix(in srgb,var(--brand) 15%,transparent)}
.donut .donut-number{gap:0}.donut-number .pet-art{width:63px;height:53px;margin:-12px auto -2px}.donut-number strong{font-size:25px!important;line-height:1.1}.donut-number small{font-size:10px}.chart-rider .pet-art{width:48px;height:48px}.trend-chart{overflow:visible}.chart-rider .pet-body{animation:buddy-breathe 4s ease-in-out infinite}.aging-bar{position:relative;border-radius:12px 12px 4px 4px;box-shadow:inset 0 2px 0 color-mix(in srgb,var(--surface-card) 45%,transparent)}.aging-bar>.pet-art{position:absolute;width:44px;height:44px;left:50%;top:-39px;transform:translateX(-50%)}.aging-col>strong{position:relative;z-index:3;margin-bottom:43px}.aging-bars{height:auto;min-height:202px}.person-bar-track{overflow:visible;position:relative}.person-bar-track>span{border-radius:inherit}.person-bar-track .pet-art{width:30px;height:30px;position:absolute;top:-23px;left:clamp(12px,var(--progress),calc(100% - 12px));transform:translateX(-50%)}.person-bar-row{padding-block:17px}
.chick-cheer{position:fixed;right:30px;bottom:30px;z-index:100;display:flex;align-items:center;padding:8px 23px 8px 8px;border:1px solid var(--surface-line);border-radius:100px;background:var(--brand-soft);box-shadow:0 14px 45px color-mix(in srgb,var(--scene-shadow) 18%,transparent);pointer-events:none;animation:cheer-in .4s cubic-bezier(.2,1.7,.4,1)}.chick-cheer>.pet-art{width:74px;height:74px;margin-top:-22px}.chick-cheer>span{font:500 13px var(--font-display);color:var(--brand-strong)}.chick-cheer>i{position:absolute;font-style:normal;color:var(--brand);animation:confetti-up 2s ease-out both}.chick-cheer>i:nth-of-type(1){left:17%;top:0}.chick-cheer>i:nth-of-type(2){left:65%;top:-12px;color:var(--accent);animation-delay:.15s}.chick-cheer>i:nth-of-type(3){right:6%;top:0;color:var(--status-doing);animation-delay:.3s}
.flock-portrait{position:relative;min-height:315px;width:100%;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,var(--nav-active-bg),transparent 65%)}.flock-portrait::after{content:'';position:absolute;bottom:-35px;left:5%;width:90%;height:105px;border-radius:50%;background:linear-gradient(var(--scene-mint),var(--accent));z-index:0}.flock-portrait>.pet-art{position:absolute;z-index:1}.flock-portrait>.pet-hen{width:280px;height:280px;left:calc(50% - 155px);bottom:5px;transform:rotate(-7deg)}.flock-portrait>.pet-chick{width:175px;height:175px;left:calc(50% + 35px);bottom:0;transform:rotate(8deg)}.flock-portrait>.pet-egg{width:115px;height:115px;left:calc(50% - 220px);bottom:0;transform:rotate(-13deg)}.flock-portrait .portrait-star{position:absolute;left:18%;top:20px;font-size:36px;color:var(--nav-active-text);animation:star-twinkle 3s infinite}.flock-portrait .portrait-note{position:absolute;right:12%;top:26px;padding:7px 15px;background:var(--brand-soft);color:var(--brand-strong);font:800 12px var(--font-body);transform:rotate(9deg);border-radius:8px;z-index:3}.growth-stages .pet-art{width:145px;height:145px;display:block;margin:auto}.growth-stages .character-sprite{font-size:inherit}.preview-pet .pet-art{width:120px;height:110px;margin:auto}.about-page .coop-hero{background:linear-gradient(135deg,var(--nav-bg),var(--nav-active-bg));box-shadow:0 20px 55px color-mix(in srgb,var(--scene-shadow) 16%,transparent)}
@keyframes buddy-breathe{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-2px) rotate(1.5deg) scale(1.015)}}@keyframes buddy-hop{0%,55%,100%{transform:translateY(0) rotate(-2deg)}18%{transform:translateY(-9px) rotate(5deg)}32%{transform:translateY(0) scale(1.05,.95)}42%{transform:translateY(-3px) rotate(-3deg)}}@keyframes buddy-peck{0%,55%,100%{transform:rotate(-1deg)}20%,37%{transform:rotate(12deg) translateY(2px)}28%{transform:rotate(2deg)}}@keyframes buddy-sleep{50%{transform:scale(1.04,.96) rotate(-3deg)}}@keyframes star-twinkle{0%,100%{opacity:.45;scale:.85}50%{opacity:1;scale:1.08}}@keyframes buddy-advance{from{left:clamp(23px,var(--previous),calc(100% - 23px))}to{left:clamp(23px,var(--progress),calc(100% - 23px))}}@keyframes fill-advance{from{width:var(--previous)}to{width:var(--progress)}}@keyframes cheer-in{from{opacity:0;transform:translateY(25px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes confetti-up{0%{opacity:0;transform:translateY(10px) rotate(0)}20%{opacity:1}100%{opacity:0;transform:translateY(-65px) rotate(90deg)}}
@media(max-width:1100px){.scene-hen{width:195px;height:195px;left:17%;bottom:8px}.scene-chick{width:120px;height:120px;right:-7%}.scene-egg{left:-3%}.scene-copy{padding-left:23px}.scene-sticker{right:5%}.scene-ring{width:230px}.scene-copy p{max-width:235px}.scene-orb{width:170px;height:170px;top:20px}}
@media(max-height:800px) and (min-width:761px){.pet-open .pet-art{width:105px;height:100px}.pet-open .pet-kicker{display:none}.sidebar-bottom{padding-top:18px}}
@media(max-width:760px){.coop-scene{min-height:195px;margin-bottom:24px;grid-template-columns:1.15fr .85fr;border-radius:21px}.scene-copy{padding:20px 0 20px 20px}.scene-copy h2{font-size:25px}.scene-kicker{font-size:7px;letter-spacing:1px}.scene-copy p{font-size:11px;max-width:215px}.scene-stage{min-height:195px}.scene-chips{gap:5px;margin-top:13px}.scene-chips>span{font-size:9px;padding:6px 8px}.scene-chips b{font-size:12px}.scene-hen{width:174px;height:174px;left:5%;bottom:5px}.scene-chick{width:105px;height:105px;right:-6%}.scene-egg{width:70px;height:70px;left:-12%}.scene-orb{width:150px;height:150px;left:9%;top:23px}.scene-ring{width:175px;left:0;height:130px}.scene-sticker{font-size:9px;padding:4px 8px;top:15px;right:9%}.scene-doodle{display:none}.star-a{left:-3%;top:27px;font-size:23px}.star-b{right:7%;top:50px}.scene-ground{bottom:-62px;height:130px;width:130%;left:-8%}.pet-open .pet-art{width:82px;height:74px;grid-row:1/5;margin:-10px 0 -10px -10px}.pet-open{grid-template-columns:64px 1fr}.chick-cheer{right:15px;bottom:18px;max-width:calc(100% - 30px);padding-right:17px}.chick-cheer>span{font-size:11px}.work-card{border-radius:20px}.growth-stages .pet-art{width:125px;height:125px}}
@media(max-width:450px){.coop-scene{min-height:266px;display:block;overflow:hidden}.scene-copy{padding:20px 18px;position:relative;z-index:3}.scene-copy h2{font-size:26px;max-width:230px}.scene-copy p{max-width:180px;line-height:1.8}.scene-chips{flex-direction:column;align-items:flex-start;gap:6px;margin-top:15px}.scene-chips>span{font-size:10px}.scene-stage{position:absolute;right:0;bottom:0;width:160px;height:220px;min-height:0}.scene-hen{width:175px;height:175px;left:-10px;bottom:26px}.scene-chick{width:100px;height:100px;right:-11px;bottom:9px}.scene-egg{width:73px;height:73px;left:-18px;bottom:0}.scene-sticker{top:27px;right:18px;font-size:9px}.scene-orb{width:133px;height:133px;top:42px;left:8px}.scene-ring{width:175px;height:142px;top:36px;left:-17px}.star-a{top:68px;left:-15px}.star-b{top:68px;right:4px}.scene-ground{width:220px;left:-36px}.flock-portrait{min-height:275px}.flock-portrait>.pet-hen{width:235px;height:235px;left:calc(50% - 125px)}.flock-portrait>.pet-chick{width:135px;height:135px;left:calc(50% + 20px)}.flock-portrait>.pet-egg{width:88px;height:88px;left:calc(50% - 152px)}.flock-portrait .portrait-note{font-size:10px;right:7%}.flock-portrait .portrait-star{font-size:25px;left:9%}.chick-track{height:67px}.track-companion,.track-companion .pet-art{width:66px;height:66px}}
@media(hover:none){.work-card:hover{transform:none}.work-card:hover .track-companion .pet-body{animation:buddy-breathe 5s ease-in-out infinite}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ── Peck: the brand gesture, on the follow-up panel ─────────────────── */
.attention-main{min-width:0}
.attention-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.attention-who{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted)}
.attention-who .avatar{width:22px;height:22px;font-size:10px;border-width:1px}
.peck-btn{position:relative;display:inline-flex;align-items:center;gap:7px;padding:8px 14px 8px 10px;border-radius:999px;background:var(--brand-soft);color:var(--brand-strong);font-size:12px;font-weight:600;line-height:1;min-height:40px;transition:background .18s ease,transform .18s ease,color .18s ease}
.peck-btn:hover{background:color-mix(in srgb,var(--brand) 18%,var(--brand-soft));transform:translateY(-1px)}
.peck-btn:active{transform:translateY(0) scale(.97)}
.peck-btn.pecked{background:var(--surface-sunken);color:var(--text-muted)}
.peck-label{white-space:nowrap}
.peck-bird{width:24px;height:24px;flex:0 0 auto;transform-origin:70% 60%}
.peck-head{fill:var(--chick-body)}
.peck-comb{fill:none;stroke:var(--brand);stroke-width:2.2;stroke-linecap:round}
.peck-eye{fill:var(--text-strong)}
.peck-beak{fill:var(--brand)}
.peck-btn.pecked .peck-head{fill:color-mix(in srgb,var(--text-muted) 25%,var(--surface-line))}
.peck-btn.pecked .peck-comb{stroke:var(--text-muted)}
.peck-btn.pecked .peck-beak{fill:var(--text-muted)}
.peck-puff{position:absolute;left:24px;top:7px;font-size:10px;color:var(--brand);opacity:0;pointer-events:none}
@keyframes peck-lunge{0%,100%{transform:translateX(0) rotate(0)}18%{transform:translateX(4px) rotate(20deg)}34%{transform:translateX(0) rotate(0)}56%{transform:translateX(4px) rotate(20deg)}74%{transform:translateX(0) rotate(0)}}
@keyframes peck-puff-a{0%{opacity:0;transform:translate(0,0) scale(.4)}25%{opacity:1}100%{opacity:0;transform:translate(16px,-14px) rotate(45deg) scale(1)}}
@keyframes peck-puff-b{0%{opacity:0;transform:translate(0,0) scale(.4)}35%{opacity:.9}100%{opacity:0;transform:translate(-5px,-18px) rotate(-30deg) scale(.9)}}
@keyframes peck-shake{0%,100%{transform:translateX(0)}18%{transform:translateX(-4px)}36%{transform:translateX(4px)}54%{transform:translateX(-3px)}72%{transform:translateX(2px)}}
.peck-btn.is-pecking .peck-bird{animation:peck-lunge .62s ease-in-out}
.peck-btn.is-pecking .puff-a{animation:peck-puff-a .7s ease-out}
.peck-btn.is-pecking .puff-b{animation:peck-puff-b .78s ease-out .06s}
.attention-row.is-pecked{animation:peck-shake .42s ease-in-out}
@media(max-width:480px){.peck-btn{padding:8px 11px;gap:5px}.peck-label{display:none}}
@media(prefers-reduced-motion:reduce){.peck-btn.is-pecking .peck-bird,.peck-btn.is-pecking .peck-puff,.attention-row.is-pecked{animation:none}.peck-btn:hover{transform:none}}
.panel-bird{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--brand-soft);flex:0 0 auto}
.panel-bird .peck-bird{width:22px;height:22px;animation:peck-idle 5.2s ease-in-out infinite}
@keyframes peck-idle{0%,84%,100%{transform:rotate(0)}88%{transform:rotate(15deg)}92%{transform:rotate(0)}96%{transform:rotate(15deg)}}
@media(prefers-reduced-motion:reduce){.panel-bird .peck-bird{animation:none}}