/* page base */

html, body{
  height:100%;
  margin:0;
  overflow:hidden;                  /* no scrollbar */
  font-family:"IM Fell English", serif;
  color:#f1e9da;
  cursor:url('Asylum/Assets/pencilcursor.png') 6 24, auto;
  background:#0f0e0d;               /* fallback if image fails */
}

/* full-bleed background */
.scene{
  position:fixed;
  inset:0;
  min-height:100vh;
  background:url("/Asylum/Assets/1st hallway-open-doors.jpg")
             center/cover no-repeat;
  overflow:hidden;
  perspective:1200px;               /* for door hinge 3D */
}

/* generic hotspot */
.hotspot{
  position:absolute;
  display:block;
  cursor:pointer;
  /* outline:1px dashed rgba(255,255,255,.4);  // helpful while aligning */
}

/* doors — tweak these to line up with the image */
.door{ width:320px; height:540px; top:160px; }
.door-p{ left:10px; }               /* left door */
.door-b{ left:820px; }              /* right door */

/* spiral stairs click */
.stairs{ right:20px; top:30px; width:336px; height:510px; }

/* mailboxes */
.mail{ width:100px; height:160px; top:360px; }
.mail-right{
  right:382px;
  background:transparent;
  border:none;
  z-Index: 99999;
}

/* hover glow */
.hotspot:hover{ filter: drop-shadow(0 0 12px rgba(255,255,220,.45)); }

/* tooltip */
.tip{
  position:fixed;
  pointer-events:none;
  transform:translate(-50%,-130%);
  padding:.35rem .55rem;
  background:#fffdf6;
  color:#2b2b2b;
  border:2px solid #cbbca1;
  box-shadow:3px 3px 0 rgba(0,0,0,.35);
  border-radius:8px;
  font-size:14px;
  opacity:0;
  transition:opacity .15s ease, transform .15s ease;
  z-index:999;
}
.tip.show{ opacity:1; transform:translate(-50%,-140%); }

/* click ripple */
.hotspot:active{ filter: drop-shadow(0 0 16px rgba(255,255,220,.7)); }

/* DOOR PANEL (swing animation) */
.door-b .door-panel{
  position:absolute;
  inset:0;
  background:url("/Asylum/Assets/Brenna-door.png");       /* swap to door PNG if you have one */
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);
  transform-style:preserve-3d;
  transition:transform .9s ease;
  will-change:transform;
  z-index: 99;
  top:-64px;
  width:360px;
  height: 1800px;
  left:-70px;
  
}
.door-p .door-panel{
  position:absolute;
  inset:0;
  background:url("/Asylum/Assets/Penelope-door.png");       /* swap to door PNG if you have one */
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);
  transform-style:preserve-3d;
  transition:transform .9s ease;
  will-change:transform;
  z-index: 99;
  top:-64px;
  width:330px;
  height: 1800px;
  left: -20px;
}
.door-p .door-panel{ transform-origin:left center;  }
.door-b .door-panel{ transform-origin:left center; }

.door-p.open .door-panel{ transform:rotateY(-92deg); }
.door-b.open .door-panel{ transform:rotateY(-92deg); }    /* right door */

/* spiral stairs click */
.stairs{ right: 20px; top: 30px; width: 336px; height: 510px; }

/* mailboxes */
.mail{ width:100px; height:160px; top:360px; }
.mail-right{ right: 382px; 
background: transparent;
border:none;   
}

/* subtle hover glow */
.hotspot:hover{ filter: drop-shadow(0 0 12px rgba(255,255,220,.45)); }

/* tooltip */
.tip{
  position:fixed;
  pointer-events:none;
  transform:translate(-50%,-130%);
  padding:.35rem .55rem;
  background:#fffdf6;
  color:#2b2b2b;
  border:2px solid #cbbca1;
  box-shadow:3px 3px 0 rgba(0,0,0,.35);
  border-radius:8px;
  font-size:14px;
  opacity:0;
  transition:opacity .15s ease, transform .15s ease;
  z-index:999;
}
.tip.show{ opacity:1; transform:translate(-50%,-140%); }

/* click ripple (nice feedback) */
.hotspot:active{ filter: drop-shadow(0 0 16px rgba(255,255,220,.7)); }
/* give the 3D perspective for hinge effect */
.scene { perspective: 1200px; }

/* base door hotspot (already have top/left/width/height set) */
.door {
  position: absolute;
  display: block;
  /* optional outline while aligning:
  outline: 1px dashed rgba(255,255,255,.25);
  */
}

/* nice hover glow */
.door:hover .door-panel{
  filter: drop-shadow(0 0 12px rgba(255,255,220,.45));
}

/* Arrow buttons */
.arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  user-select: none;
}

.arrow img {
  width: 97px;      /* adjust size */
  display:block;
  opacity: 0.9;
  transition: transform 0.2s ease, opacity 0.2s ease;
  cursor: pointer;
}

/* hover effect */
.arrow img:hover {
  opacity: 1;
  transform: scale(1.05) rotate(-2deg);
}


/* left button placement */
.arrow.left {
  left: 20px; 
}