@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: 'Press Start 2P', monospace;
  background: #23211c;
  overflow-x: hidden;
}

.background-overlay {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: url('forest-bg.png') center center/cover no-repeat;
  z-index: -1;
  filter: brightness(0.8) contrast(1.1);
  image-rendering: pixelated;
}

.website-title {
  font-family: 'Press Start 2P', monospace;
  color: #ffe66d;
  background: #23211c;
  outline: 4px solid #ffe66d;
  outline-offset: -10px;
  display: inline-block;
  padding: 18px 32px 12px 32px;
  margin: 40px auto 16px auto;
  font-size: 2.2vw;
  letter-spacing: 2px;
  text-shadow: 0 3px 0 #000, 0 0 16px #ffe66d44;
  box-shadow: 4px 8px 0 #100d07, 2px 2px 0 #ffda74;
}

header {
  text-align: center;
  z-index: 1;
  position: relative;
}

.layout {
  width: 100vw;
  height: 82vh;
  position: relative;
  margin: 0 auto;
  min-width: 900px; /* Prevent overlap on small screens */
}

.box {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.9vw;
  color: #fffbe0;
  padding: 1.3em 0.6em;
  border: 4px solid #23211c;
  background: #373522cc;
  box-shadow: 4px 6px 0 #181612, 0 0 6px #ffe66d22;
  text-shadow: 1px 2px 0 #16160a, 0 0 3px #ffe66d22;
  image-rendering: pixelated;
  outline: 2px dashed #ffe66d;
  outline-offset: -9px;
}

/* ---- Layout positions to match your image ---- */

.virtual-pet {
  background: #54613fcc;
  left: 9vw; top: 1vh; width: 18vw; height: 25vh;
  border-color: #7f9160; outline-color: #fffbe0;
}

.image-insert1 {
  background: #958c5ecc;
  left: 29vw; top: 12vh; width: 13vw; height: 18vh;
  border-color: #b7ae87; outline-color: #ffe66d;
}

.guest-book {
  background: #cdcda5ee;
  color: #23211c;
  left: 60vw; top: 7vh; width: 15vw; height: 6vh;
  border-color: #e8e7cc; outline-color: #7f9160;
  font-size: 0.8vw; text-shadow: none;
}

.image-insert2 {
  background: #958c5ecc;
  left: 44vw; top: 13vh; width: 10vw; height: 27vh;
  border-color: #b7ae87; outline-color: #ffe66d;
}

.mini-game {
  background: #433c36ee;
  border-color: #7f6e60; outline-color: #ffe66d;
  left: 56vw; top: 19vh; width: 18vw; height: 18vh;
  font-size: 0.85vw;
}

.profile-preview {
  background: #cdcda5ee;
  color: #23211c;
  left: 9vw; top: 37vh; width: 15vw; height: 18vh;
  border-color: #e8e7cc; outline-color: #7f9160;
  font-size: 0.8vw; text-shadow: none;
}

.chatbox {
  background: #433c36ee;
  border-color: #7f6e60; outline-color: #ffe66d;
  left: 25vw; top: 37vh; width: 15vw; height: 18vh;
  font-size: 0.85vw;
}

.image-insert3 {
  background: #958c5ecc;
  left: 56vw; top: 45vh; width: 13vw; height: 7vh;
  border-color: #b7ae87; outline-color: #ffe66d;
}

.suggestion {
  background: #9b8d4dcc;
  border-color: #ffe66d; outline-color: #373522;
  left: 56vw; top: 60vh; width: 18vw; height: 9vh;
  font-size: 0.8vw;
}

/* ---- Keep your virtual pet and profile inner styles ---- */
#virtual-pet label, #virtual-pet button, #virtual-pet input, #virtual-pet span {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.7vw !important;
  letter-spacing: 1px;
}
#virtual-pet button {
  background: #23211c;
  color: #ffe66d;
  border: 2px solid #ffe66d;
  padding: 0.2em 1.2em;
  margin: 0.25em;
  cursor: pointer;
  box-shadow: 2px 2px 0 #7f9160;
  text-shadow: none;
  outline: none;
}
#virtual-pet button:hover {
  background: #ffe66d;
  color: #23211c;
}
#virtual-pet input[type="text"] {
  background: #cdcda5;
  color: #23211c;
  border: 2px solid #7f9160;
  padding: 0.2em 0.7em;
  font-size: 0.7vw;
  box-shadow: 1px 1px 0 #7f9160;
}
#virtual-pet img {
  image-rendering: pixelated;
  border: 2px solid #ffe66d;
  margin: 0.3em 0;
  background: #cdcda5;
}

/* Profile avatar */
#profile-preview img {
  image-rendering: pixelated;
  border: 2px solid #7f9160;
  margin-bottom: 0.8em;
  background: #cdcda5;
  width: 48px;
  height: 48px;
}

/* Small responsive tweaks */
@media (max-width: 900px) {
  .website-title { font-size: 4.5vw; }
  .box { font-size: 1.4vw; }
}