.farm-map-skin {
  --label-bg: rgba(255, 244, 207, .94);
  --label-border: #7d471e;
  --label-text: #3a2112;
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  overflow: hidden;
  container-type: inline-size;
  border-radius: 0;
  background: transparent;
  isolation: isolate;
  user-select: none;
}

.farm-map-skin__picture,
.farm-map-skin__map,
.farm-map-skin__effects,
.farm-map-skin__labels,
.farm-map-skin__animals,
.farm-map-skin__drops {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.farm-map-skin__map {
  display: block;
  object-fit: fill;
  pointer-events: none;
}

.farm-map-skin__effects,
.farm-map-skin__labels {
  pointer-events: none;
}

.farm-map-skin__animals {
  pointer-events: none;
}

.farm-map-skin__building-hotspot {
  position: absolute;
  z-index: 8;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 42%;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}

.farm-map-skin__building-hotspot::before {
  content: none;
}

.farm-map-skin__building-hotspot:hover,
.farm-map-skin__building-hotspot:focus-visible {
  outline: none;
}

.farm-map-skin__building-tooltip {
  position: absolute;
  left: 50%;
  top: calc(100% + .8cqw);
  min-width: max-content;
  max-width: 24cqw;
  padding: .7cqw 1.35cqw .85cqw;
  transform: translate(-50%, -.6cqw);
  border: .32cqw solid #fff0a8;
  border-radius: 999px;
  color: #fff8dc;
  background: rgba(47, 27, 12, .92);
  box-shadow: 0 .65cqw 1.4cqw rgba(0,0,0,.26);
  font: 900 clamp(8px, 2.35cqw, 22px)/1.1 system-ui, "Noto Sans SC", sans-serif;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transition: .18s ease;
  pointer-events: none;
}

.farm-map-skin__building-hotspot:hover .farm-map-skin__building-tooltip,
.farm-map-skin__building-hotspot:focus-visible .farm-map-skin__building-tooltip {
  opacity: 1;
  transform: translate(-50%, 0);
}

.farm-map-skin[lang^="en"] .farm-map-skin__building-tooltip,
.farm-map-skin[lang^="es"] .farm-map-skin__building-tooltip {
  font-size: clamp(7px, 1.8cqw, 17px);
}

.farm-map-skin__rotor-anchor {
  position: absolute;
  z-index: 4;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.farm-map-skin__rotor-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 50% 50%;
  animation: farm-map-rotate var(--rotation-duration, 8s) linear infinite;
  animation-direction: var(--rotation-direction, normal);
  filter: drop-shadow(0 .4cqw .35cqw rgba(35, 25, 18, .25));
}

.farm-map-skin__water {
  display: none !important;
}

.farm-map-skin__water::before,
.farm-map-skin__water::after {
  content: none !important;
  animation: none !important;
}

.farm-map-skin__particle {
  position: absolute;
  z-index: 6;
  width: var(--particle-size);
  aspect-ratio: 1;
  border-radius: 85% 15% 75% 25%;
  background: var(--particle-color);
  box-shadow: 0 0 .9cqw rgba(255,255,255,.65);
  opacity: 0;
  animation: farm-map-particle var(--particle-duration) ease-in-out var(--particle-delay) infinite;
}

.farm-map-skin__particle[data-type="star"] {
  clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%);
  border-radius: 0;
}

.farm-map-skin__particle[data-type="petal"] {
  border-radius: 80% 18% 78% 22%;
}

.farm-map-skin__creature {
  --creature-visual-scale: calc(1.55 * var(--creature-keep, 1));
  position: absolute;
  display: block;
  padding: 0;
  border: 0;
  aspect-ratio: 1;
  background: transparent;
  transform: translate(-50%, -82%) scale(var(--creature-visual-scale));
  transform-origin: 50% 85%;
  cursor: pointer;
  pointer-events: none;
  /* 禁止 CSS 平滑 left/top，避免未播走路动作时出现“滑过去” */
  transition: none;
}

.farm-map-skin__creature::after {
  content: "";
  position: absolute;
  inset: 18% 22% 0;
  pointer-events: none;
}

