/* CSS */
/* Art Tangency Creation - 天井創意 Service @ art-tangency.com */
/* Webpage: 富翁大挑戰 /milestone/（17th）｜Tools: tools_17_milestone */
/* Version: 26.06.23-0.0.0 */

/* ============================================================
   #evt26_milestone — 白卡點數展示（全部樣式 scope 在此，勿汙染全域）
   ============================================================ */
#evt26_milestone{
	font-family:"Noto Sans TC", sans-serif;
	width:100%; /* max-width:660px; */ margin:0 auto;
}

/* 白卡本體 */
#evt26_milestone .mt-card{
	position:relative;            /* 滿3/滿5 標籤 + loading 遮罩的定位基準 */
	background:#fff;
	border-radius:5px;
	padding:20px;
	box-shadow:0 6px 20px rgba(0,0,0,.12);
}

/* 查詢 loading 遮罩：在整張白卡上蓋一層半透明白色（JS 在查詢期間切 .is-loading）*/
#evt26_milestone .mt-card::after{
	content:"";
	position:absolute; inset:0;
	background:rgba(255,255,255,.65);
	border-radius:5px;            /* 跟白卡同圓角 */
	opacity:0; visibility:hidden;
	transition:opacity .3s;
	pointer-events:none;
	z-index:10;                  /* 蓋過 badge 與 Bonus 緞帶(z-index:3) */
}
#evt26_milestone .mt-card.is-loading::after{ opacity:1; visibility:visible; }

/* 6 格 grid：桌機 3 欄 */
#evt26_milestone .mt-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
}

/* 單一格 */
#evt26_milestone .mt-item{
	position:relative;            /* Bonus 緞帶貼格子角落的定位基準 */
	display:flex; flex-direction:column; align-items:center;
	padding:15px 6px;
	box-sizing:border-box;
	overflow:hidden;              /* 緞帶超出格子的部分裁掉，貼齊分隔線 */
}
/* 分隔線：1px #B8C2CE 直線。第 1、2 欄右邊框（垂直 2 條）；第 1 排底邊框（水平 1 條）*/
#evt26_milestone .mt-item:nth-child(1),
#evt26_milestone .mt-item:nth-child(2),
#evt26_milestone .mt-item:nth-child(4),
#evt26_milestone .mt-item:nth-child(5){ border-right:1px solid #B8C2CE; }
#evt26_milestone .mt-item:nth-child(1),
#evt26_milestone .mt-item:nth-child(2),
#evt26_milestone .mt-item:nth-child(3){ border-bottom:1px solid #B8C2CE; }

/* badge 圖：預設灰階，.active 轉彩 */
#evt26_milestone .mt-badge{
	position:relative;            /* Bonus 緞帶定位基準 */
	width:100%; max-width:160px; aspect-ratio:1/1;
}
#evt26_milestone .mt-badge>img{
	display:block; width:100%; height:100%;
	object-fit:contain;
	filter:grayscale(1);
	transition:filter .3s;
}
#evt26_milestone .mt-item.active .mt-badge>img{ filter:none; }

/* Bonus 緞帶（第 6 枚）：貼格子左上角、壓在分隔線交叉點；恆常彩色，不隨灰階 */
#evt26_milestone .mt-item>img.mt-ribbon{
	position:absolute; top:0; left:0;
	width:38%; height:auto; pointer-events:none; z-index:3;
}

/* 任務文字標 */
#evt26_milestone .mt-text{
	margin-top:2px;
	font-size:.95rem; font-weight:400; color:#9aa0a6;
	letter-spacing:.5px; text-align:center; line-height:1.2;
}

/* 達標門檻頁籤：一組坐在卡片上緣（往上溢出），未達 grayscale、達標轉彩 */
#evt26_milestone .mt-tiers{
	position:absolute; left:0; right:0; top:0;
	transform:translateY(-100%);
	display:flex; gap:3px; justify-content:center;
	pointer-events:none;
}
#evt26_milestone .mt-tier{
	padding:5px 24px 8px;
	border-radius:5px 5px 0 0;
	min-width: 25%;
	font-size:1rem; font-weight:500; letter-spacing:2px;
	color:#fff; line-height:1; text-align: center;
	background:linear-gradient(to bottom,#d83a40 0%,#b2171e 100%);
	box-shadow:0 -2px 6px rgba(0,0,0,.12);
	filter:grayscale(1) brightness(1.35); /* 預設未達：灰（加 brightness 讓灰偏中淺，貼近設計稿）*/
	transition:filter .3s;
}
#evt26_milestone .mt-tier .mt-n{ color:#ffd23f; margin:0 3px; font-size:1.15rem; }
#evt26_milestone .mt-tier.reached{ filter:none; }  /* 達標：轉彩 */

/* ===== 手機（≤768px）：2 欄；標籤改圓形 ===== */
@media only screen and (max-width:768px){
	#evt26_milestone{ max-width:420px; }
	#evt26_milestone .mt-grid{ grid-template-columns:repeat(2,1fr); }

	/* 2 欄分隔線重算：第 1 欄右框（垂直 1 條）；第 1~4 格底框（水平 2 條）*/
	#evt26_milestone .mt-item{ border-right:0 !important; border-bottom:0 !important; }
	#evt26_milestone .mt-item:nth-child(odd){ border-right:1px solid #B8C2CE !important; }
	#evt26_milestone .mt-item:nth-child(1),
	#evt26_milestone .mt-item:nth-child(2),
	#evt26_milestone .mt-item:nth-child(3),
	#evt26_milestone .mt-item:nth-child(4){ border-bottom:1px solid #B8C2CE !important; }

	#evt26_milestone .mt-tier{
		min-width: 33%;
		padding:6px 5px 7px;
		font-size:.95rem;
	}
	#evt26_milestone .mt-tier .mt-n{ font-size:1.05rem; }

	#evt26_milestone .mt-card{ padding:17px 12px; }
	#evt26_milestone .mt-text { font-size:.85rem; }
}

/* ============================================================
   活動方式 規則：已獨立拆分至 tools_17_milestone_rules.html（外層 #mt-rules，
   頁面內嵌、非 popup），樣式內嵌於該檔 <style>。
   原本此處的 popup 樣式（.mt-rules-triggerwrap / .mt-rules-trigger /
   .mt-rules / .mt-rules-mask / .mt-rules-panel 及其子元素）已移除。
   ============================================================ */