/* ===== UX8 SCALE FINAL - FIT RING VERSION ===== */

.ux8Scale_wrap{
	width:100%;
	max-width:550px;
	margin:-5px auto 0px;
	text-align:center;
	display:flex;
	flex-direction:column;
}

.ux8Scale_box{
	width:100%;
	padding-top:0;
	order:2;
}

.ux8Scale_labels{
	width:82%;
	margin:0 auto 4px;
	order:1;
}

/* 上排提示字：左 / 中 / 右 對齊 bar */
.ux8Scale_hintRow{
	display:grid;
	grid-template-columns:1fr auto 1fr;
	align-items:end;
	margin:0 0 2px 0;
}

.ux8Scale_hint{
	font-size:16px;
	color:#666;
	font-weight:400;
	line-height:1.2;
}

.ux8Scale_hint_left{
	text-align:left;
	justify-self:start;
}

.ux8Scale_hint_mid{
	text-align:center;
	justify-self:center;
}

.ux8Scale_hint_right{
	text-align:right;
	justify-self:end;
}


.ux8Scale_typeRow{
	display:grid;
	grid-template-columns:1fr 1fr;
	align-items:flex-start;
	margin:30px auto 0;
	order:3;
	width:85%;
}

.ux8Scale_side{
	opacity:.82;
	transition:opacity .2s ease;
}

.ux8Scale_side.is-on{
	opacity:1;
}

.ux8Scale_side_left{
	text-align:left;
	justify-self:start;
}

.ux8Scale_side_right{
	text-align:right;
	justify-self:end;
}

.ux8Scale_type{
	font-size:30px;
	font-weight:bold;
	line-height:1.2;
}

.ux8Scale_side_left .ux8Scale_type{
	color:#4f9e1d;
}

.ux8Scale_side_right .ux8Scale_type{
	color:#dd7300;
}

/* 軌道 */
.ux8Scale_track{
	position:relative;
	width:82%;
	margin:0 auto;
	height:90px;
	touch-action:none;
	user-select:none;
	-webkit-user-select:none;
	cursor:pointer;
	order:2;
}

/* bar */
.ux8Scale_track::before{
	content:"";
	position:absolute;
	left:0;
	right:0;
	top:50%;
	transform:translateY(-50%);
	height:6px;
	border-radius:999px;
	background:linear-gradient(
		90deg,
		#8ac900,
		#b9df66,
		#f6bd66,
		#f28f00
	);
	z-index:1;
}

.ux8Scale_fill{
	position:absolute;
	left:0;
	top:50%;
	transform:translateY(-50%);
	height:6px;
	width:0;
	border-radius:999px;
	background:rgba(255,255,255,.35);
	z-index:2;
	pointer-events:none;
}

/* 原本數字圈圈 */
.ux8Scale_step{
	position:absolute;
	top:50%;
	transform:translate(-50%,-50%);
	width:50px;
	height:50px;
	border-radius:50%;
	border:0;
	appearance:none;
	-webkit-appearance:none;
	color:#fff;
	font-size:38px;
	font-weight:bold;
	line-height:1;
	padding:0;
	margin:0;
	cursor:pointer;
	z-index:4;
	box-shadow:0 6px 14px rgba(0,0,0,.2);
	transition:transform .2s ease, outline .2s ease;
}

.ux8Scale_step:active{
	transform:translate(-50%,-50%) scale(.96);
}

/* 不再用 outline，避免跟白框打架 */
.ux8Scale_step.is-active{
	outline:none;
}

/* 白色選取圈：改成貼合原本按鈕 */
.ux8Scale_thumb{
	position:absolute;
	top:50%;
	left:0;
	transform:translate(-50%,-50%);
	width:58px;
	height:58px;
	border-radius:50%;
	background:transparent;
	border:4px solid #ffffff;
	box-shadow:
		0 0 0 2px rgba(170,170,170,.32),
		0 4px 10px rgba(0,0,0,.14);
	z-index:6;
	cursor:grab;
	pointer-events:auto;
	transition:left .12s ease, transform .12s ease, box-shadow .12s ease;
}

