/* ══════════════════ Room Setup ══════════════════ */
.scene-container {
	position: relative;
	width: 92vw;
	max-width: 1050px;
	aspect-ratio: 16 / 9;

	transform: scale(1.3);      /* 130% size */
	transform-origin: center;   /* Scale from center */
	z-index: 0;
}

.scene-container img {
	position: absolute;
}

.room {
	width: 100%;
	height: 100%;
	object-fit: contain;
	z-index: 0;
	user-select: none; 
	pointer-events: none;
}

/* ══════════════════ Object Info ══════════════════ */

.object {
	height: auto;
	z-index: 3;
	transition: filter 0.5s ease;
}

.object:hover {
  filter: brightness(1.9);
  cursor: crosshair;
}
  
.clickable {
  z-index: 2;
  display: block;
}


/* ══════════════════ Objects ══════════════════ */
  .tv {
    top: 34.2%;
    left: 34.7%;
	width: 6%;
  }

  .crate {
    top: 45.3%;
    right: 46%;
	width: 9%;
  }

  .vinyl {
    bottom: 49.3%;
    left: 25%;
	width: 7%;
  }
  
  .phone {
    bottom: 23.9%;
    left: 28.5%;
	width: 6%;
  }
  
  .painting {
    bottom: 78.2%;
    left: 54.5%;
	width: 6.7%;
  }

  .niko {
    bottom: 48.8%;
    left: 72.1%;
	width: 6%;
  }
  
  .ash {
    bottom: 29.4%;
    left: 64.3%;
	width: 9.8%;
  }
  
  .book {
    bottom: 36.9%;
    left: 23%;
	width: 8.1%;
  }

/* ══════════════════ Buttons ══════════════════ */
  .bottom-right-buttons {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
}

.image-button {
    width: 70px;
    height: 70px;
    padding: 0;
    border: none;
    background: none;
    cursor: crosshair;
    transition:.15s ease;
}

.image-button img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.image-button:hover {
  transform:scale(1.05);
  transition:.15s ease;
}

.bottom-left-image {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 500px;
    height: auto;
    transition:.15s ease;
}

.bottom-left-image img:hover {
  transform: translate(0px, -3px);
  transform: brightness(110%);
  transition:.15s ease;
}

.bottom-left-image img {
    width: 50%;
    height: 50%;
    display: block;
    transition:.15s ease;
}
