.simulation-viewport {
  position: relative;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}

.simulation-viewport.is-dragging {
  cursor: grabbing;
}

.simulation-scene {
  --world-zoom: 1;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #698f48;
  background-image: url("/api/sprites/piggy-grass-tile.png");
  background-position: var(--camera-x, 0) var(--camera-y, 0);
  background-size: calc(var(--tile-size) * 8 * var(--world-zoom));
  image-rendering: pixelated;
}

.simulation-scene::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-position: var(--camera-x, 0) var(--camera-y, 0);
  background-size:
    calc(var(--tile-size) * var(--world-zoom))
    calc(var(--tile-size) * var(--world-zoom));
  opacity: .36;
}

.simulation-sun {
  position: fixed;
  z-index: 2;
  top: -30vh;
  left: 25vw;
  width: 65vw;
  height: 65vw;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,244,177,.28), rgba(255,244,177,0) 70%);
}

.simulation-cloud {
  position: fixed;
  z-index: 3;
  width: 130px;
  height: 32px;
  border: 4px solid rgba(255,255,255,.25);
  border-radius: 50%;
  pointer-events: none;
  background: rgba(255,255,255,.17);
  filter: blur(1px);
  animation: simulation-cloud-drift 28s linear infinite;
}

.simulation-cloud::before,
.simulation-cloud::after {
  position: absolute;
  bottom: 6px;
  border-radius: 50%;
  content: "";
  background: inherit;
}

.simulation-cloud::before { left: 20px; width: 50px; height: 50px; }
.simulation-cloud::after { right: 18px; width: 64px; height: 60px; }
.simulation-cloud.cloud-a { top: 13%; left: -150px; }
.simulation-cloud.cloud-b { top: 23%; left: -300px; animation-delay: -14s; transform: scale(.72); }

@keyframes simulation-cloud-drift {
  to { translate: calc(100vw + 460px) 0; }
}

.simulation-scene .kind-path-tile {
  z-index: 4;
  width: 242px;
  height: calc(var(--tile-size) * 5);
  min-height: 18px;
  border-top: 3px solid rgba(105,72,37,.16);
  border-bottom: 3px solid rgba(105,72,37,.16);
  background-color: #b88c59;
  background-image: url("/api/sprites/piggy-path-tile.png");
  background-repeat: repeat;
  background-position: 0 0;
  background-size: calc(var(--tile-size) * 8);
  pointer-events: none;
  box-shadow: inset 0 7px rgba(255,224,158,.1), inset 0 -8px rgba(82,53,29,.1);
}

.sim-object {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  will-change: transform;
}

.world-entity {
  width: 64px;
  height: 64px;
  pointer-events: none;
  transition: opacity 240ms ease;
}

.world-entity > .sprite {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scale(var(--entity-scale, .25));
  transform-origin: center bottom;
}

.world-entity.faces-left > .sprite {
  transform: translateX(-50%) scaleX(-1) scale(var(--entity-scale, .25));
}

.world-entity.kind-animal > .sprite {
  filter: drop-shadow(0 3px 1px rgba(41, 35, 24, .24));
}

.world-entity.kind-animal.is-grazing > .sprite {
  transform: translateX(-50%) translateY(3px) rotate(3deg) scale(var(--entity-scale, .25));
  animation: animal-graze 1.8s ease-in-out infinite;
}

.world-entity.kind-animal.faces-left.is-grazing > .sprite {
  transform: translateX(-50%) translateY(3px) rotate(-3deg) scaleX(-1) scale(var(--entity-scale, .25));
}

.world-entity.kind-villager > .sprite {
  filter: drop-shadow(0 3px 1px rgba(41, 35, 24, .25));
}

.world-entity.kind-villager.is-resting > .sprite {
  translate: 0 1px;
}

.world-entity.kind-farm-prop > .sprite {
  filter: drop-shadow(0 4px 2px rgba(41, 35, 24, .22));
}

.world-entity.kind-grass {
  filter: saturate(1.18) drop-shadow(0 3px 1px rgba(31,63,27,.23));
}

.world-entity.kind-roadside-grass {
  filter: saturate(.9) drop-shadow(0 2px 1px rgba(31,63,27,.2));
}

.world-entity.kind-food > .sprite,
.world-entity.kind-resource > .sprite {
  animation: crop-sway 2.4s ease-in-out infinite;
}

