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

body {
	font-family: sans-serif;
}

.main-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* 讓所有子項目都水平置中 */
	min-height: 100vh;
}

/* 菜單樣式 */
.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;
	}
}

.top-event-btn {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	/* 關鍵：所有元素（包含最後一行）都會水平置中 */
	align-items: center;
	gap: 15px;
	max-width: 90%;
	margin: 0 auto;
	padding: 0 0 1vh 0;
}

.event-btn {
	/* 預設：電腦版一行 6 個 (扣除間距約 15%) */
	flex: 0 1 calc(16.66% - 15px);
	min-width: 120px;
	/* 設置最小寬度防止過小 */
	display: flex;
	justify-content: center;
}

.event-btn:hover {
	cursor: pointer;
	filter: brightness(0.8);
}

@media (max-width: 1440px) {
	.top-event-btn {
		max-width: 100%;
	}
}

@media (max-width: 768px) {
	.event-btn {
		margin: -3px 0 1px 0;
	}
}

@media (max-width: 404px) {
	.top-event-btn {
		gap: 10px;
	}

	.top-event-btn img {
		width: 95%;
	}
}

.Eventjoinbtn {
	all: unset;
	bottom: 10px;
	/* 324px (按鈕) / 1190px (Banner最大寬) ≈ 27% */
	width: 27%;
	max-width: 324px;
	aspect-ratio: 324 / 89;
	/*background-image: url("./img/Eventjoinbtn1.webp");*/
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	border: none;
	cursor: pointer;
	display: flex;
	margin-bottom: 1%;
}

/*
.Eventjoinbtn:hover {
	background-image: url("img/Eventjoinbtn2.webp");
}
*/

.eventbanner {
	display: flex;
	justify-content: center;
	align-items: center;
	align-items: flex-end;
	justify-content: center;
	width: 95%;
	margin-bottom: 1%;
	max-width: 1190px;
	aspect-ratio: 1190 / 451;
	background-size: contain;
	/* 確保圖片完整顯示 */
	background-repeat: no-repeat;
	background-position: center;
}

.event-btn-tab {
	background-color: #B8AD93;
	border-radius: 15px;
	display: flex;
	/* 1. 讓子元素水平排列 */
	justify-content: center;
	/* 2. 確保按鈕組整體水平置中 */
	width: 95%;
	max-width: 1178px;
	/* 3. 原始尺寸為 589 * 2 */
	margin: 0 auto;
	/* 4. 容器本身在畫面中置中 */
}


