@charset "UTF-8";

.homestead-page { color: #433d34; background: #fff9ee; padding: 0 0 24px; }
.homestead-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.homestead-header h2 { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; }
.homestead-header > span { color: #857a68; font-size: 10px; white-space: nowrap; }
.homestead-header .quiet-btn { min-height: 44px; padding: 8px 9px; }
.homestead-stage { position: relative; container-type: inline-size; aspect-ratio: 4 / 5; overflow: hidden; isolation: isolate; background: #d6dfc7; }
.homestead-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; }
.homestead-scene-label, .homestead-clock { position: absolute; top: 13px; z-index: 3; border-radius: 16px; padding: 6px 10px; border: 1px solid #fff9e3; background: #fff9eceb; color: #3d6148; font-size: 11px; }
.homestead-scene-label { left: 12px; }
.homestead-clock { right: 12px; font-variant-numeric: tabular-nums; }
.homestead-page[data-time-of-day="night"] .homestead-clock { color: #fff7df; border-color: #758f9a; background: #385867; }
.homestead-door { position: absolute; z-index: 2; left: calc(var(--door-x) * 100%); top: calc(var(--door-y) * 100%); transform: translate(-50%, -50%); width: 22%; height: 37%; min-width: 44px; min-height: 44px; border-radius: 45% 45% 10px 10px; padding: 0; background: transparent; color: #3d6148; }
.homestead-door > span { position: absolute; bottom: -17px; left: 50%; display: inline-flex; align-items: center; justify-content: center; gap: 5px; transform: translateX(-50%); white-space: nowrap; padding: 6px 10px; border-radius: 18px; background: #fff9eceb; border: 1px solid #e5d9bc; font-size: 11px; }
.homestead-door .art-icon { width: 24px; height: 24px; }
.homestead-door:focus-visible, .homestead-door:hover { outline: 3px solid #eac777; outline-offset: 3px; box-shadow: inset 0 0 0 2px #fff9ee85; }
.homestead-page .homestead-door:active { transform: translate(-50%, -50%) scale(.98); }
.homestead-return-door { position: absolute; z-index: 3; left: calc(var(--door-x) * 100%); top: calc(var(--door-y) * 100%); transform: translate(-50%, -50%); width: 19%; height: 28%; min-width: 44px; min-height: 44px; padding: 0; border-radius: 45% 45% 8px 8px; background: transparent; color: #3d6148; }
.homestead-return-door > span { position: absolute; bottom: -17px; left: 50%; display: inline-flex; align-items: center; gap: 5px; transform: translateX(-50%); white-space: nowrap; border: 1px solid #e5d9bc; border-radius: 16px; padding: 6px 10px; background: #fff9eceb; font-size: 11px; }
.homestead-return-door:focus-visible, .homestead-return-door:hover { outline: 3px solid #eac777; outline-offset: 3px; }
.homestead-page .homestead-return-door:active { transform: translate(-50%, -50%) scale(.98); }
.homestead-return-door .art-icon { width: 26px; height: 26px; }
.homestead-return-door > span { bottom: 8px; }
/* Scene labels and the door stay above the animals' depth-sorted layers. */
.homestead-scene-label, .homestead-clock { z-index: 120; }
.homestead-door, .homestead-return-door { z-index: 110; }
.homestead-animal { --animal-width: clamp(52px, 18cqw, 88px); position: absolute; z-index: 2; left: calc(var(--resident-x) * 100%); top: calc(var(--resident-y) * 100%); width: var(--animal-width); height: calc(var(--animal-width) * var(--cutout-ratio)); min-width: 44px; min-height: 44px; transform: translate(calc(-100% * var(--cutout-foot-x)), calc(-100% * var(--cutout-foot-y))); padding: 0; border-radius: 30%; background: transparent; }
.homestead-animal[data-gait="hop"] { --animal-width: clamp(52px, 16.5cqw, 80px); }
.homestead-page .homestead-animal:active { transform: translate(calc(-100% * var(--cutout-foot-x)), calc(-100% * var(--cutout-foot-y))) scale(.97); }
.homestead-animal .pet-visual.mini-pet { position: relative; display: block; width: 100%; height: 100%; margin: 0; transform-origin: calc(var(--cutout-foot-x) * 100%) calc(var(--cutout-foot-y) * 100%); animation: homestead-breathe 4.8s ease-in-out infinite; pointer-events: none; }
.homestead-animal .pet-visual.mini-pet.animate-lean { animation: gentle-lean 1.6s ease 1; }
.homestead-animal .pet-visual.mini-pet.animate-hatch { animation: hatch-wiggle 1.1s ease 1; }
.homestead-animal .pet-visual.mini-pet[data-animation="idle"] { animation-delay: var(--wander-offset, 0s); }
/* Gait and facing are separate from the pet's existing touch / hatch animation. */
.homestead-gait, .homestead-facing { display: block; width: 100%; height: 100%; transform-origin: calc(var(--cutout-foot-x) * 100%) calc(var(--cutout-foot-y) * 100%); pointer-events: none; }
.homestead-gait { transform: translateY(0) scale(1); transition: transform .65s ease; }
.homestead-facing { transform: scaleX(var(--wander-facing, 1)); transition: transform .18s ease-in-out; }
.homestead-animal[data-behavior="walk"] .homestead-gait { animation: homestead-amble var(--wander-step-duration, .6s) ease-in-out infinite; animation-delay: var(--wander-offset, 0s); }
.homestead-animal[data-behavior="walk"][data-gait="hop"] .homestead-gait { animation-name: homestead-hop; }
.homestead-animal[data-behavior="walk"][data-gait="slither"] .homestead-gait { animation-name: homestead-slither; }
.homestead-animal[data-behavior="walk"][data-gait="waddle"] .homestead-gait { animation-name: homestead-waddle; }
.homestead-animal[data-behavior="rest"] .homestead-gait { transform: scale(1.012, .975); }
.homestead-rest-mark { display: none; position: absolute; right: -2px; top: 8%; color: #647657; opacity: .8; font-size: 10px; line-height: 1; letter-spacing: 1px; pointer-events: none; }
.homestead-rest-mark::before { content: "· · ·"; }
.homestead-animal[data-behavior="rest"] .homestead-rest-mark { display: block; }
.homestead-stage[data-motion-paused="true"] .homestead-gait, .homestead-stage[data-motion-paused="true"] .homestead-facing, .homestead-stage[data-motion-paused="true"] .pet-visual[data-animation="idle"] { animation-play-state: paused; transition: none; }
.homestead-stage[data-motion-paused="true"] .homestead-gait { transform: none !important; }
.homestead-stage[data-reduced-motion="true"] .homestead-gait, .homestead-stage[data-reduced-motion="true"] .homestead-facing, .homestead-stage[data-reduced-motion="true"] .pet-visual { animation: none !important; transition: none; }
.homestead-stage[data-reduced-motion="true"] .homestead-gait { transform: none !important; }
.homestead-cutout { display: block; width: 100%; height: 100%; overflow: hidden; }
.homestead-stage[data-time-of-day="night"] .homestead-cutout, .homestead-page[data-time-of-day="night"] .homestead-cutout { filter: brightness(.82) saturate(.9); }
.homestead-page[data-time-of-day="night"] .homestead-egg .pet-image { filter: brightness(.9) saturate(.95); }
.homestead-contact-shadow { position: absolute; left: calc(var(--cutout-foot-x) * 100%); top: calc(var(--cutout-foot-y) * 100% - 3px); width: 61%; height: 8%; min-height: 5px; transform: translate(-50%, -50%); border-radius: 50%; background: #3f4c2533; filter: blur(2px); pointer-events: none; }
.homestead-animal-name { position: absolute; left: calc(var(--cutout-foot-x) * 100%); top: calc(var(--cutout-foot-y) * 100% + 7px); transform: translateX(-50%); max-width: 115%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid #fff9ee75; border-radius: 12px; background: #fff9eee0; color: #4a5b3e; padding: 2px 7px; font-size: 10px; font-weight: 550; pointer-events: none; }
.homestead-bubble { position: absolute; left: 50%; top: -5px; z-index: 5; width: max-content; max-width: 145px; transform: translate(-50%, -100%); padding: 7px 10px; border: 1px solid #d7cdb9; border-radius: 16px; background: #fffdf6; color: #665a45; box-shadow: 0 3px 9px #65543018; font-size: 11px; line-height: 1.5; text-align: center; pointer-events: none; }
.homestead-bubble::after { content: ""; position: absolute; left: calc(50% - 4px); bottom: -5px; width: 8px; height: 8px; background: #fffdf6; border-right: 1px solid #d7cdb9; border-bottom: 1px solid #d7cdb9; transform: rotate(45deg); }
.homestead-art-pending { display: grid; width: 100%; height: 100%; place-items: center; border: 1px solid #c5d0af; border-radius: 42%; background: #fff9eecd; color: #637653; font-size: 20px; }
.homestead-empty { position: absolute; left: 50%; top: 57%; transform: translate(-50%, -50%); z-index: 2; width: max-content; max-width: calc(100% - 48px); padding: 12px 16px; border-radius: 18px; border: 1px solid #e0d4bd; background: #fff9eee6; color: #5f6b50; text-align: center; font-size: 12px; }
.homestead-guide { padding: 10px 16px 6px; color: #857a68; text-align: center; font-size: 11px; }
.homestead-page-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 2px 16px 13px; }
.homestead-page-controls button { min-width: 80px; min-height: 44px; padding: 8px 12px; border: 1px solid #dfd4bf; border-radius: 13px; background: #f4ecde; color: #655b4b; font-size: 12px; }
.homestead-page-controls span { font-size: 12px; color: #857a68; font-variant-numeric: tabular-nums; }
.homestead-roster { margin: 13px 16px 0; border: 1px solid #dfd4bf; border-radius: 16px; background: #fffdf6; overflow: hidden; }
.homestead-roster summary { min-height: 44px; padding: 12px 14px; cursor: pointer; color: #655b4b; font-size: 12px; }
.homestead-roster summary span { float: right; color: #857a68; font-size: 11px; }
.homestead-roster summary:focus-visible { outline: 3px solid #b29239; outline-offset: -3px; }
.homestead-roster-list { list-style: none; margin: 0; padding: 0 10px 8px; }
.homestead-roster-list li { display: flex; align-items: center; gap: 5px; border-top: 1px solid #eee4d4; }
.homestead-roster-find { display: flex; flex-direction: column; align-items: flex-start; min-height: 52px; flex: 1; min-width: 0; background: transparent; padding: 7px 5px; text-align: left; }
.homestead-roster-find strong { font-size: 12px; font-weight: 550; overflow-wrap: anywhere; }
.homestead-roster-find small { color: #857a68; font-size: 10px; }
.homestead-roster-personality { max-width: 30%; color: #857a68; font-size: 10px; overflow-wrap: anywhere; }
.homestead-roster-touch { min-width: 44px; min-height: 44px; background: transparent; color: #73865c; font-size: 11px; border-radius: 12px; }
.homestead-roster-touch:hover, .homestead-roster-find:hover { background: #f2eddf; }
.homestead-egg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 8px; padding: 6px 12px 16px; }
.homestead-egg { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.homestead-egg .homestead-bubble { top: 20px; }
.homestead-egg-character { min-width: 44px; min-height: 44px; padding: 0; background: transparent; border-radius: 30%; }
.homestead-egg-character .pet-visual.mini-pet { width: 110px; height: 124px; }
.homestead-egg-character .pet-image { width: 100%; height: 100%; object-fit: contain; }
.homestead-egg strong { font-size: 12px; font-weight: 550; overflow-wrap: anywhere; }
.homestead-egg small { color: #857a68; font-size: 10px; }
.homestead-egg-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; margin-top: 4px; }
.homestead-egg-actions .pill-btn, .homestead-egg-actions .quiet-btn { min-height: 44px; padding: 7px 9px; font-size: 11px; }
.homestead-bottom-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px; margin: 18px 16px 0; }
.homestead-bottom-actions button { min-height: 44px; }
.homestead-bottom-actions .art-icon { width: 23px; height: 23px; }
@keyframes homestead-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.012, .994); } }
@keyframes homestead-amble { 0%, 50%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-1.6px) rotate(.7deg); } 75% { transform: translateY(-1.6px) rotate(-.7deg); } }
@keyframes homestead-hop { 0%, 100% { transform: translateY(0) scale(1); } 18% { transform: translateY(0) scale(1.015, .975); } 42% { transform: translateY(-4px) scale(.995, 1.01); } 62% { transform: translateY(-1.5px) scale(1); } 78% { transform: translateY(0) scale(1.018, .975); } }
@keyframes homestead-slither { 0%, 100% { transform: translateX(-1px) rotate(-.65deg) scale(1.005, 1); } 50% { transform: translateX(1px) rotate(.65deg) scale(.995, 1); } }
@keyframes homestead-waddle { 0%, 100% { transform: translateY(0) rotate(-1.3deg); } 25% { transform: translateY(-1px) rotate(0deg); } 50% { transform: translateY(0) rotate(1.3deg); } 75% { transform: translateY(-1px) rotate(0deg); } }
@media (max-width: 340px) { .homestead-header { gap: 4px; padding: 8px; } .homestead-header h2 { font-size: 15px; } .homestead-header > span { font-size: 9px; } .homestead-scene-label, .homestead-clock { padding: 5px 8px; font-size: 10px; } .homestead-animal-name { padding: 2px 5px; font-size: 9px; } .homestead-roster-personality { display: none; } }
@media (prefers-reduced-motion: reduce) { .homestead-page .pet-visual { animation: none !important; } .homestead-page button { transition: none; } .homestead-page .homestead-gait, .homestead-page .homestead-facing { animation: none !important; transition: none; } .homestead-page .homestead-gait { transform: none !important; } }