*{
  box-sizing:border-box;
}

body{
  margin:0;
  min-height:100vh;
  background:radial-gradient(circle at top,#46506a 0%,#202331 45%,#101118 100%);
  font-family:Arial, sans-serif;
  overflow:hidden;
}

.scene{
  width:100vw;
  height:100vh;
  position:relative;
}

.world{
  position:absolute;
  inset:0;
}

.room{
  position:absolute;
  top:11%;
  width:39%;
  height:58%;
  perspective:900px;
}

.room-left{ left:6%; }
.room-right{ right:6%; }

.room-floor{
  position:absolute;
  left:8%;
  bottom:0;
  width:84%;
  height:42%;
  background:linear-gradient(135deg,#7b5a3d,#3f2d22);
  transform:skewX(-18deg);
  box-shadow:0 25px 45px rgba(0,0,0,.45);
  border:2px solid rgba(255,255,255,.08);
}

.room-back{
  position:absolute;
  left:13%;
  top:0;
  width:74%;
  height:64%;
  background:linear-gradient(180deg,#5d6477,#303447);
  border:2px solid rgba(255,255,255,.12);
  box-shadow:inset 0 0 35px rgba(0,0,0,.35);
}

.room-side{
  position:absolute;
  top:7%;
  width:28%;
  height:58%;
  background:linear-gradient(180deg,#464c60,#252936);
  border:2px solid rgba(255,255,255,.08);
}

.side-left{
  left:0;
  transform:skewY(26deg);
}

.side-right{
  right:0;
  transform:skewY(-26deg);
}

.room-name{
  position:absolute;
  top:7%;
  left:50%;
  transform:translateX(-50%);
  min-width:120px;
  padding:7px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.13);
  color:#fff3ca;
  text-align:center;
  font-weight:700;
  outline:none;
  z-index:8;
  backdrop-filter:blur(6px);
}

.room-light{
  position:absolute;
  left:50%;
  top:36%;
  width:62%;
  height:42%;
  transform:translateX(-50%);
  background:radial-gradient(circle,rgba(255,232,140,.75),rgba(255,200,70,.22) 45%,transparent 72%);
  filter:blur(10px);
  opacity:0;
  pointer-events:none;
  transition:.25s;
  z-index:4;
}

.room.lit .room-light{
  opacity:1;
}

.door-button{
  position:absolute;
  right:10%;
  top:69%;
  z-index:20;
  border:none;
  border-radius:999px;
  padding:9px 14px;
  background:#ffd36a;
  color:#33230a;
  font-weight:800;
  box-shadow:0 8px 18px rgba(0,0,0,.35);
}

.door-place{
  position:absolute;
  left:50%;
  bottom:11%;
  width:82px;
  height:128px;
  transform:translateX(-50%);
  z-index:15;
}

.door-label{
  position:absolute;
  top:-27px;
  left:50%;
  transform:translateX(-50%);
  padding:4px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.45);
  color:#fff;
  font-size:13px;
  font-weight:700;
}

.door{
  position:absolute;
  left:0;
  bottom:0;
  width:82px;
  height:128px;
  background:linear-gradient(90deg,#7b3f21,#c98243);
  border:3px solid #2a160d;
  border-radius:7px 7px 2px 2px;
  transform-origin:left center;
  transition:.35s;
  box-shadow:0 18px 25px rgba(0,0,0,.45);
}

.door.open{
  transform:perspective(400px) rotateY(-67deg);
  filter:brightness(1.18);
}

.door-window{
  position:absolute;
  left:19px;
  top:18px;
  width:43px;
  height:35px;
  border-radius:6px;
  background:rgba(255,235,160,.35);
  border:2px solid rgba(255,255,255,.32);
}

.door-knob{
  position:absolute;
  right:10px;
  top:67px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#ffd36a;
}

.path{
  position:absolute;
  left:18%;
  bottom:10%;
  width:64%;
  height:17%;
  background:linear-gradient(90deg,rgba(160,120,70,.25),rgba(255,210,120,.25),rgba(160,120,70,.25));
  border-radius:50%;
  filter:blur(1px);
}

#player{
  position:absolute;
  left:50%;
  top:78%;
  width:48px;
  height:78px;
  transform:translate(-50%,-50%);
  touch-action:none;
  z-index:30;
  cursor:grab;
  transition:filter .2s, opacity .2s;
}

#player.inside{
  filter:drop-shadow(0 0 14px rgba(255,226,120,.9));
}

.head{
  position:absolute;
  top:0;
  left:10px;
  width:28px;
  height:28px;
  border-radius:50%;
  background:linear-gradient(#ffe0ba,#c88452);
  border:2px solid #3b2418;
}

.body{
  position:absolute;
  top:28px;
  left:7px;
  width:34px;
  height:48px;
  border-radius:16px 16px 8px 8px;
  background:linear-gradient(180deg,#67d2ff,#1f6aa0);
  border:2px solid #12324a;
}