@import url("./stage.css");

#drag-food[data-food] {
  display: block;
  width: 48px;
  height: 48px;
  overflow: hidden;
  font-size: 0;
  color: transparent;
  background-image: url("../assets/food-props.png");
  background-repeat: no-repeat;
  background-size: 300% 200%;
  filter: drop-shadow(0 3px 2px rgb(43 35 20 / 20%));
}
#drag-food[data-food="hay"] { background-position: 0 100%; }
#drag-food[data-food="carrot"] { background-position: 50% 100%; }
#drag-food[data-food="apple"] { background-position: 100% 100%; }

/* Henry uses the entire stable plate on mobile; keep its canvas centered. */
@media (max-width: 700px) {
  :root { --scene-focus: 50%; }
}
/* Public game: food baskets are the actions; laboratory controls remain separate. */
html[data-public-game="native-henry"] .feeding-actions[hidden] { display: none !important; }
html[data-public-game="native-henry"] .feeding-controls { grid-template-columns: minmax(200px, 1fr) auto; }
@media (max-width: 700px) {
  html[data-public-game="native-henry"] .feeding-controls { grid-template-columns: 1fr; }
}
/* Public contact stays readable and ahead of the discreet credits link. */
html[data-public-game="native-henry"] .feeding-controls { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
html[data-public-game="native-henry"] #game-contact { margin-top: 12px; font-size: 16px; font-weight: 600; }
html[data-public-game="native-henry"] #game-contact a { display: inline-flex; flex-direction: column; gap: 4px; justify-content: center; min-height: 44px; max-width: 100%; line-height: 1.4; overflow-wrap: anywhere; }
html[data-public-game="native-henry"] #game-contact .contact-address { font-size: 15px; }
html[data-public-game="native-henry"] #game-credits { margin-top: 12px; font-size: 12px; }
html[data-public-game="native-henry"] #game-credits a { display: inline-flex; align-items: center; min-height: 44px; }