body, html {
	margin: 0;
	padding: 0;
	overflow: hidden;
	height: 100%;
	background-color: black;
	perspective: 120vw;
	
	-webkit-transform:translate3d(0,0,0);
	-webkit-backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	
	touch-action: none;
	
	-webkit-user-select: none; /* Chrome, Safari, Opera */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* Internet Explorer/Edge */
    user-select: none;         /* Non-prefixed version, currently supported by most browsers */
}

#gameScene {
	position: relative;
	background-color:gray;
	background-image: url('');
	background-repeat: no-repeat;
	background-position: top left;
	overflow: hidden;
	width: 100vw;
	height: 100vh;
	transition: background-position 0s linear;
	
	-webkit-transform:translate3d(0,0,0);
	-webkit-backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	will-change: background-position;
}

.playerb {
	position: absolute;
	left:0px;
	top:0px;
	transition: left 0s, top 0s;
	/* 添加 will-change 屬性來優化動畫渲染 */
    will-change: left, top;
    /* 添加 backface-visibility，強制 Safari 進行更好的渲染處理 */
    backface-visibility: hidden;
    /* 可選：也可以添加 perspective 來觸發 3D 渲染，加強對動態效果的處理 */
	z-index:1500;
}

.player {
	position: absolute;
	left:0px;
	top:0px;
	width: 70px;
	height: auto;
	transition: left 0s, top 0s;
	filter: drop-shadow(1px 3px 2px rgba(0, 0, 0, 1));
	/* 添加 will-change 屬性來優化動畫渲染 */
    will-change: transform, left, top;
    /* 添加 backface-visibility，強制 Safari 進行更好的渲染處理 */
    backface-visibility: hidden;
    /* 可選：也可以添加 perspective 來觸發 3D 渲染，加強對動態效果的處理 */
}

.player-name {
    position: absolute;
    transform: translate(-50%, -230%);
    width: auto; /* 使用 auto，讓寬度自動調整 */
    max-width: 300px; /* 限制最大寬度 */
    text-align: center;
    color: white;
    white-space: nowrap;
    font-size: 15px;
    z-index: 10;
    border: 2px solid yellow;
    border-radius: 5px;
    padding: 5px;
    background-color: rgba(0, 0, 0, 0.7);
    box-shadow: 0px 0px 10px rgba(255, 255, 0, 0.8);
	overflow:hidden;

    /* 添加 will-change 屬性來優化動畫渲染 */
    will-change: transform, width;
    /* 添加 backface-visibility，強制 Safari 進行更好的渲染處理 */
    backface-visibility: hidden;
    /* 可選：也可以添加 perspective 來觸發 3D 渲染，加強對動態效果的處理 */
}

.player-img {
	position:absolute;
	transform: translate(-50%, -50%);   	
	-webkit-backface-visibility: hidden;

}


.portal {
	width: 80px;
	height: 80px;
	border-radius: 50%; /* 圆形 */
	background-color: rgba(0, 255, 255, 0.5); /* 蓝绿色，带点透明感 */
	border:2px solid rgba(0, 255, 255, 0.7);
	position: absolute;
	left: var(--relativeExitX); /* 使用相对位置计算 */
	top: var(--relativeExitY);  /* 使用相对位置计算 */
	cursor: pointer;
	z-index: 999; /* 确保在前面显示 */
	transition: left var(--duration) linear, top var(--duration) linear, transform 0.2s;
	box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.5); /* 阴影效果，模拟贴地效果 */
	transform: rotateX(60deg); /* 轻微翻转，产生贴地透视感 */
	animation: pulseEffect 2s infinite ease-in-out;
}

.portal-custom {
	position: absolute;
	left: var(--relativeExitX); /* 使用相对位置计算 */
	top: var(--relativeExitY);  /* 使用相对位置计算 */
	cursor: pointer;
	z-index: 999; /* 确保在前面显示 */
}

@keyframes pulseEffect {
	0% {
		transform: rotateX(60deg) scale(1); /* 初始大小 */
		opacity: 0.1; /* 初始半透明 */
	}
	50% {
		transform: rotateX(60deg) scale(1.2); /* 放大到1.2倍 */
		opacity: 1; /* 完全不透明 */
	}
	100% {
		transform: rotateX(60deg) scale(1); /* 返回初始大小 */
		opacity: 0.1; /* 返回半透明 */
	}
}

