body {
  margin: 0;
  height: 100vh;
  background-image: url("pss.webp");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  justify-content: center;
  padding-top: 60px;
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 12px;
  position: relative;
  overflow: hidden;

}
/* 🌍 CAMERA WRAPPER (move + resize whole thing here) */
.camera-wrap {
  position: absolute;
  left: 900px;
  top: 140px;

  width: 380px; /* adjust size of camera */
  
}

.camera-wrap:hover {
  transform: rotate(-5deg);
}
/* 📸 CAMERA IMAGE */
.camera-img {
  width: 100%;
  display: block;
  position: relative;
  z-index: 2; /* stays above screen */
  pointer-events: none;
   filter:
    sepia(0.4)
    contrast(1.1)
    brightness(1)
    drop-shadow(0 10px 14px rgba(0, 0, 0, 0.6));
  
}

/* 🖤 SCREEN AREA (PERFECTLY FITTED TO GAP) */
.camera-screen {
  position: absolute;

  top: 25%;
  left: 20%;

  width: 39%;
  height: 53%;

  overflow: hidden;
  z-index: 1;
  display: block;
  border-radius: 18px; /* matches rounded screen */
   
  background: #f3fbe0;
 
  
}

.screen-scroll {
  position: absolute;   /* 👈 IMPORTANT */
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  overflow-y: scroll;   /* 👈 force scroll */
  overflow-x: hidden;

  padding: 10px;
  box-sizing: border-box;

  background: lisepianear-gradient(#f7cedb, #dbefad);
  color: #fe9eb3;

   font-family: 'Short Stack', cursive;
  text-shadow: 
    1px 1px 0 #f85e75,
    2px 2px 0 #eeafaf30;
  font-size: 15px;
  line-height: 1.3;
}

/* 🎀 THIN CUTE SCROLLBAR */
.screen-scroll::-webkit-scrollbar {
  width: 8px;
}

.screen-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.screen-scroll::-webkit-scrollbar-thumb {
  background: #d8a6c1;
  border-radius: 10px;
}

.neighbor-wrapper {
  position: relative;
  width: 550px;
  height: 550px;
  top: 100px;
}

.neighbor-wrapper:hover {
  transform: rotate(-5deg);
}
/* FRAME */
.frame-img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 3;
  pointer-events: none;
  filter:
    
    drop-shadow(0 10px 14px rgba(0, 0, 0, 0.6));
}

/* INSIDE AREA */
.neighbor-content {
  position: absolute;

  /* 🔧 ADJUST THESE to match your frame hole */
  top: 24%;
  left: 31%;
  width: 37%;
  height: 37%;

  z-index: 2;

  background: #fff0f6;
  border-radius: 10px;
  padding: 6px;

  display: flex;
  flex-wrap: wrap;
  gap: 6px;

  align-content: flex-start;

  overflow-y: auto;   /* ⭐ SCROLL */
}

/* REAL 88x31 BUTTON IMAGES */
.neighbor-img {
  width: 88px;
  height: 31px;
  object-fit: cover;
  border-radius: 6px;

  box-shadow: 0 2px 4px #00000020;
}

/* FAKE BUTTON (same size) */
.fake-btn {
  width: 85px;
  height: 28px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: linear-gradient(#ffc0cb, #f3b2c0);
  border-radius: 6px;

  font-size: 10px;
  font-family: 'Short Stack', cursive;
  color: #333;
  text-decoration: none;

  box-shadow: 0 2px 0 #f38ea7;
  text-align: center;
  padding: 2px;
}

/* HOVER */
.fake-btn:hover,
.neighbor-img:hover {
  transform: translateY(-2px);
}