/* Homepage geometry follows the published dog game's dog-park + atelier rules. */
.hero{position:relative;isolation:isolate;min-height:288px;overflow:hidden}
.hero-copy{position:relative;z-index:1}
.hero-copy .eyebrow{font-size:10px;letter-spacing:2px}
.hero .button{display:inline-flex;min-height:44px;padding:12px 22px;gap:24px;font:700 12px 'Microsoft JhengHei','Segoe UI',sans-serif;line-height:normal;background:var(--cocoa);border-color:var(--cocoa);border-radius:12px;box-shadow:0 3px 8px #58352413;text-decoration:none}
.cat-park{align-self:stretch;padding:24px 5px 23px;margin:0}
.park-cats{padding-bottom:3px}
.cat-park>p{line-height:22px;padding:4px 6px;z-index:2;border-radius:0 0 12px 12px}
.park-cat:nth-child(6n+2),.park-cat:nth-child(6n+5){transform:translateY(-7px)}
.park-cloud{top:11px;left:17%}
.park-cloud-two{top:6px;left:55%;transform:scale(.7)}
.park-flower{position:absolute;width:5px;height:5px;background:#e4c17d;box-shadow:5px 0 #f9e7be,-5px 0 #f9e7be,0 5px #f9e7be,0 -5px #f9e7be,0 10px #778455;z-index:2}
.park-flower-one{bottom:18px;left:9px}.park-flower-two{bottom:24px;right:11px;transform:scale(.75)}
/* Animate the artwork, not the button, so hit targets and selection stay put. */
.park-cat:nth-child(4n+1) .cat-portrait{animation:cat-park-hop 2.6s steps(2,end) infinite}
.park-cat:nth-child(4n+5) .cat-portrait{animation-delay:-.7s}
.park-cat:nth-child(4n+9) .cat-portrait{animation-delay:-1.4s}
.park-cat[aria-pressed=true] .cat-portrait{animation:cat-park-greeting .7s ease-out}
@keyframes cat-park-hop{0%,65%,100%{transform:translateY(0)}75%{transform:translateY(-4px)}}
@keyframes cat-park-greeting{0%,100%{transform:translateY(0)}40%{transform:translateY(-5px) rotate(-2deg)}70%{transform:translateY(-2px) rotate(2deg)}}
/* Main and footer used to share z-index:1; the later footer covered the dock. */
body[data-screen=home] #app{z-index:2}
footer{display:grid;grid-template-columns:1fr auto;align-items:center}
footer .brand-group{grid-column:1;grid-row:1}
footer #all-sources{grid-column:2;grid-row:1}
footer .social-footer{grid-column:1/-1;margin:0}
@media(prefers-reduced-motion:reduce){.park-cat .cat-portrait{animation:none!important}}
@media(max-width:700px){
 .hero{display:grid;grid-template-columns:1fr;min-height:0;gap:18px;padding:22px 16px 14px;margin-bottom:22px}
 .hero-copy .eyebrow{font-size:9px;letter-spacing:1.5px}
 .hero .park-intro{line-height:1.9}
 .hero .park-picked{margin-bottom:6px}
 .hero .button{display:inline-flex;padding:10px 18px;gap:22px;min-height:44px}
 .cat-park{min-height:190px;width:100%;max-width:420px;justify-self:center;margin:0;padding:14px 3px 32px;border-radius:10px}
 .cat-park>p{font-size:9px;line-height:1.6;border-radius:0 0 10px 10px}
 .park-cat:nth-child(6n+2),.park-cat:nth-child(6n+5){transform:translateY(-4px)}
 .park-cloud{top:6px}.park-cloud-two{transform:scale(.5)}
 .park-flower-one{bottom:19px;left:6px}.park-flower-two{bottom:21px;right:7px}
 .start-actions{min-height:80px;gap:12px;padding-top:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
 .start-actions .primary{flex:0 0 auto;min-width:134px;max-width:48%;white-space:nowrap;min-height:48px}
 .start-actions .dock-label{font-size:12px;line-height:1.6}
 body:has(.start-actions){padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}
 footer{margin-bottom:20px;gap:18px 8px}
 footer .brand-group{min-width:0}
 footer .sunny-instagram{width:auto;max-width:100%;font-size:12px}
}
@media(max-width:359px){.hero{padding-left:16px;padding-right:16px}.hero h1{font-size:28px}.hero .park-intro{font-size:11px}.cat-park{min-height:210px}.park-cat{width:min(100%,52px)}}