/* 全局重置 */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: sans-serif;
}

.menu::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	z-index: -1;
	/* 不要蓋到內容 */
}

.menu-links .btn {
	display: block;
	width: 194px;
	height: 76px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	cursor: pointer;

}

@media (max-width: 1200px) {
	.menu-toggle {
		color: #FFE083;
		display: block !important;
		margin-left: auto;
		z-index: 1000;
		cursor: pointer;
	}

	.menu-links {
		display: flex;
		/* 必須為 flex 才能排成一列 */
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		flex-direction: column;
		align-items: center;
		padding: 50px 0;
		gap: 12px;
		background-color: rgba(28, 29, 41, 0.9);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);

		transform: translateY(-100%);
		opacity: 0;
		transition: transform 0.4s ease, opacity 0.3s ease;
		z-index: 998;
		pointer-events: none;
		/* 隱藏時不可點擊 */
	}

	.menu-links.show {
		transform: translateY(0);
		opacity: 1;
		pointer-events: auto;
	}
}

/* 返回頂部按鈕 */
.backtop {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 104px;
	height: 104px;
	background-image: url("/img/backtop.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	border: none;
	cursor: pointer;
	z-index: 999;
	opacity: 0;
	pointer-events: none;
	transition: transform 0.3s ease, opacity 0.3s ease;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}

.backtop.show {
	opacity: 1;
	pointer-events: auto;
}

@media (hover: hover) and (pointer: fine) {
	.backtop:hover {
		transform: scale(0.95);
	}
}

@media (hover: none),
(max-width: 768px) {
	.backtop {
		width: 56px;
		height: 56px;
	}

	.backtop:active {
		transform: scale(0.85);
	}
}

/* LOGO 樣式 */
.logo-link {
	display: inline-block;
}

.AvectorLOGO {
	height: 100%;
	max-height: 60px;
	display: block;
	object-fit: contain;
}

@media (max-width: 768px) {
	.AvectorLOGO {
		max-height: 40px;
	}
}

/* 排行榜內容區塊 */
.rank-content {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	/* 讓子元素靠頂部對齊 */
	padding: 0 20%;
	position: relative;
	/* 為彈出選單定位 */
}

.rank-num {
	width: 10%;
}

/*左側欄位容器*/
.rank-left-column {
	display: flex;
	flex-direction: column;
	/* 垂直堆疊小熊和 Tab */
	align-items: center;
	/* 水平置中小熊和 Tab */
	padding-right: 10px;
	/* 與 rank-table 的間距 */
	margin-right: 20px;
	/* 與表格的間距 */
}

/* 小熊圖片容器 */
.rank-bear-img-container {
	margin-bottom: 0;
	/* 移除底部間距 */
}

.rank-bear-img-container img {
	display: block;
	/*vertical-align: top;*/
}

/* 桌機版 Tab 列表 */
.rank-tab {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	/* 從頂部開始排列 */
	align-items: center;
	margin-top: 0;
	/* 確保頂部沒有額外邊距 */
	padding-top: 0;
	/* 確保頂部沒有額外內邊距 */
}

/* rank-tab 中的每個 Tab 樣式 */
.rank-tab .tab {
	min-width: 210px;
	min-height: 40px;
	border-radius: 10px;
	background: #9CCBF1;
	/* 預設背景色 */
	margin-top: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	cursor: pointer;
	transition: background-color 0.3s ease;
	user-select: none;
	position: relative;
	/* 為了疊加文字 */
	overflow: hidden;
	/* 隱藏超出邊界的文字 */
	padding-right: 20px;
	/* 為箭頭預留空間 */
}

/* 雙層文字效果 */
.rank-tab .tab .stroke,
.rank-tab .tab .fill {
	position: absolute;
	font-size: 1.6em;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -55%);
	white-space: nowrap;
	/* 防止文字換行 */
}

.rank-tab .tab .stroke {
	color: transparent;
	-webkit-text-stroke: 5px #224C74;
	/* 外框顏色和寬度 */
	/*text-stroke: 5px #224C74;*/
	/* 標準屬性 */
}

.rank-tab .tab .fill {
	color: #FFFCEF;
	/* 預設填充顏色 */
}

