.ranch-pasture {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  border-radius: 26px;
  background: linear-gradient(180deg, #ffffff00 45%, #38200b2b), url('/assets/mitian/ranch-pasture-v1.webp') center/cover;
  box-shadow: var(--shadow);
  isolation: isolate;
}
.ranch-pasture::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px #fff9dd88, inset 0 -35px 50px #52321122;
}
.ranch-scene-note {
  position: absolute;
  z-index: 3;
  left: 13px;
  top: 13px;
  background: #fff9e9e8;
  border: 1px solid #ead6b5;
  border-radius: 999px;
  padding: 8px 11px;
  font-size: 11px;
  font-weight: 800;
}
.ranch-animals {
  position: absolute;
  z-index: 2;
  inset: 41% 4% 6%;
  overflow: visible;
}
.ranch-roamer {
  --lane: 0;
  --delay: 0s;
  --x: .1;
  position: absolute;
  left: calc(var(--x) * (100% - 92px));
  top: calc(var(--lane) * 23%);
  filter: drop-shadow(0 6px 5px #3c241b55);
}
.animal-sprite { display: block; width: 86px; height: 86px; background-image: url('/assets/mitian/ranch-animal-sprites-v3.webp'); background-size: 400% 400%; background-repeat: no-repeat; background-position-x: 0; filter: drop-shadow(0 7px 5px #38211442); animation: animalOccasionalFrames 6.4s steps(1, end) var(--delay, 0s) infinite, animalOccasionalGesture 6.4s ease-in-out var(--delay, 0s) infinite; }
.animal-sprite.chicken { background-position-y: 0; }
.animal-sprite.cow { background-position-y: 33.333%; }
.animal-sprite.pig { background-position-y: 66.666%; }
.animal-sprite.alpaca { background-position-y: 100%; }
.ranch-roamer .animal-sprite { width: 92px; height: 92px; }
.ranch-roamer.ready .animal-sprite { animation-name: animalOccasionalFrames, animalReadyGesture; }
.animal-card .animal-sprite, .ranch-pen .animal-sprite { margin: 0 auto 5px; }
.ranch-empty { position: absolute; left: 50%; bottom: 18%; translate: -50% 0; background: #fff9e9e6; border-radius: 18px; padding: 11px 15px; text-align: center; color: #6c4b2a; }
.animal-face { animation: animalOccasionalGesture 6.4s ease-in-out infinite; }
@keyframes animalOccasionalFrames { 0%, 78% { background-position-x: 0; } 82% { background-position-x: 33.333%; } 87% { background-position-x: 66.666%; } 92% { background-position-x: 100%; } 97%, 100% { background-position-x: 0; } }
@keyframes animalOccasionalGesture { 0%, 78%, 100% { transform: translateY(0) rotate(0); } 84% { transform: translateY(-5px) rotate(-2deg); } 90% { transform: translateY(-1px) rotate(2deg); } 95% { transform: translateY(-3px) rotate(-1deg); } }
@keyframes animalReadyGesture { 0%, 78%, 100% { transform: translateY(0) rotate(0) scale(1); } 84% { transform: translateY(-9px) rotate(-5deg) scale(1.05); } 90% { transform: translateY(-2px) rotate(4deg) scale(1.02); } 95% { transform: translateY(-6px) rotate(-2deg) scale(1.04); } }
@media (max-width: 700px) { .ranch-pasture { min-height: 290px; } }
@media (max-width: 410px) { .ranch-pasture { min-height: 278px; } .ranch-animals { inset: 40% 4% 7%; } .ranch-roamer { top: calc(var(--lane) * 21%); } .ranch-roamer .animal-sprite { width: 78px; height: 78px; } }
@media (prefers-reduced-motion: reduce) { .ranch-roamer, .ranch-roamer .animal-sprite, .animal-sprite, .animal-face { animation: none !important; } }
.retirement-preview { display: inline-block; margin-top: 5px; color: #7a4d17; background: #fff3cf; border: 1px solid #e7bf68; border-radius: 9px; padding: 4px 6px; font-size: 11px; line-height: 1.35; }