/* 基礎設定 */
body {
    font-family: "楷體", serif;
    background-color: #f4f1ea;
	background-image: url(./images/ComfyUI_00049_.png);
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: center;
            background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

.container {
    text-align: center;
 //   background: rgba(255,255,255,255.0.9);
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
	
}

h1 {
    color: #8b4513;
    margin-bottom: 20px;
}

/* 影片容器：設定背景圖避免黑屏 */
.video-container {
    position: relative;
//    width: 640px;
//    height: 360px;
    background-color: #222; 
    background-image: url('images/供品_藍背.jpg'); /* 這裡換成你的莊嚴背景圖 */
    background-size: cover;
    background-position: center;
    border: 5px solid #d4af37;
    border-radius: 8px;
    overflow: hidden;
    margin: 0 auto 20px;
	
	 /* 修改這裡：使用百分比並限制最大寬度 */
    width: 95%;        /* 在小螢幕時佔據 95% 寬度 */
    max-width: 640px;  /* 最大不超過原本的 640px */
    height: auto;      /* 高度根據比例自動調整 */
    aspect-ratio: 16 / 9; /* 維持 16:9 的影片比例 */
}

/* 影片本身的淡入淡出效果 */
#mainVideo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.8s ease-in-out;
    opacity: 1;
}

.fade-out {
    opacity: 0 !important;
}

/* 進度條外框 */
.progress-wrapper {
    width: 95%;        /* 與影片容器保持一致 */
    max-width: 640px;
    background-color: #eee;
    margin: 20px auto;
    border-radius: 20px;
 //   height: 25px;
    overflow: hidden;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);
}

/* 進度條本體：設定放慢速度 */
.progress-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #d4af37, #f2d06b);
    color: white;
    font-size: 14px;
    line-height: 25px;
    font-weight: bold;
    transition: width 2s ease-in-out; /* 這裡控制進度條移動的速度 */
}

/* 按鈕樣式 */
.button-group {
    display: flex;
    justify-content: space-around;
    margin-top: 30px;
	//	border: 2px solid red; /* 方便觀察 */
}

.button-group button {
    padding: 12px 25px;
    margin: 8px;
    font-size: 16px;
    cursor: pointer;
    background-color: #d4af37;
    color: white;
    border: none;
    border-radius: 15px;
    transition: all 0.3s;
}

.button-group button:hover {
    background-color: #a0522d;
    transform: translateY(-2px);
}

/* 按鈕禁用樣式 */
.button-group button:disabled {
    background-color: #bbb;
    cursor: not-allowed;
    transform: none;
}

#status-msg {
	font-family: "Microsoft JhengHei";
	font-size: 36px;
	color: #d4af37; /* 金色 */
//	color: #000;
	margin-top: 30px;
//	text-shadow:2px 3px 5px #d4af37;
    text-shadow:
		1px 1px 3px black,
		1px 0px 0 DimGrey;
}
/* 結尾文字顏色 供養圓滿，功德無量 */
#status-msg h2 {
	font-family: "Microsoft JhengHei";
    color: #d4af37; /* 金色 */
    margin-top: 15px;
    letter-spacing: 2px;
	text-shadow:
		1px 1px 3px black,
		5px 3px 0 DimGrey;
}