body {
  margin: 0;
  background: #000311;
  font-family: sans-serif;
  overflow: hidden;
  color: white;
  text-align: center;
}

h1 {
  margin-top: 10px;
  font-size: 90px;
  color: #ff4538;
  pointer-events: none;
  z-index: 10;
  position: relative;
}

#container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#pet {
  position: absolute;
  width: 300px; /* tripled from 100px */
  image-rendering: pixelated;
  transform: scaleX(-1);
  transition: transform 0.4s ease, left 1s linear, top 1s linear;
  cursor: pointer;
  z-index: 5;
}

#subtitle {
  position: fixed;
  bottom: 200px; /* moved well above buttons */
  width: 100%;
  text-align: center;
  font-size: 28px;
  color: white;
  z-index: 10;
  text-shadow: 0 0 8px #00f2ff;
}

#buttons {
  position: fixed; /* was absolute */
  bottom: 20px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 10;
}

button {
  background-color: #88ccff;
  border: none;
  color: #000;
  font-size: 22px;
  padding: 14px 28px;
  margin: 0 15px;
  cursor: pointer;
  border-radius: 10px;
  box-shadow: 0 0 10px #00f2ff;
  z-index: 10;
}


#hunger {
  position: absolute;
  top: 60px;
  right: 20px;
  font-size: 18px;
  color: #88ccff;
  z-index: 10;
}

/* TRON grid background */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 300%;
  height: 300%;
  background: 
    repeating-linear-gradient(0deg, rgba(0, 191, 255, 0.05) 0px, rgba(0, 191, 255, 0.05) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(90deg, rgba(0, 191, 255, 0.05) 0px, rgba(0, 191, 255, 0.05) 1px, transparent 1px, transparent 40px);
  animation: moveGrid 20s linear infinite;
  z-index: 0;
}

@keyframes moveGrid {
  from { transform: translate(0, 0); }
  to { transform: translate(-40px, -40px); }
}