body {
  background: url('/images/mewindow.jpg') top center / 100% auto no-repeat;
  margin: 0;
  position: relative; 
  width: 100vw;
  height: 75vw; 
}

.welcome-box {
  position: absolute;
  bottom: 10%;
  left: 2%;
  padding: 1.5vw;
  border-radius: 10px; 
  width: 15vw;       
  max-width: 220px;
  font-size: 1.2vw; 
}
.welcome-message {  
  font-family: 'DotGothic16', Courier, monospace;  
  color: white;
}

.head-click {
  display: block; 
  position: absolute;
  cursor: pointer; 
  bottom: 24vw; 
  left: 26vw;    
  
  width: 6.4vw;   
  height: 6.5vw;  
}
.popup{
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
    
  position: absolute;
  bottom: 90%;    
  left: 40%;
  transform: translateX(40%); 

  width: 3vw;
  min-width: 120px;   
  pointer-events: none; 
}
.head-click:hover .popup {
    opacity: 1;
}


#chat-container {
  position: absolute;     
  top: 14vw;          
  left: 36.7vw;              
  
  width: 21.2vw;             
  min-width: 200px;
  max-height: 28vw;       
  
  background: transparent;
  border: 0.15vw solid #65084463; 
  box-shadow: 0 0.5vw 1.5vw rgba(0,0,0,0.15);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: DotGothic16, Courier, monospace;
}
#chat-header {
  background: #ca92a8c7; 
  color: #ffffff;
  padding: 0.5vw 0.8vw;     
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: move; 
  user-select: none;
}
.chat-title {
  font-size: 1vw;        
  font-weight: bold;
  text-shadow: 1px 1px 0px rgba(0,0,0,0.2);
  letter-spacing: 0.2vw;
}
.chat-controls {
  display: flex;
  gap: 0.4vw;
}
.win-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.4);
  color: white;
  width: 1.3vw;            
  height: 1.3vw;
  min-width: 16px;
  min-height: 16px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7vw;
  line-height: 1;
  padding: 0;
  transition: all 0.1s ease;
}
.win-btn:hover {
  background: rgba(247, 249, 248, 0.011);
}
#chat-body {
  height: 34.5vw;   
  width: 100%;
  background: #ae111110;
  overflow: hidden;
  display: none; 
}

.sticker-1 {
  display: block; 
  position: absolute;
  cursor: pointer; 
  bottom: 32.3vw; 
  left: 8vw;    
  width: 4vw;   
  transition: transform 0.2s ease-in-out;
}
.sticker-1 img {
  width: 100%;
  height: auto;
  display: block;
  transition: filter 0.2s ease-in-out; 
}
.sticker-1:hover img {
  filter: brightness(1.3);
}

.sticker-1:hover {
  transform: translateY(-0.2vw); 
}

.sticker-2 {
  display: block; 
  position: absolute;
  cursor: pointer; 
  bottom: 30vw; 
  right: 17vw;    
  width: 13vw;   
  transition: transform 0.2s ease-in-out;
}
.sticker-2 img {
  width: 100%;
  height: auto;
  display: block;
  transition: filter 0.2s ease-in-out; 
}
.sticker-2:hover img {
  filter: brightness(1.3);
}
.sticker-2:hover {
  transform: translateY(-0.2vw); 
}

.sticker-3 {
  display: block; 
  position: absolute;
  cursor: pointer; 
  bottom: 22vw; 
  right: 34vw;    
  width: 11vw;   
  transition: transform 0.2s ease-in-out;
}
.sticker-3 img {
  width: 100%;
  height: auto;
  display: block;
  transition: filter 0.2s ease-in-out; 
}
.sticker-3:hover img {
  filter: brightness(1.3);
}
.sticker-3:hover {
  transform: translateY(-0.2vw); 
}
 


.music-container {
  position: absolute;
  
  top: 28vw;          
  left: 36.4vw;  
  
  width: 21.5vw;               
  z-index: 999;
  
  -webkit-user-select: none;
  -ms-user-select: none;     
  user-select: none;         
}
.music-container .window {
  background: #ca92a8c7;;    
  border: 2px solid #ffffffa0;
  padding: 0.5vw;
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.2);
}
.music-container .title-bar {
  background: #ad7c8f83;;
  color: #ffffff;           
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.3vw 0.6vw;
  cursor: move;              
  font-family: 'DotGothic16', Courier, monospace;
  font-size: 1vw;
  font-weight: bold;
  letter-spacing: 0.1vw;
}
.music-container .title-bar-controls {
  display: flex;
  gap: 0.3vw;
}

.music-container .window-body {
  margin-top: 0.5vw;
}
.music-container .flex {
  display: flex;
  gap: 0.8vw;
  align-items: center;
}

#image-style .ic {
  border: 2px solid #ffffff;
  border-radius: 4px;
  display: block;
  width: 6vw;
  height: 6vw;
}
.musicplayer {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4vw;
  min-width: 0;   
}
.songtitlewindow {
  background: rgba(25, 256, 256, 0.15);
  border: 1px solid #ffffff;
  padding: 0.2vw 0.4vw;
  border-radius: 4px;
  width: 100%;              
  box-sizing: border-box;  
  overflow: hidden;   
}
.songtitle {
  font-family: 'DotGothic16', Courier, monospace;
  font-size: 0.9vw;
  color: #ffffff;
   width: 100%;
  white-space: nowrap;     
  overflow: hidden;         
}

.volume-control {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'DotGothic16', Courier, monospace;
  font-size: 0.8vw;
  color: #ffffff;
}
.volume-slider {
  flex-grow: 1;
  margin: 0 0.5vw;
  cursor: pointer;
  width: 100%;           
  box-sizing: border-box;
  overflow: hidden;   
}
.controls {
  display: flex;
  justify-content: center;
  gap: 0.8vw;
}
.player-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
}
.controlimg {
  width: 1.5vw;
  height: 1.5vw;
  transition: transform 0.1s ease;
}
.player-btn:active .controlimg {
  transform: scale(0.9);    
}