.portal-object {
	position: absolute;
	left: var(--relativeExitX); /* 使用相对位置计算 */
	top: var(--relativeExitY);  /* 使用相对位置计算 */
	cursor: pointer;
	z-index: 999; /* 确保在前面显示 */
}


.npc {
	position: absolute;
	height: auto;
	filter: drop-shadow(5px 5px 3px rgba(0, 0, 0, 0.8));
	cursor: pointer;
}

.npc-custom {
	position: absolute;
	cursor: pointer;
}

.npc-name {
	position: absolute;
	top: -50px;
	left: 10px;
	width: 100%;
	text-align: center;
	color: white;
	white-space: normal; /* 修改為允許換行 */
	font-size: 15px;
	z-index: 10;

	/* 新增部分 */
	border: 2px solid yellow;      /* 邊框，使用醒目的顏色，例如黃色 */
	border-radius: 5px;            /* 圓角邊框 */
	padding: 5px;                  /* 內部留白讓內容不緊貼邊框 */
	background-color: rgba(0, 0, 0, 0.7); /* 半透明的背景來突出文字 */
	box-shadow: 0px 0px 10px rgba(255, 255, 0, 0.8); /* 發光的陰影，黃色 */
}




/* #coordinates 元素根据屏幕宽度动态调整 */
#coordinates {
    position: absolute;
    width: clamp(150px, 18%, 300px); /* 最小宽度150px，最大宽度300px，默认18% */
    top: 10px;
    left: 10px;
    z-index: 10;
    background-color: #00000044;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.8);
    border-radius: 10px;
    border: 3px solid #00000099;
    height: auto;
    padding-bottom: 5px;
	left: -150px; /* 初始狀態隱藏在螢幕外 */
	transition: left 0.3s ease-in-out;
}

/* coords-display 跟随 #coordinates */
#coordinates #miniMap .coords-display {
    position: absolute;
    top: 5px;  
    left: 5px;
    background-color: rgba(255, 255, 255, 0.8); 
    padding: 5px;
    border-radius: 3px;
    font-size: clamp(13px, 3vw, 15px); /* 根据屏幕调整字体，最大16px，最小10px */
    color: black;
    border: 1px solid #00000099;
    z-index: 11;
}

/* miniMap 根据 #coordinates 自动调整 */
#coordinates #miniMap {
    position: relative;
    border: 2px solid #000000;
    width: 90%; /* 使用百分比，相对 #coordinates 的宽度 */
    max-width: 270px; /* 限制最大宽度 */
    min-width: 120px; /* 限制最小宽度 */
    margin-top: 5px;
    background-color: gray;
    border-radius: 5px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    max-width: 100%;
}

/* 玩家红点 */
#playerDot {
    position: absolute;
    width: 7px;
    height: 7px;
    background-color: red;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}








/* 玩家行走動畫 */
@keyframes walk {
    0% { transform: translate(-50%, -65%) scaleY(0.9); }
    50% { transform: translate(-50%, -50%) scaleY(1); }
    100% { transform: translate(-50%, -65%) scaleY(0.9); }
}


.event-container {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1001;
	display: none;
}




#messageBox {
	position: fixed;
	bottom: -200px; /* 初始狀態隱藏在螢幕外 */
	right: 0px;
	transform: translateX(-2%);
	z-index: 1002;
	display: block;
	align-items: center;
	width: 95.6%; /* 設定寬度為螢幕的 90% */
	max-width: 400px; /* 最大寬度 600px */
	transition: bottom 0.3s ease-in-out;
	
	-webkit-backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	will-change: bottom;
}

#inputBox {
	position: relative;
	width: 100%; /* 確保 inputBox 佔滿父容器 */
	z-index: 1002;
	display: flex;
	align-items: center;
	justify-content: center; /* 置中內容 */
}

