body {
  background-color: white;
  color: black;
  font-family: Verdana;
  background-image: url('wallpaper.jpg');
  background-size: cover;
  background-position: center;
}

@font-face {
  font-family: 'PerfectDOS';
  src: url('fonts/Perfect DOS VGA 437.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

.desk {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;       /* desk size */
  height: 600px;
  background-image: url('images/antique-desk.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  z-index: 1;
}

/* drawer setup */
.desk > div[class$="-drawer"] {
  position: absolute;
  inset: 0;                          /* fill the desk area */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;                        /* hidden for now */
  pointer-events: none;              /* don't block other hovers */
  transition: opacity 0.3s ease;
  z-index: 2;                        /* above the desk base */
}

/* drawer images */
.left-drawer  { background-image: url('images/antique-desk-left.png'); }
.right-drawer { background-image: url('images/antique-desk-right.png'); }
.top-drawer   { background-image: url('images/antique-desk-top.png'); }
.middle-drawer{ background-image: url('images/antique-desk-middle.png'); }

.hover-zone {
  position: absolute;
  background: transparent; /* stays invisible */
  cursor: pointer;
  z-index: 5;
}

/* drawer hover placements */
.hover-left {
  width: 17%;
  height: 10%;
  bottom: 38%;
  left: 10%;
}

.hover-right {
  width: 17%;
  height: 10%;
  bottom: 30%;
  right: 10%;
}

.hover-top {
  width: 15%;
  height: 10%;
  top: 25%;
  left: 73%;
}

.hover-middle {
  width: 35%;
  height: 5%;
  top: 47%;
  left: 33%;
}

.drawer-text {
  position: absolute;
  color: white; 
  font-family: "PerfectDOS", "Courier New", monospace;
  font-size: 20px;
  letter-spacing: 1px;

  text-shadow:
    -1px -1px 0 black,
     1px -1px 0 black,
    -1px  1px 0 black,
     1px  1px 0 black;

  opacity: 0; /* hidden until hover */
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 10;
}

/* Rough placement for each label — tweak visually */
.left-text   { top: 57%; left: 6%; }
.right-text  { top: 60%; right: 10%; }
.top-text    { top: 20%; left: 60%; }
.middle-text { top: 45%; left: 35%; }

.desk-shadow {
  position: absolute;
  bottom: 65px; /* moves the shadow */
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 25px;
  background: rgba(0, 0, 0, 0.3);
  filter: blur(10px);
  border-radius: 50%;
  z-index: -1;
}

.floor {
  position: absolute;
  bottom: 0;
  left: -40%;
  width: 180%;
  height: 100%; /* height of the floor area */
  background-image: url('images/floor-tile.jpg');
  background-repeat: repeat;
  background-size: 200px 200px;
  transform-origin: bottom;
  transform: perspective(600px) rotateX(60deg);
  z-index: 0;
}

.computer {
  position: absolute;
  top: 35%;
  left: 48%;
  transform: translate(-50%, -50%);
  width: 320px;       /* desk size */
  height: 320px;
  background-image: url('images/retro-computer.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  z-index: 1;
  pointer-events: none;
}

.computer-active {
  position: absolute;
  top: 23%;     /* move within the computer image */
  left: 45%;
  width: 8%;   /* size of clickable region */
  height: 15%;
  cursor: pointer;
  pointer-events: auto;  /* this small area can receive clicks */
  /* For testing, make it visible: */
  outline: 3px solid limegreen; /* temporary guide */
  background: rgba(0, 255, 0, 0.1); /* translucent overlay, optional */
}

.mouse {
  position: absolute;
  top: 45%;
  left: 57%;
  width: 45px;
  height: 45px;
  background-image: url('images/mouse.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  z-index: 1;

  transform-origin: center center;    /* rotate around its own middle */
  transform: translate(-50%, -50%) rotate(0deg); 
  transition: transform 0.25s ease;   /* smooth tilt */
}

.mouse:hover {
  transform: translate(-50%, -50%) rotate(8deg);
}


/* ----------------------------
   Hover interactions (drawers + text)
---------------------------- */
.hover-left:hover ~ .left-drawer,
.hover-left:hover ~ .left-text,
.hover-right:hover ~ .right-drawer,
.hover-right:hover ~ .right-text,
.hover-top:hover ~ .top-drawer,
.hover-top:hover ~ .top-text,
.hover-middle:hover ~ .middle-drawer,
.hover-middle:hover ~ .middle-text {
  opacity: 1;
}