/* 子元素樣式 */
.event-btn-L,
.event-btn-R {
	flex: 1;
	/* 5. 讓左右按鈕平分父容器寬度，達成隨容器縮放 */
	max-width: 589px;
	/* 限制單個按鈕最大尺寸 */
	aspect-ratio: 589 / 104;
	/* 6. 維持原始比例縮放 */
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/*活動內文範圍*/
.event-info {
	background-color: #FFFEF6;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 10px;
	width: 95%;
	max-width: 1178px;
}


.info-group {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	/* 確保圖標對齊文字第一行 */
	gap: 15px;
	/* 圖標與文字之間的間距 */
	margin-bottom: 8px;
	/* 每組之間的距離 */
	width: 100%;
}

.info-icon {
	width: 138px;
	/* 設定您想要的顯示寬度 */
	max-width: 172px;
	aspect-ratio: 172 / 66;
	flex-shrink: 0;
}

.awardimg {
	width: 100%;
	/* 讓圖片容器寬度跟隨文字容器 */
	margin: 0 0 5px 0;
	/* 與上方文字保持距離 */
}

.awardimg img {
	max-width: 100%;
	/* 關鍵：圖片最大不會超過容器寬度 */
	height: auto;
	/* 關鍵：高度自動，達成等比例縮放 */
	display: block;
	/* 移除圖片底部間隙 */
}

.info-icon img {
	width: 100%;
	/* 圖片填滿容器 */
	height: auto;
	/* 等比縮放 */
	display: block;
	/* 移除圖片底部間隙 */
}

@media (max-width: 768px) {
	.info-icon {
		width: 25%;
	}
}

.info-text {
	flex-grow: 1;
	/* 讓文字佔滿剩餘空間 */
	display: flex;
	align-items: center;
	/* 若文字較短，可讓文字與圖標垂直置中 */
}

.note {
	width: 100%;
	font-size: 1rem;
	line-height: 1.2;
	color: #151844;
	padding-top: 8px;
	border-bottom: 2px solid rgba(218, 202, 198, 0.2);
	display: inline-block;
}

/* 得獎訊息樣式 */
.table-container a {
	color: blue;
}

.list-group {
	table-layout: fixed;
	width: 95%;
	max-width: 1176px;
	padding: 1% 0;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px;
}

.list-group td {
	white-space: normal !important;
	line-height: 1.5;
	/* 換行後增加行高，閱讀比較舒適 */
}

.list-group .table-container {
	flex: 1;
	/* 關鍵：讓兩個表格平均分配剩餘空間（寬度各佔約 50%） */
	width: 0;
	/* 防止表格內容過長撐開寬度，確保 flex:1 生效 */
	min-width: 0;
	/* 確保在窄螢幕下也能正常縮放 */
}

@media (max-width: 890px) {
	.list-group {
		max-width: none;
		flex-direction: row;
		gap: 5px;
	}

	.table-container td {
		font-size: 1em;
		padding: 4px 1px;
		/* 縮小上下內距 */
		line-height: 1.2;
		white-space: normal;
		word-break: break-all;
	}
}

/* 手機版適應 */
@media (max-width: 768px) {
	.list-group {
		flex-direction: column;
		gap: 10px;
	}

	.list-group .table-container {
		width: 100%;
		/* 手機版佔滿全寬 */
	}

	.table-container td {
		font-size: 1em;
	}
}

.rank-table {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex-grow: 1;
	padding-bottom: 3%;
	min-width: 700px;
}

/* 表格樣式-紅 */
.table-red {
	border-collapse: collapse;
	border: 3px solid #AA202E;
}

/* 表格標題列樣式 */
.table-red tr:first-child td {
	background-color: #FF5A81;
	/* 標題列背景色 */
	padding: 2px 1px !important;
	height: auto;
}

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

/* 表格樣式-藍 */
.table-blue {
	border-collapse: collapse;
	border: 3px solid #085CA6;
}

/* 表格標題列樣式 */
.table-blue tr:nth-child(3) td {
	background-color: #00A2EE;
	/* 標題列背景色 */
}

/* 表格單元格 (th, td) 的基礎樣式 */
.table-blue th,
.table-blue td {
	padding: 8px 1px;
	background-color: #FFFEF6;
	/* 單元格背景色 */
	text-align: center;
	border: 1.5px solid #085CA6;
	/* 確保邊框存在 */
}

/* 選取第 3 行以及之後的所有 tr */
.table-blue tr:nth-child(n+3) td {
	padding: 4px 1px !important;
	/* 強制覆蓋原本的 8px */
	line-height: 1;
	height: auto;
	/* 確保高度能根據內容縮小 */
}

/* 回上一頁文字無視其他設定 */
.list-group .table-blue tr.goback-word td {
	padding: 10px 1px !important;
	background-color: #D9F3FF !important;
}

.table-blue tr.goback-word td a {
	display: inline;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1.5;
}

/* 預設隱藏 page2 和 page3，只顯示 page1 */
#event-page2,
#event-page3 {
	display: none;
}

/* 當 tr 有設定背景色時，強制讓裡面的 td 配合顯示該顏色 */
.table-blue tr[style*="background-color"] td,
.table-red tr[style*="background-color"] td {
	background-color: inherit !important;
}