#chatLog {
    position: relative;
    width: 100%;
    max-height: 200px;  /* 最大高度 */
    height: calc(2 * 1.8rem + 2rem); /* 初始高度，顯示兩行 */
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border-radius: clamp(5px, 1vw, 5px); /* 使用 clamp 調整圓角 */
    padding: 1vw;
    overflow-y: auto;  /* 當內容超出時滾動 */
    font-size: clamp(14px, 2.5vw, 18px);  /* 使用 clamp 設置字體大小 */
    margin-bottom: clamp(2px, 2vw, 4px); /* 動態設置 margin-bottom */
    transition: height 0.3s ease;
    box-sizing: border-box;
	
	//-webkit-transform:translate3d(0,0,0);
	-webkit-backface-visibility: hidden;
	//-webkit-transform-style: preserve-3d;
	will-change: height;
}



/* 縮放按鈕，固定在右上角 */
#toggleSizeButton {
    position: fixed;
    top: -50px;  /* 固定在視窗的上方 */
    right: 70px;  /* 固定在視窗右側 */
    z-index: 1000;  /* 確保按鈕在最上層 */
    cursor: pointer;
    background-color: #00000099;
    border: none;
    font-size: clamp(12px, 5vw, 16px);  /* 調整 clamp 中間值為 2vw */
    color: white;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);  /* 添加陰影效果 */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;

    /* 為了讓文字水平垂直居中 */
    display: none;
    justify-content: center;
    align-items: center;

    /* 固定按鈕的大小 */
    height: 40px;
    width: 40px;
	
	-webkit-transform:translate3d(0,0,0);
	-webkit-backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	will-change: background-color, box-shadow;
}



#toggleSizeButton:hover {
    background-color: #000000BB;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);  /* 當鼠標懸停時加強陰影 */
}






.chat-log .chat-message {
	margin-bottom: 5px;  /* 每條訊息之間的間距 */
}

#userMessage {
	flex: 1;  /* 讓文本框佔滿剩餘空間 */
	padding: 10px;
	border-radius: 5px;
	border: 2px solid #00000099; /* 淺藍色偏深的邊框 */
	background-color: white; /* 白色背景 */
	box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* 輕微的陰影效果 */
	font-size: 16px; /* 調整字體大小 */
	box-sizing: border-box; /* 確保 padding 不影響寬度 */
	transition: all 0.3s ease; /* 過渡效果 */
	
	-webkit-transform:translate3d(0,0,0);
	-webkit-backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	will-change: all;
}

#userMessage:focus {
	border-color: #000000BB; /* 聚焦時更亮的邊框 */
	outline: none;
}

#sendMessage {
	margin-left: 10px;
	padding: 10px 20px;
	background-color: #00000099; /* 淺藍色偏深的背景色 */
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* 輕微的陰影效果 */
	font-size: 16px; /* 調整字體大小 */
	transition: background-color 0.3s ease; /* 添加過渡效果 */
	
	-webkit-transform:translate3d(0,0,0);
	-webkit-backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	will-change: background-color;
}

#sendMessage:hover {
	background-color: #000000BB; /* 當鼠標懸停時變亮 */
}






.event-container {
	position:fixed;
	z-index:10000;
}


#toggleCoordinates, #toggleMessageBox, #saveButton, #lockButton {
    position: fixed;
    z-index: 100; /* 確保按鈕在最前面 */
    background-color: #4682B4;
    color: white;
    padding: 6px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
	font-size: clamp(10px,5vw,20px);
}

#toggleCoordinates {
    top: 10px;
    left: 10px;
	transition: left 0.3s ease-in-out,background-color 0.3s ease, box-shadow 0.3s ease;
	background-color: #00000099;
	height: 40px;
    width: 40px;
	font-size: clamp(12px, 5vw, 16px);
	
	-webkit-transform:translate3d(0,0,0);
	-webkit-backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	will-change: left, box-shadow, background-color;
}


#toggleCoordinates:hover {
    background-color: #000000BB;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);  /* 當鼠標懸停時加強陰影 */
}

