@font-face {
  font-family: 'Amstrad';
  src: url('../fonts/Ac437_Amstrad_PC-2y.ttf') format('truetype');
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden !important;
  background-image: url('images/forest-1.png');
  background-position: bottom;
background-repeat: no-repeat;
background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Amstrad', monospace;
}

#scene {
  position: relative;
  height: 80vh;
  width: calc(80vh * (3224 / 2330));
  max-width: 80vw;
  max-height: calc(80vw * (2330 / 3224));
}

#backbutton {
  position: fixed;
  top: 16px;
  left: 20px;
  font-family: 'Amstrad', monospace;
  font-size: 1rem;
  color: #000;
  text-decoration: none;
  z-index: 999;
  background: rgba(255,255,255,0.6);
  padding: 4px 10px;
  border: 1.5px solid #333;
}

#backbutton:hover {
  background: rgba(255,255,255,0.9);
}

.item img {
  filter: drop-shadow(4px 4px 6px rgba(0,0,0,0.4));
}

/* ── pet positions — update once you have images ── */
#pet-tubber {
  left: 13%;
  top: 30%;
  width: 20%;
  z-index: 3;
}

#pet-elliot {
  left: 40%;
  top: 44%;
  width: 18%;
  z-index: 3;
}

#pet-dexter {
  left: 67%;
  top: 10%;
  width: 15%;
  z-index: 3;
}

#pet-pepper {
  left: 110%;
  top: 30%;
  width: 17%;
  z-index: 3;
}

#pet-ollie {
  left: -10%;
  top:80%;
  width: 25%;
  z-index: 3;
}

#pet-isabelle {
  left: 90%;
  top: 90%;
  width: 27%;
  z-index: 3;
}

#pet-cecil {
  left: 65%;
  top: 65%;
  width: 16%;
  z-index: 3;
}