.farm-map-skin__creature:focus-visible {
  outline: .42cqw solid #fff6a8;
  outline-offset: .35cqw;
  border-radius: 50%;
}

.farm-map-skin__creature-sprite {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  pointer-events: auto;
  filter: drop-shadow(0 .52cqw .38cqw rgba(47,31,14,.30));
}
.farm-map-skin__creature.is-mirror .farm-map-skin__creature-sprite {
  transform: scaleX(-1);
}

.farm-map-skin__creature[data-condition="sick"] .farm-map-skin__creature-sprite {
  filter: sepia(.16) saturate(.78) hue-rotate(48deg) drop-shadow(0 .52cqw .38cqw rgba(47,31,14,.30));
}

.farm-map-skin__creature[data-condition="critical"] .farm-map-skin__creature-sprite {
  filter: grayscale(.34) sepia(.28) hue-rotate(-28deg) drop-shadow(0 .52cqw .38cqw rgba(47,31,14,.30));
}
.farm-map-skin__drops {
  z-index: 45;
  pointer-events: none;
}
.farm-map-skin__drops .rabbit-drop {
  pointer-events: auto;
}

.farm-map-skin__creature.is-produced {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.farm-map-skin__creature.is-produced,
.farm-map-skin__creature.rabbit--produced {
  pointer-events: none;
}
.farm-map-skin__creature.is-arriving .farm-map-skin__creature-sprite {
  transform-origin: 50% 100%;
  animation: farm-map-arrive .88s cubic-bezier(.18, .82, .22, 1);
}
@keyframes farm-map-arrive {
  0% { transform: translateY(-240%) scale(.28); opacity: 0; }
  72% { transform: translateY(8%) scale(1.06); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.farm-map-skin__creature-speech {
  position: absolute;
  z-index: 60;
  left: 92%;
  bottom: 58%;
  width: max-content;
  min-width: 72px;
  max-width: 132px;
  padding: 4px 8px 5px;
  border: 1.5px solid #8b4e21;
  border-radius: 10px 10px 10px 4px;
  color: #382114;
  background: linear-gradient(#fffdf2, #fff0c9);
  box-shadow: 0 2px 5px rgba(50,29,12,.28), inset 0 0 0 1px rgba(255,255,255,.7);
  font: 800 10px/1.25 system-ui, "Noto Sans SC", sans-serif;
  text-align: center;
  overflow-wrap: anywhere;
  opacity: 0;
  transform: translate(0, 4px) scale(calc(1 / var(--creature-visual-scale, 1)));
  transform-origin: 0 100%;
  transition: opacity .16s ease, transform .16s ease;
  pointer-events: none;
}

.farm-map-skin__creature-speech.is-mirrored {
  opacity: 0 !important;
  visibility: hidden;
}

.farm-map-skin__creature-speech::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 100%;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid #8b4e21;
  border-bottom: 1.5px solid #8b4e21;
  background: #fff0c9;
  transform: translateY(-4px) rotate(45deg);
}

.farm-map-skin__creature-speech.is-visible {
  opacity: 1;
  transform: translate(0, 0) scale(calc(1 / var(--creature-visual-scale, 1)));
}

.farm-map-skin[lang^="en"] .farm-map-skin__creature-speech,
.farm-map-skin[lang^="es"] .farm-map-skin__creature-speech {
  min-width: 72px;
  max-width: 120px;
  font-size: 9px;
}

@keyframes farm-map-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes farm-map-water {
  from { transform: translate3d(-12%, -8%, 0); }
  to { transform: translate3d(12%, 8%, 0); }
}

@keyframes farm-map-particle {
  0% { opacity: 0; transform: translate3d(0, -2cqw, 0) rotate(0); }
  16% { opacity: .9; }
  84% { opacity: .72; }
  100% { opacity: 0; transform: translate3d(var(--particle-drift), 22cqw, 0) rotate(480deg); }
}

@media (prefers-reduced-motion: reduce) {
  .farm-map-skin__rotor-image,
  .farm-map-skin__water::before,
  .farm-map-skin__water::after,
  .farm-map-skin__particle {
    animation: none !important;
  }
}