#toggleMessageBox {
    position: fixed;
    top: -50px;  /* 固定在視窗的上方 */
    right: 20px;  /* 固定在視窗右側 */
    z-index: 1000;  /* 確保按鈕在最上層 */
    cursor: pointer;
    background-color: #00000099;
    border: none;
    font-size: clamp(12px, 5vw, 16px);  /* 調整 clamp 中間值為 2vw */
    color: white;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);  /* 添加陰影效果 */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;

    /* 為了讓文字水平垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;

    /* 固定按鈕的大小 */
    height: 40px;
    width: 40px;
	
	-webkit-transform:translate3d(0,0,0);
	-webkit-backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	will-change: background-color, box-shadow;
}

#toggleMessageBox:hover {
    background-color: #000000BB;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);  /* 當鼠標懸停時加強陰影 */
}



#saveButton {
	display:none;
    top: 100px;
    left: 10px;
	transition: left 0.3s ease-in-out,background-color 0.3s ease, box-shadow 0.3s ease;
	background-color: #00000099;
	height: 40px;
    width: 40px;
	font-size: clamp(12px, 5vw, 16px);
	
	-webkit-transform:translate3d(0,0,0);
	-webkit-backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	will-change: left, box-shadow, background-color;
}

#saveButton:hover {
    background-color: #000000BB;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);  /* 當鼠標懸停時加強陰影 */
}



#lockButton {
    top: 55px;
    left: 10px;
	transition: left 0.3s ease-in-out,background-color 0.3s ease, box-shadow 0.3s ease;
	background-color: #00000099;
	height: 40px;
    width: 40px;
	font-size: clamp(12px, 5vw, 16px);
	
	-webkit-transform:translate3d(0,0,0);
	-webkit-backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	will-change: left, box-shadow, background-color;
}

#lockButton:hover {
    background-color: #000000BB;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);  /* 當鼠標懸停時加強陰影 */
}




/* 設定 menu 的樣式，並限制最大寬度 */
#menu {
    position: fixed;
    top: 10px;
    right: -200px; /* 初始隱藏在螢幕外 */
    width: clamp(150px, 20%, 200px); /* 根據螢幕自適應大小，最大寬度限制為300px */
    background-color: #00000044;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    padding: clamp(10px, 1.5vw, 15px); /* 調整內部間距，避免過大 */
    border-radius: 10px;
    border: 3px solid #00000099; /* 與 coordinates 相同的藍色邊框 */
    transition: right 0.3s ease-in-out;
    z-index: 1001; /* 確保顯示在前面 */
    max-height: 80vh; /* 防止面板過高 */
    overflow-y: auto; /* 如果面板過高，允許滾動 */
	
	-webkit-transform:translate3d(0,0,0);
	-webkit-backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	will-change: right;
}

#menuItems {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1vw, 10px); /* 動態間距，最大間距限制為10px */
}

/* 統一設置 menu 內部選項的樣式，並限制最大按鈕大小 */
.menu-item {
    background-color: #000000;
    color: white;
    padding: clamp(8px, 1vw, 12px); /* 動態間距，最大間距限制為12px */
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    font-size: clamp(12px, 4vw, 16px); /* 動態字體大小，最大限制為16px */
	font-weight:bold;
    transition: background-color 0.3s ease;
	
	-webkit-transform:translate3d(0,0,0);
	-webkit-backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	will-change: background-color;
}

.menu-item:hover {
    background-color: #000000DD;
}

/* 調整控制 menu 按鈕的大小，限制最大按鈕大小 */
#toggleMenuButton {
    position: fixed;
	top: 10px;
	right: 10px;
	background-color: #00000099;
	color: white;
	padding: clamp(4px, 1vw, 7px); /* 动态间距，最大间距限制为10px */
	border: none;
	border-radius: 5px;
	cursor: pointer;
	box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
	font-size: clamp(15px, 8vw, 20px); /* 动态字体大小，最大限制为18px */
	transition: background-color 0.3s ease, right 0.3s ease-in-out, box-shadow 0.3s ease;
	z-index: 1002; /* 确保按钮显示在 menu 面板上方 */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);  /* 添加阴影效果 */
	height: 40px;
	width: 40px;

	/* 新增的内容，使文字垂直和水平居中 */
	display: flex;
	align-items: center;
	justify-content: center;

	-webkit-transform: translate3d(0,0,0);
	-webkit-backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	will-change: background-color, right, box-shadow;

}

#toggleMenuButton:hover {
    background-color: #000000BB;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);  /* 當鼠標懸停時加強陰影 */
}