/* 第一個 Tab 不要有上邊距 */
#tab1 {
	margin-top: 0;
}

/* 被選中時的樣式 */
.rank-tab .tab.selected {
	background: linear-gradient(to top, #2386DD, #2DBEEE) !important;
	/* 選中時漸層背景色，增加 !important */
}

.rank-tab .tab.selected .fill {
	color: #FEFF54 !important;
	/* 選中時填充顏色，增加 !important 提高優先級 */
}

/* 被選中時的箭頭樣式 */
.rank-tab .tab .selection-arrow {
	display: none;
	/* 預設隱藏 */
	position: absolute;
	right: 3px;
	/* 距離右邊緣 */
	top: 50%;
	transform: translateY(-50%);
	color: #FEFF54;
	/* 箭頭顏色 */
	font-size: 1.2em;
	/* 箭頭大小 */
}

.rank-tab .tab.selected .selection-arrow {
	display: block;
	/* 選中時顯示 */
}

/* 排行榜表格樣式 */
.rank-table {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex-grow: 1;
	padding-bottom: 3%;
	min-width: 700px;
}

.table-container {
	width: 100%;
}

.table-container table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	border: 3px solid #085CA6;
}

/* 表格標題列樣式 */
.table-container tr:first-child td {
	background-color: #2386DD;
	/* 標題列背景色 */
}

/* 表格單元格 (th, td) 的基礎樣式 */
.table-container th,
.table-container td {
	padding: 8px 1px;
	background-color: #FFFCEF;
	/* 單元格背景色 */
	text-align: center;
	border: 1.5px solid #0080BD;
	/* 確保邊框存在 */
	white-space: nowrap;
	/* 禁止文字換行 */
}

/* 表格標題的雙層文字樣式 */
#current-rank-title {
	position: relative;
	/* 為了內部 span 的絕對定位 */
	overflow: hidden;
	/* 隱藏超出範圍的內容 */
	padding: 25px;
	/* 保持與其他 td 相同的內邊距 */
}

#current-rank-title .stroke-title,
#current-rank-title .fill-title {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	white-space: nowrap;
	font-size: 1.5em;
	/* 應用原始的字體大小 */
	font-weight: bold;
	/* 應用原始的字體粗細 */
	line-height: 1;
	/* 防止額外的行高影響定位 */
}

#current-rank-title .stroke-title {
	color: transparent;
	-webkit-text-stroke: 5px #0E3F6D;
	/* 外框顏色和寬度 */
	/*text-stroke: 5px #0E3F6D;*/
}

#current-rank-title .fill-title {
	z-index: 2;
	color: #FFFCEF;
	/* 填充顏色 (白色) */
}

/* 手機版自訂下拉選單的 wrapper */
.mobile-rank-select-wrapper {
	display: none;
	min-width: 204px;
	min-height: 40px;
	border-radius: 10px;
	background: linear-gradient(to top, #2386DD, #2DBEEE);
	/* 手機版預設和選中都使用漸層色 */
	margin-top: 0;
	margin-bottom: 3%;
	position: relative;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	cursor: pointer;
	transition: background-color 0.3s ease;
	user-select: none;
	padding-right: 30px;
	/* 為自訂箭頭預留空間 */
}

/* 隱藏原生 select 樣式 */
#mobile-rank-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background: transparent;
	border: none;
	padding: 0 10px;
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	color: transparent;
	/* 將原生 select 的文字顏色設為透明 */
	cursor: pointer;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	/* 確保在最上層可點擊 */
	text-align: center;
	text-align-last: center;
}

#mobile-rank-select option {
	background-color: #ffffff;
	/* 選項背景色 */
	color: #333333;
	/* 選項文字顏色 */
}

/* 手機版顯示選中文字的元素樣式 */
.mobile-rank-selected-text-container {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	pointer-events: none;
	/* 讓點擊穿透到下方的 select */
	z-index: 1;
	/* 在 select 下方，在 custom-arrow 上方 */
}

/* 手機版雙層文字效果 */
.mobile-rank-selected-text-container .stroke,
.mobile-rank-selected-text-container .fill {
	font-size: 1.8em;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -55%);
	white-space: nowrap;
	/* 防止文字換行 */
}