.world-entity.kind-tree > .sprite {
  filter: drop-shadow(0 5px 2px rgba(28,55,30,.24));
  animation: tree-breeze 3.6s ease-in-out infinite;
}

@keyframes crop-sway {
  50% { rotate: 2deg; }
}

@keyframes animal-graze {
  50% { translate: 0 2px; }
}

@keyframes tree-breeze {
  50% { rotate: 1deg; }
}

.simulation-scene .pond {
  width: 384px;
  height: 256px;
  border: 12px solid #5f7042;
  border-radius: 48% 54% 50% 46%;
  outline: 5px solid rgba(53,76,35,.45);
  background-color: #36afa5;
  background-image: url("/api/sprites/piggy-water-tile.png");
  background-size: calc(var(--tile-size) * 8);
  box-shadow: 0 8px 0 rgba(55,69,37,.6), inset 0 0 0 5px rgba(132,220,176,.34);
  image-rendering: pixelated;
}

.simulation-scene .pond span {
  position: absolute;
  right: 20%;
  bottom: 22%;
  width: 24px;
  height: 16px;
  border-radius: 50%;
  background: #5f964a;
  box-shadow: 19px 4px 0 -5px #81b45c;
}

.simulation-scene .kind-fence-horizontal-short,
.simulation-scene .kind-fence-vertical-short,
.simulation-scene .kind-fence-vertical-long,
.simulation-scene .kind-fence-vertical-full {
  z-index: 8;
  border: 5px solid #55341f;
  border-radius: 5px;
  background:
    linear-gradient(#a96c37 0 15%, #704325 15% 26%, #bd7c42 26% 72%, #704325 72% 84%, #9b5d31 84%);
  box-shadow: 0 6px 0 rgba(53,40,25,.35), inset 0 3px rgba(255,204,118,.24);
  image-rendering: pixelated;
}

.simulation-scene .kind-fence-horizontal-short {
  width: 420px;
  height: 28px;
}

.simulation-scene .kind-fence-vertical-short {
  width: 28px;
  height: 180px;
  background:
    linear-gradient(90deg, #a96c37 0 15%, #704325 15% 26%, #bd7c42 26% 72%, #704325 72% 84%, #9b5d31 84%);
}

.simulation-scene .kind-fence-vertical-long {
  width: 28px;
  height: 365px;
  background:
    linear-gradient(90deg, #a96c37 0 15%, #704325 15% 26%, #bd7c42 26% 72%, #704325 72% 84%, #9b5d31 84%);
}

.simulation-scene .kind-fence-vertical-full {
  width: 28px;
  height: 645px;
  background:
    linear-gradient(90deg, #a96c37 0 15%, #704325 15% 26%, #bd7c42 26% 72%, #704325 72% 84%, #9b5d31 84%);
}

.simulation-scene .kind-gate-vertical > .sprite {
  transform: translateX(-50%) rotate(90deg) scale(var(--entity-scale, .25));
}

.simulation-scene .kind-gate-horizontal > .sprite,
.simulation-scene .kind-gate-vertical > .sprite {
  filter: drop-shadow(0 5px 2px rgba(46,32,20,.35));
}

.simulation-scene .house-site {
  width: 256px;
  height: 208px;
  filter: drop-shadow(0 8px 4px rgba(42,31,17,.32));
}

.simulation-scene .house-site.is-preview {
  opacity: .48;
  filter: sepia(.32) drop-shadow(0 5px 3px rgba(42,31,17,.22));
}

.simulation-scene .house-build-animation {
  width: 256px;
  height: 208px;
  background-image: url("/api/sprites/piggy-house-build.png");
  background-position: 0 0;
  image-rendering: pixelated;
}

.simulation-scene .house-site.is-active {
  filter: drop-shadow(0 0 9px rgba(255,224,114,.82));
}

.farmer-agent {
  width: 256px;
  height: 208px;
  pointer-events: none;
}

.farmer-sprite-wrap {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 256px;
  height: 208px;
  transform: scale(.58);
  transform-origin: center bottom;
}

.farmer-agent.is-walking .farmer-sprite-wrap {
  animation: farmer-walk-step .36s steps(2, end) infinite;
}

@keyframes farmer-walk-step {
  25% { translate: 0 -3px; rotate: -1deg; }
  75% { translate: 0 -1px; rotate: 1deg; }
}

.farmer-sprite {
  transition: none;
}

.farmer-carry-load {
  display: none;
  position: absolute;
  z-index: 3;
  right: 44px;
  bottom: 38px;
  transform: scale(.42);
  transform-origin: center bottom;
  filter: drop-shadow(0 4px 2px rgba(38,29,18,.35));
}

.farmer-agent.is-carrying .farmer-carry-load {
  display: block;
  animation: carried-load-bob .36s steps(2, end) infinite;
}

.farmer-agent.faces-left .farmer-carry-load {
  right: auto;
  left: 44px;
}

@keyframes carried-load-bob {
  50% { translate: 0 -4px; }
}

.farmer-agent.faces-left .farmer-sprite {
  transform: scaleX(-1);
}

.farmer-tooltip {
  z-index: 4;
  bottom: 112px;
  left: 55%;
  max-width: min(360px, 84vw);
}

.farmer-tooltip [data-farmer-status] {
  margin-left: 4px;
}

.simulation-scene [hidden] {
  display: none !important;
}

.simulation-viewport .scene-title,
.simulation-viewport .playground-link,
.simulation-viewport .scene-hud,
.simulation-viewport .pan-hint {
  position: fixed;
}

.pixel-panel {
  position: fixed;
  z-index: 200000;
  border: 3px solid #55361e;
  border-radius: 6px;
  color: #382313;
  background: rgba(255,226,162,.94);
  box-shadow:
    inset 0 0 0 2px rgba(255,248,202,.72),
    0 5px 0 rgba(48,37,24,.32);
  font-family: var(--font-pixel, monospace);
}

.resource-panel {
  top: 14px;
  left: 14px;
  width: min(360px, calc(100vw - 28px));
  padding: 10px 12px;
}

.resource-panel__header,
.minimap-title,
.house-progress > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.resource-panel__header {
  margin-bottom: 8px;
  font-size: 11px;
}

.sync-indicator {
  color: #8a3c2a;
  font-size: 9px;
}

.sync-indicator.is-live {
  color: #27633b;
}

.sync-indicator.is-live::before {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  content: "";
  background: #49a65e;
  box-shadow: 0 0 5px #49a65e;
}

.resource-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.resource-grid > span {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 5px 3px;
  border: 2px solid rgba(85,54,30,.34);
  border-radius: 3px;
  background: rgba(255,248,210,.5);
}

.resource-grid b {
  overflow: hidden;
  max-width: 100%;
  font-size: 7px;
  text-overflow: ellipsis;
}

.resource-grid strong {
  margin-top: 3px;
  font-size: 13px;
}

.house-progress {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 2px solid rgba(85,54,30,.24);
  font-size: 9px;
}

.house-progress progress {
  width: 100%;
  height: 10px;
  margin: 5px 0 2px;
  accent-color: #5c8e49;
}

.house-progress small {
  display: block;
  min-height: 12px;
  overflow: hidden;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.simulation-viewport .scene-title {
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
}

.minimap-panel {
  right: 14px;
  bottom: 54px;
  width: 252px;
  padding: 7px;
}

.minimap-title {
  margin: 1px 2px 6px;
  font-size: 9px;
}

.minimap-panel canvas {
  display: block;
  width: 240px;
  height: 180px;
  border: 2px solid #55361e;
  background: #668d45;
  image-rendering: pixelated;
  cursor: crosshair;
}

.zoom-controls {
  display: grid;
  grid-template-columns: 26px 1fr 26px 38px;
  gap: 5px;
  margin-top: 6px;
}

.zoom-controls button {
  min-height: 25px;
  border: 2px solid #55361e;
  border-radius: 3px;
  color: #382313;
  background: #f4ca77;
  font: 700 10px var(--font-pixel, monospace);
  cursor: pointer;
}

.zoom-controls input {
  min-width: 0;
  accent-color: #557f40;
}

@media (max-width: 800px) {
  .resource-panel {
    top: 84px;
    left: 8px;
    width: min(330px, calc(100vw - 16px));
  }

  .simulation-viewport .scene-title {
    top: 8px;
    left: 8px;
    transform: none;
  }

  .minimap-panel {
    right: 8px;
    bottom: 50px;
    width: 172px;
  }

  .minimap-panel canvas {
    width: 160px;
    height: 120px;
  }

  .zoom-controls {
    grid-template-columns: 25px 1fr 25px;
  }

  .zoom-controls [data-zoom-fit] {
    display: none;
  }

  .simulation-viewport .scene-hud [data-farmer-hud] {
    display: inline;
    max-width: 45vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .farmer-tooltip {
    font-size: 12px;
  }
}