#imageDisplay {
    display: none;
    position: relative;
    z-index: 1000;
	width: 400%;
}

.image-container {
	height:200px;
	width:200px;
    position: absolute;
    margin: 0;
}

.npc-custom {
	position: absolute;
	cursor: pointer;
}


.controls-panel {
    display: none;
    position: fixed;
    width: 224px;  /* 280px 的 20% 減少 */
    padding: 8px;  /* 10px 的 20% 減少 */
    background: #00000099;
    border-radius: 4px;  /* 5px 的 20% 減少 */
    z-index: 1002;
}

.control-group {
    display: flex;
    align-items: center;
    margin-bottom: 6.4px;  /* 8px 的 20% 減少 */
}

.control-group label {
    margin-right: 4px;  /* 5px 的 20% 減少 */
    font-size: 20px;  /* 25px 的 20% 減少 */
    font-weight: bold;
    color: #FFFFFF;
}

.range-input {
    width: 123.2px;  /* 154px 的 20% 減少 */
}

#deleteButton {
    position: relative;
    background-color: #dc3545;
    color: white;
    border-radius: 4px;  /* 5px 的 20% 減少 */
    border: none;
    cursor: pointer;
    height: 28px;  /* 35px 的 20% 減少 */
    font-size: 17.6px;  /* 22px 的 20% 減少 */
    float: right;
}

#deleteButton:hover {
    background-color: #c82333;
}

#moveForwardButton, #moveBackwardButton {
    background-color: #28a745;
    color: white;
    border-radius: 4px;  /* 5px 的 20% 減少 */
    border: none;
    cursor: pointer;
    height: 28px;  /* 35px 的 20% 減少 */
    font-size: 17.6px;  /* 22px 的 20% 減少 */
}

#moveForwardButton:hover, #moveBackwardButton:hover {
    background-color: #218838;
}












/* 全螢幕遮罩 */
#loginPanel {
	display:none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 黑色背景，透明度0.5 */
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

/* 登入容器 */
.login-container {
    width: 90%; /* 預設寬度 */
    max-width: 400px; /* 最大寬度限制 */
    background-color: #3c3f42;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.7), 
                inset 0px 2px 8px rgba(255, 255, 255, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
	transform: translateY(-10px);
}



/* 登入上半部 */
.login-header {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #202123;
    padding: 20px;
}

.login-header img {
    max-width: 100%;
    height: auto;
}

/* 登入下半部 */
.login-body {
    width: 100%;
    padding: 20px;
    background-color: #3c3f42;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-grow: 1; /* 讓內容填滿可用空間 */
    box-sizing: border-box;
    text-align: center; /* 確保文字置中對齊 */
}



/* 表單輸入框 */
.login-body input {
    max-width: 400px;
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    background-color: #555;
    color: white;
    margin-bottom: 10px;
    margin-top: 0px;
    width: 100%;
    box-sizing: border-box;
}

.login-body input::placeholder {
    color: #aaa;
}

/* 登入按鈕 */
.login-body button {
    width: auto; /* 讓按鈕根據內容大小調整 */
    min-width: 150px; /* 最小寬度，避免過度縮小 */
    max-width: 200px; /* 最大寬度，確保不會過大 */
    padding: 12px;
    background-color: #2c2c2e;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-top: 15px;
    box-sizing: border-box;
    white-space: nowrap; /* 確保文字不換行 */
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
	margin-top: 0px;
}

/* 按鈕懸停效果 */
.login-body button:hover {
    background-color: #4d4d4d;
    transform: scale(1.05);
}

/* 小螢幕適配 */
@media (max-width: 600px) {
    .login-container {
        width: 95%;
        border-radius: 8px;
    }

    .login-body input {
        width: 90%;
    }

    .login-body button {
        width: 80%; /* 讓按鈕隨畫面縮小 */
        max-width: 200px; /* 確保按鈕不會超過最大寬度 */
        min-width: 150px; /* 確保按鈕不會變得太小 */
        font-size: 16px; /* 確保字體不會太大影響佈局 */
    }
}








/* Disable selection of all elements */
* {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* Internet Explorer/Edge */
    user-select: none;         /* Standard */
}