/* 背景遮罩 */
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999; /* 確保遮罩在 GIF 之下 */
    display: none;
}

/* GIF */
#lottery-section img {
    position: relative;
    z-index: 1000; /* 確保 GIF 在背景遮罩之上 */
}

/* 彈跳視窗 */
#popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    z-index: 1000; /* 確保彈跳視窗在遮罩之上 */
    display: none;
    width: 500px; /* 設置響應式寬度 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 增加陰影效果 */
    text-align: center; /* 使內容居中 */
    overflow: hidden; /* 防止內容超出彈窗 */
}

/* 獎品圖片樣式 */
#popup img {
    max-width: 100%; /* 確保圖片不超過彈跳視窗的寬度 */
    height: auto; /* 自動調整圖片高度，保持原始比例 */
    display: block; /* 確保圖片在塊級元素中顯示 */
    margin: 0 auto; /* 居中顯示圖片 */
}

/*彈窗文字*/
#prize {
    position: absolute;
    z-index: 2;
    top: 21%;
    left: 0%;
    right: 0%;
    font-family: 'Gellix';
    font-size: 2.6rem;
    font-weight: 800;
}

/* 彈窗按鈕容器 */
.popup-btn {
    position: absolute;
    bottom: 8%; /* 距離底部一段距離 */
    left: 50%; /* 水平置中 */
    transform: translateX(-50%); /* 水平居中調整 */
    display: flex;
    justify-content: center;
    width: 100%; /* 確保容器寬度為 100% */
}

/* 彈窗按鈕容器 */
.popup-btn {
    position: absolute;
    bottom: 8%; /* 距離底部一段距離 */
    left: 50%; /* 水平置中 */
    transform: translateX(-50%); /* 水平居中調整 */
    display: flex;
    justify-content: center;
    width: 100%; /* 確保容器寬度為 100% */
}




/* 開始按鈕 */
.play-btn {
    position: absolute; /* 絕對定位 */
    top: 28.5%; /* 距離父元素頂部 50% */
    right: 0.5%; /* 距離父元素左邊 25% */
    padding: 0; /* 移除內邊距 */
    border: none; /* 移除預設邊框 */
    background-color: transparent !important; /* 移除預設背景 */
    cursor: pointer; /* 確保按鈕看起來可點擊 */
    z-index: 3;
    max-width: 19.375%;
	border:none !important;
}
.play-btn:hover {
    background-color: transparent !important; /* 確保 hover 時背景不改變 */
    color: inherit !important; /* 確保 hover 時文字顏色不改變 */
    border:none !important;
    color: inherit !important;
    /* 其他 hover 狀態樣式請根據需要覆蓋 */
}
.play-btn:active {
    background-color: transparent !important; /* 確保按下時背景不改變 */
    border: none !important; /* 確保按下時邊框不改變 */
    transform: none !important; /* 如果有縮放效果，請確保取消 */
    box-shadow: none !important; /* 如果有陰影效果，請確保取消 */
    /* 其他 active 狀態樣式請根據需要覆蓋 */
}


/*按鈕圖片置換*/
.change {
    cursor: pointer; /* 設置鼠標懸停時顯示為可點擊手形 */
    transition: opacity 0.3s ease-in-out; /* 設置透明度變化過渡效果 */
    background-color:transparent;
}

/* 遊玩次數 */
.number-txt{
    position: absolute;bottom: 1.3%;left: 0%; right: 0%;text-align: center;font-size: 1.5rem;font-weight: 600;
}


/* 測試按鈕 */
.new-test{
    position: absolute;bottom: 0%;left: 0%;background-color: #000 !important;color: #fff;
}

/* 重置按鈕樣式 */
.popup-btn button {
    all: unset; /* 重置所有 CSS 屬性 */
    display: inline-block; /* 保留按鈕的行內塊屬性 */
    padding: 2% 12%; /* 設置適當的內邊距 */
    margin: 0 1%; /* 設置按鈕間的間距 */
    border: none; /* 移除預設的邊框 */
    background: none; /* 移除預設的背景色 */
    color: inherit; /* 繼承父元素的文字顏色 */
    font: inherit; /* 繼承父元素的字型樣式 */
    cursor: pointer; /* 確保按鈕看起來可點擊 */
    border-radius: 10em; /* 示例圓角 */
    font-size: 20px; /* 示例字型大小 */
    transition: background-color 0.3s, color 0.3s; /* 添加過渡效果 */
}

/* 自訂按鈕樣式 */
.popup-btn .copybtn {
    background-color: #ff0000 !important; /* 複製按鈕的背景色 */
    color: #fff; /* 複製按鈕的文字顏色 */
}

.popup-btn .againbtn {
    background-color: #2f2f2f !important; /* 再玩一次按鈕的背景色 */
    color: #fff; /* 再玩一次按鈕的文字顏色 */
}

/* 滑鼠懸停效果 */
.popup-btn .copybtn:hover {
    background-color: #c40000 !important; /* 複製按鈕的背景色 */
    color: #fff; /* 複製按鈕的文字顏色 */
}

.popup-btn .againbtn:hover {
    background-color: #000 !important; /* 再玩一次按鈕的背景色 */
    color: #fff; /* 再玩一次按鈕的文字顏色 */
}

/*glass*/
.glass1 {
	position: absolute;
	top: 36.625%;
	left: 7.875%;
	max-width: 23.5%;
	z-index: 1;
	margin: 0;
	pointer-events: none; 
}
.glass2 {
	position: absolute;
	top: 36.625%;
	left: 32%;
	max-width: 23.5%;
	z-index: 1;
	margin: 0;
	pointer-events: none; 
}
.glass3 {
	position: absolute;
	top: 36.625%;
	left: 56%;
	max-width: 23.5%;
	z-index: 1;
	margin: 0;
	pointer-events: none; 
}


/* 叉叉按鈕 */
#close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px; /* 調整大小 */
    height: 24px;
    background-color: #272727; /* 背景顏色 */
    color: #fff; /* 文字顏色 */
    border: 2px solid #272727; /* 邊框樣式 */
    border-radius: 50%; /* 圓形按鈕 */
    text-align: center;
    line-height: 24px; /* 調整垂直居中 */
    cursor: pointer;
    font-size: 16px; /* 文字大小 */
    font-weight: 700; /* 文字粗度 */
    font-family: Arial, sans-serif; /* 確保文字字體 */
}

#close-btn:hover {
    background-color: #000; /* 鼠標懸停效果 */
    border-color: #000;
    color: #fff; /* 文字顏色 */
}

.safe-txt{
    font-size: 14px;text-align: left;padding: 2%;background-color: #98d9ff;
}



/* 手機版 (小於 800px) */
@media (max-width: 799px) {
    #popup {
        width: 90vw;
        padding: 10px; /* 可以根據需求調整內邊距 */
    }
    
    #popup img {
        width: 100%; /* 使圖片填滿彈跳視窗寬度 */
        height: auto; /* 保持原始比例 */
    }
    #prize {
        font-size: 8vw;
    }
    .number-txt{
        font-size: 3.8vw; /* 示例字型大小 */ 
    }
    .popup-btn button {
        font-size: 4vw; /* 示例字型大小 */
    }
    .safe-txt{
        font-size: 10px;text-align: left;
    }    
}