.ux8Scale_thumb.is-dragging{
	transform:translate(-50%,-50%) scale(1.03);
	cursor:grabbing;
	box-shadow:
		0 0 0 2px rgba(150,150,150,.40),
		0 6px 12px rgba(0,0,0,.18);
}

/* 8 等分 */
.ux8Scale_step[data-value="1"]{ left:0%; background:#8ac900; }
.ux8Scale_step[data-value="2"]{ left:14.285%; background:#a1d332; }
.ux8Scale_step[data-value="3"]{ left:28.57%; background:#aed94c; }
.ux8Scale_step[data-value="4"]{ left:42.85%; background:#b9df66; }
.ux8Scale_step[data-value="5"]{ left:57.14%; background:#f6bd66; }
.ux8Scale_step[data-value="6"]{ left:71.42%; background:#f5af4d; }
.ux8Scale_step[data-value="7"]{ left:85.71%; background:#f3a026; }
.ux8Scale_step[data-value="8"]{ left:100%; background:#f28f00; }

/* 下一題按鈕 */
.ux8NextBtn{
	display:block;
	width:78%;
	max-width:420px;
	margin:24px auto 0;
	padding:22px 20px;
	border-radius:999px;
	background:#f28f00;
	color:#fff;
	font-size:30px;
	font-weight:bold;
	text-decoration:none;
	text-align:center;
	box-shadow:0 6px 14px rgba(0,0,0,0.15);
	transition:all .25s ease;
}

.ux8NextBtn:hover{
	transform:scale(1.02);
}

.ux8NextBtn.is-disabled{
	pointer-events:none;
	background:#d8d8d8;
	color:#888;
	box-shadow:none;
}

/* =========================
   手機 / 平板
========================= */
@media screen and (max-device-width:768px){

	.ux8Scale_wrap{
		width:100%;
		max-width:760px;
		margin:-15px auto -10px;
	}

	/* 提示字在 bar 上面，並更靠近 bar */
	.ux8Scale_labels{
		width:85%;
		margin:0 auto 50px;
		order:1;
	}

	.ux8Scale_hintRow{
		grid-template-columns:1fr auto 1fr;
		margin:0 0 1px 0;
	}

	.ux8Scale_hint{
		font-size:32px;
		font-weight:400;
		line-height:1.15;
		letter-spacing:0;
	}

	.ux8Scale_typeRow{
		grid-template-columns:1fr 1fr;
		margin:0 auto 0;
		order:3;
		width:85%;
	}

	.ux8Scale_type{
		font-size:50px;
		font-weight:800;
		line-height:1.12;
	}

	.ux8Scale_track{
		width:94%;
		height:180px;
		margin:0 auto;
		order:2;
	}

	.ux8Scale_track::before,
	.ux8Scale_fill{
		height:6px;
	}

	/* 手機圈圈 */
	.ux8Scale_step{
		width:92px;
		height:92px;
		font-size:48px;
	}

	/* 手機白框：一樣貼合，但保留好按 */
	.ux8Scale_thumb{
		width:102px;
		height:102px;
		border:5px solid #ffffff;
		background:transparent;
		box-shadow:
			0 0 0 2px rgba(155,155,155,.36),
			0 6px 14px rgba(0,0,0,.16);
	}

	.ux8Scale_thumb.is-dragging{
		transform:translate(-50%,-50%) scale(1.05);
		box-shadow:
			0 0 0 2px rgba(140,140,140,.42),
			0 8px 16px rgba(0,0,0,.20);
	}

	.ux8NextBtn{
		width:86%;
		max-width:none;
		font-size:46px;
		padding:28px 20px;
		margin-top:30px;
	}
}