.mobile-rank-selected-text-container .stroke {
	color: transparent;
	-webkit-text-stroke: 4px #224C74;
	/* 外框顏色和寬度 */
	/*text-stroke: 4px #224C74;*/
	/* 標準屬性 */
}

.mobile-rank-selected-text-container .fill {
	color: #FFFCEF;
	/* 預設填充顏色 */
}


/* 自訂下拉箭頭 */
.mobile-rank-select-wrapper .custom-arrow {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1em;
	color: #FFFCEF;
	/* 箭頭顏色 */
	z-index: 1;
	/* 在 select 下方 */
	pointer-events: none;
	/* 讓點擊穿透到 select */
}

/* 點擊時的樣式 */
.mobile-rank-select-wrapper.active {
	background: linear-gradient(to top, #2386DD, #2DBEEE);
	/* 點擊時漸層背景色 */
}

@media (max-width: 1200px) {
	.rank-table {
		min-width: 650px;
	}
}

/* 手機版響應式設計 */
@media (max-width: 900px) {
	.rank-content {
		flex-direction: column;
		justify-content: center;
		align-items: center;
		/* 水平置中 */
		padding: 0 1%;
	}

	/* 手機版隱藏桌機版 Tab 列表 */
	.rank-tab {
		display: none;
		/* 在手機版隱藏桌機 Tab 列表 */
	}

	.rank-desc {
		width: 40%;
	}

	/* 手機版小熊圖片容器 */
	.rank-bear-img-container {
		padding-right: 0;
		/* 手機版不需要右邊距 */
		align-self: center;
		/* 水平居中 */
	}

	/* 確保 rank-left-column 在手機版佔滿寬度，以便內部元素能正確置中 */
	.rank-left-column {
		width: 100%;
		margin-right: 0;
		/* 手機版不需要右邊距 */
		align-self: center;
		/* 明確設定水平置中 */
	}

	/* 確保 rank-table 在手機版佔滿寬度，以便內部元素能正確置中 */
	.rank-table {
		min-width: 350px;
		width: 100%;
		align-self: center;
		/* 明確設定水平置中 */
	}

	/* 手機版顯示自訂下拉選單 */
	.mobile-rank-select-wrapper {
		display: flex;
		/* 在手機版顯示 */
	}
}

/* 上一頁 */
.backbtn-content {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 3%;
}

.backbtn {
	display: block;
	/* 讓 <a> 像按鈕一樣佔滿空間 */
	min-width: 120px;
	padding: 5px 8px;
	font-size: 14pt;
	color: white !important;
	border: 5px solid #a10042;
	background-color: #ff5e6c;
	border-radius: 15px;
	cursor: pointer;
	transition: box-shadow 0.3s ease, background-color 0.3s ease;
	text-align: center;
	/* 讓文字置中 */
	text-decoration: none !important;
	/* 移除下劃線 */
	box-sizing: border-box;
	/* 確保 padding 不會撐大寬度 */
}

.backbtn:hover {
	border: 5px solid #a10042;
	background-color: #df0059;
	text-shadow: 0 0 10px rgba(255, 199, 169, 0.8);
}

.backbtnstrok {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	color: transparent;
	-webkit-text-stroke: 5px #a10042;
	width: 100%;
	white-space: pre-wrap;
}

/*上一頁標題文字*/
.title-text {
	margin-left: 0;
	position: relative;
	display: inline-block;
	white-space: normal;
	word-break: break-word;
	font-size: 1.5rem;
	font-weight: bold;
	min-width: 0;
	z-index: 0;
}

.title-text .fill {
	position: relative;
	z-index: 2;
	color: #93FF5E;
}

.title-text .strok {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	color: transparent;
	-webkit-text-stroke: 5px #134C69;
	width: 100%;
	white-space: pre-wrap;
}

#back_PC,
#back_M {
	display: none;
	/* 預設隱藏 */
	width: 100%;
	justify-content: center;
	/* 讓內部的 .backbtn 置中 */
}

@media (min-width: 901px) {
	#back_PC {
		display: flex;
	}
}

@media (max-width: 900px) {
	#back_M {
		display: flex;
	}
}