/* 1. 基礎設定 */
body, html {
margin: 0;
padding: 0;
width: 100%;
min-height: 100vh;
background-color: #1a1a1a;
font-family: "Microsoft JhengHei", "PingFang TC", sans-serif;
}

/* 修正後的 手機容器 */
.phone-container {
display: flex;
flex-direction: column;
width: 100%;
max-width: 390px;
height: 100vh;
height: 100svh;
margin: 0 auto;
position: relative;
overflow: hidden;
background-color: #000;
}

/* 3. 背景圖片與火光煙燻效果 */
.background {
position: absolute;
inset: 0;
background-image: url('../img/bg.png');
background-size: cover;
background-position: center;
filter: brightness(0.7) contrast(1.1);
}

/* 專屬於投票頁的模糊效果 */
.background.is-blurred {
filter: brightness(0.4) blur(4px); /* 只有投票頁會執行這行 */
transform: scale(1.1);             /* 放大以消除邊緣白邊 */
}

.overlay {
position: absolute;
inset: 0;
/* 調整漸層，讓底部 70% 處開始變黑，將視覺壓回中心 */
background: radial-gradient(circle at 50% 45%, rgba(62, 32, 24, 0.2) 0%, rgba(0, 0, 0, 0.95) 90%);
pointer-events: none;
}

.header {
position: relative;
width: 100%;
flex: 0 0 auto;
padding-top: 8%; /* 使用百分比，適應不同高度手機 */
display: flex;
justify-content: center;
/* 增加頂部留白，讓 Logo 往下降一點 */
/* 讓 Logo 下方有更多呼吸空間推擠按鈕 */
margin-bottom: 15px;
}

.main-logo {
width: 65%; /* 建議改用百分比，260px 在小螢幕太擠 */
max-width: 250px;
height: auto;
filter: drop-shadow(0 0 15px rgba(255, 80, 0, 0.6));
animation: flicker 3s infinite ease-in-out;
}

/* 新增 LOGO 動畫效果 */
@keyframes flicker {
0%, 100% { opacity: 0.95; filter: drop-shadow(0 0 10px rgba(255, 80, 0, 0.5)); }
50% { opacity: 1; filter: drop-shadow(0 0 20px rgba(255, 80, 0, 0.8)); }
}


/* 中間區域：自動撐開，讓按鈕完美居中偏下 */
.main-content {
flex: 1;
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center;
padding-bottom:10px; /* 稍微往上提一點，視覺更平衡 */
}

.join-link {
text-decoration: none;
display: block;
}

.join-btn {

position: relative;
width: 220px; /* 略微縮小，顯得精緻 */
height: 60px;
margin: auto auto 20px auto;
line-height: 1;          /* 強制行高為 1，避免被繼承的樣式推擠 */

/* 以下維持原本的精緻質感設定 */
border-radius: 12px;
cursor: pointer;
display: flex;           /* 1. 開啟彈性佈局 */
justify-content: center; /* 2. 水平置中 */
align-items: center;     /* 3. 垂直置中（解決歪歪的關鍵） */
color: #ffffff;
font-size: 22px;
font-weight: 900;
letter-spacing: 0.4em;
padding-left: 0.4em;
text-shadow: 0 0 10px rgba(255, 204, 51, 0.6);
background: radial-gradient(circle at center, #5e2418 0%, #220b06 100%);
border: 1px solid rgba(255, 215, 135, 0.25);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8),
inset 0 1px 1px rgba(255, 255, 255, 0.1);
transition: all 0.2s ease;
}


/* 點擊時的質感改變：模擬實體按壓感 */
.join-btn:active {
transform: translateY(2px) scale(0.97); /* 只要向下位移與縮小就好 */
background: radial-gradient(circle at center, #a33b26 0%, #220b06 100%);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.9),
inset 0 0 15px rgba(255, 92, 0, 0.4);
transition: all 0.1s ease-out;
}


/* 懸停效果：增加金屬邊框亮度 */
.join-btn:hover {
border: 1px solid rgba(255, 215, 135, 0.5);
box-shadow:
0 15px 40px rgba(0, 0, 0, 0.9),
inset 0 1px 1px rgba(255, 255, 255, 0.2),
inset 0 0 10px rgba(255, 204, 51, 0.2);
}


/* footer */
/* 修改後的 footer 樣式 */
.game-footer {
width: 100%;
position:relative;
bottom: 0;               /* 絕對置底 */
left: 0;
background-color: #000;
padding: 12px 0;         /* 稍微加高一點避免被手機虛擬按鍵遮擋 */
z-index: 100;
display: flex;           /* 讓 footer 內部也使用 flex */
justify-content: center;
flex-shrink: 0;
}



.footer-content {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
width: 100%;
}

/* 確保文字強制顯示 */
.footer-content span {
color: #ffffff !important;
font-size: 11px;
white-space: nowrap;     /* 禁止斷行 */
opacity: 0.8;
}













/* 關鍵：讓內部的物件能夠撐開 */



.footer-content .divider {
display: inline;         /* 強制在手機版也顯示直槓，增加集中感 */
color: rgba(255, 255, 255, 0.4); /* 直槓稍微淡一點，區分視覺層次 */
margin: 0 2px;
}

/* 專屬圖片版 Footer 樣式 */
.footer-image-version {
background-color: #000; /* 確保背景為黑色 */
padding: 15px 0;        /* 根據圖片視覺調整上下間距 */
display: flex;
justify-content: center;
align-items: center;
}

.footer-image {
width: 90%;            /* 圖片寬度占手機容器的 90% */
max-width: 350px;      /* 限制最大寬度，避免電腦版過大 */
height: auto;          /* 維持比例 */
display: block;
filter: brightness(0.9); /* 稍微降低亮度以符合戰火氛圍 */
}

/* 覆蓋掉原本 footer-content 相關的樣式，確保圖片版不會被影響 */
.footer-image-version .footer-content {
display: none;
}


/* 針對寬螢幕（電腦版）的優化 */
@media (min-width: 768px) {
.footer-content {
flex-direction: row;
justify-content: center;
gap: 15px;
}
.footer-content .divider {
display: inline;
}
}



/* 增加一點點微光效果，讓它看起來像是在戰火中隱約可見 */
.footer-content span {
/* 改動 5：移除文字陰影，讓純白字看起來更銳利 */
text-shadow: none;
transition: color 0.3s ease;
}


/* 每頁都有小LOGO */
.phone-container::after {
content: "";
position: absolute;
top: 15px;
right: 15px;
width: 60px;
height: 60px;
background-image: url('../img/LOGO.png');
background-size: contain;
background-repeat: no-repeat;
z-index: 1000;
}


/* 第二頁waiting */
/* 滿版遮罩：讓背景變暗 */
.modal-overlay {
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0.6); /* 半透明黑 */
display: flex;
justify-content: center;
align-items: center;
z-index: 100;
}

/* 彈窗主體：深褐色方框 */
/* 彈窗主體：優化比例與光影 */
.modal-box {
width: 320px;
padding: 40px 30px; /* 調整比例，讓左右有呼吸空間 */
/* 改用中心向外的徑向漸層，製造中心發光的視覺感 */
background: radial-gradient(circle at center, #5a2418 0%, #2a120b 100%);
border-radius: 16px; /* 稍微減小圓角，顯得更洗鍊 */
position: relative;

/* 雙層邊框效果：外層暗金邊，內層亮邊 */
border: 1px solid rgba(212, 175, 55, 0.3);

box-shadow:
0 20px 50px rgba(0, 0, 0, 0.8), /* 外部深陰影 */
inset 0 0 20px rgba(0, 0, 0, 0.5), /* 內部凹陷感 */
inset 0 1px 1px rgba(255, 255, 255, 0.1); /* 頂部高光線 */

text-align: center;
overflow: hidden;

/* 增加進場動畫 */
animation: modalSlideIn 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}


/* 標題：縮小字體，作為輔助資訊 */
.modal-title {
color: #c9a063; /* 改用復古金 */
font-size: 16px; /* 縮小字體 */
margin-bottom: 12px;
letter-spacing: 0.2em;
font-family: "Microsoft JhengHei", sans-serif;
opacity: 0.8;
}


/* 狀態：等待投票開始（主視覺） */
.modal-status {
color: #ffffff;
font-size: 28px; /* 稍微縮小一點點，讓字間距發揮作用 */
font-weight: bold;
letter-spacing: 0.15em; /* 拉開字距增加儀式感 */
text-shadow: 0 0 15px rgba(255, 255, 255, 0.4);

/* 呼吸動畫 */
animation: pulse 2.5s infinite ease-in-out;
}

/* 進場動畫：稍微縮放並浮現 */
@keyframes modalSlideIn {
from {
opacity: 0;
transform: scale(0.9) translateY(10px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}

/* 優化原本的呼吸動畫 */
@keyframes pulse {
0%, 100% {
opacity: 0.7;
transform: scale(0.98);
filter: blur(0.5px);
}
50% {
opacity: 1;
transform: scale(1.02);
filter: blur(0px);
}
}

.dog-animation {
width: 80px;  /* 依照圖片比例調整 */
height: 60px;
margin: 20px auto 0;
background-size: contain;
background-repeat: no-repeat;
background-position: center;

/* 核心：每 0.6 秒跑完 4 張圖，並無限循環 */
animation: dog-walk 0.6s steps(1) infinite, dog-glow 3s infinite ease-in-out;

/* 初始圖片 */
background-image: url('../images/dog1.png');
}

/* 動作切換動畫 */
@keyframes dog-walk {
0%   { background-image: url('../img/01.png'); }
25%  { background-image: url('../img/04.png'); }
50%  { background-image: url('../img/02.png'); }
75%  { background-image: url('../img/03.png'); }
}

/* 環境光呼吸動畫：讓小狗身上帶一點點後方火光的餘燼感 */
@keyframes dog-glow {
0%, 100% { filter: drop-shadow(0 0 5px rgba(255, 153, 0, 0.3)) brightness(1); }
50% { filter: drop-shadow(0 0 12px rgba(255, 102, 0, 0.6)) brightness(1.2); }
}


/* 第三頁voting */
.voting-container {
position: relative;
z-index: 10;
width: 100%;
height: 100%;
display: flex;
flex-direction: column; /* 讓內容由上而下排隊 */
align-items: center;    /* 左右置中 */
justify-content: center; /* 上下置中 */
justify-content: flex-start; /* 從原本的 center 改成 flex-start (靠上排隊) */
padding: 60px 20px 40px;
box-sizing: border-box;
min-height: auto;        /* 解除高度限制 */
}

/* 標題樣式 */
.title {
font-family: "STSong", "微軟正黑體", sans-serif; /* 改回黑體試試看，或者縮減明體間距 */
font-weight: 900;
font-size: 28px;      /* 稍微降級字級 */
letter-spacing: 2px; /* 從 6px 縮減到 2px */
color: #ffcc33;
/* 增加多重陰影讓它立體 */
text-shadow: 2px 2px 0px #000, 0 0 10px rgba(255, 204, 51, 0.5);
margin-bottom: 15px;  /* 縮減間距 */
}



/* 投票中 */
.status-tag {
color: #ffcccc; /* 更柔和的文字顏色 */
background: rgba(139, 26, 26, 0.3); /* 半透明深紅底 */
border: 1px solid rgba(255, 102, 102, 0.5); /* 半透明亮紅邊框 */
border-radius: 4px;
padding: 2px 10px;
font-size: 12px;
letter-spacing: 2px;
margin-top: 10px; /* 拉大與標題的距離 */
position: relative;
align-items: center;

display: inline-block;
margin-top: -5px;    /* 往上移動，縮小與標題的間距 */
margin-bottom: 15px;  /* 增加與下方按鈕的間距，讓畫面呼吸 */
}

/* 讓紅點閃爍 */
.status-tag::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
background-color: #ff4444; /* 亮紅色 */
border-radius: 50%;
margin-right: 8px;
box-shadow: 0 0 5px #ff4444;

/* 呼叫閃爍動畫 */
animation: live-blink 1.5s infinite;
}

/* 呼吸動畫：讓紅框跟文字有忽明忽暗的感覺 */
@keyframes live-blink {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.1); }
}


/* 投票按鈕區塊 */
.options {
display: flex;
flex-direction: column;
gap: 20px; /* 增加按鈕之間的間距，減少擁擠感 */
margin-bottom: 15px;
width: 280px; /* 確保容器寬度與按鈕一致 */
}

.vote-btn {
width: 100%; /* 改為 100% 以適應 options 容器 */
padding: 12px 18px; /* 稍微調整 padding，讓文字更平衡 */
background: linear-gradient(145deg, #421b12, #2b0e07); /* 加深底色增加質感 */
border: 1px solid rgba(255, 215, 135, 0.2); /* 帶一點金色的邊框 */
border-radius: 12px;
color: white;
font-size: 18px;
font-weight: bold;
font-family: "Microsoft JhengHei", "PingFang TC", "Heiti TC", sans-serif;
font-weight: bold;
letter-spacing: 3px; /* 按鈕文字也稍微拉開，看起來會更穩重 */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
transition: all 0.1s ease; /* 讓背景顏色和陰影切換時有 0.3 秒的過渡 */
}

/* 選中後的狀態： */
.vote-btn.selected {
background: linear-gradient(180deg, #7b1a1a 0%, #4a0e0e 100%); /* 深色酒紅 */
border: 1px solid #ffcc33;
box-shadow: 0 0 15px rgba(123, 26, 26, 0.4);
color: white;
transform: scale(0.98); /* 稍微縮小，模擬被壓下去的感覺 */
}

.vote-btn:active {
animation: shake 0.1s infinite;
}

@keyframes shake {
0% { transform: translate(1px, 1px); }
50% { transform: translate(-1px, -1px); }
100% { transform: translate(1px, 1px); }
}

/* 統計條容器 */
.results-container {
width: 300px;
padding: 20px;
/* 1. 讓背景再深一點，並帶一點戰損噪點 */
background: rgba(10, 5, 5, 0.85); /* 帶一點暖色調的黑 */
backdrop-filter: blur(5px); /* 讓背景的煙霧微弱透出，增加層次 */
border: 1px solid rgba(139, 26, 26, 0.3); /* 暗紅邊框 */
border-radius: 12px;
padding: 25px;
}

.result-item {
margin-bottom: 15px;
}

/* 針對 0 票選項優化顏色 */
.result-item.zero-votes {
color: white; /* 不要純白，帶點米色並降低透明度 */
}

.result-info {
font-family: "Microsoft JhengHei", sans-serif;
font-size: 13px; /* 稍微縮小，讓版面更精緻 */
color: white;
letter-spacing: 1px;
display: flex;
justify-content: space-between; /* 關鍵：選項在左，票數在右 */
width: 100%;
padding: 0 5px;
letter-spacing: 1px;
margin-bottom: 5px;
}


.progress-bar {
width: 100%;
height: 10px;
background: #000000; /* 背景全黑，對比最強 */
border-radius: 6px;
margin-top: 10px;
overflow: hidden;
position: relative;
/* 增加一個細微的亮邊，讓外框在黑暗中也有輪廓 */
border: 1px solid rgba(255, 255, 255, 0.05);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.8);
}


.progress-fill {
height: 100%;
background: #444; /* 預設沒票時的灰色 */
transition: width 0.8s ease-in-out; /* 增加動態感 */
}


.progress-fill.active {
/* 核心修改：使用高明度的螢光漸層 */
background: linear-gradient(90deg,
#b30000 0%,   /* 深紅基底 */
#ff0000 30%,  /* 正紅 */
#ff6600 70%,  /* 螢光橘：這是關鍵，增加色彩層次感 */
#fff5e6 100%  /* 極亮米白：模擬發光核心 */
);

/* 強化發光：增加擴散半徑，並讓顏色更偏向暖橘紅 */
box-shadow:
0 0 15px rgba(255, 68, 68, 0.9),
0 0 30px rgba(255, 102, 0, 0.5); /* 增加第二層橘色暈染 */

border-radius: 20px;
position: relative;
overflow: hidden;
animation: pulse 2s infinite ease-in-out;
}


/* 增加發光掃過的流光效果 */
.progress-fill.active::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.8), /* 提高掃光亮度 */
transparent
);
animation: flow 2s infinite linear; /* 加快速度 */
}

@keyframes flow {
0% { left: -100%; }
100% { left: 200%; }
}

@keyframes pulse {
0%, 100% { opacity: 0.8; }
50% { opacity: 1; }
}


/* 第四頁-vote-result */

/* 1. 全局字體微調：增加穩定感 */
body {
font-family: "SF Pro TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
line-height: 1.5;
}

/* 2. 結果容器：增加高級感 (增大 padding) */
.results-container {
width: 300px; /* 稍微撐大一點，更穩重 */
padding: 20px;
margin: 20px auto; /* 與計時器拉開距離 */
background: linear-gradient(135deg, rgba(15, 8, 8, 0.9) 0%, rgba(10, 5, 5, 0.85) 100%); /* 增加斜向漸層質感 */
padding: 30px; /* 從 25px 增大到 30px，讓內容有呼吸空間 */
border-radius: 12px;
border: 1px solid rgba(139, 26, 26, 0.4); /* 暗紅細邊框，更有高級感 */
box-sizing: border-box;
box-shadow: 0 10px 30px rgba(0,0,0,0.6); /* 增加沈降感 */
}

/* 3. 文字層：增加「數字對比」 */
.result-info {
display: flex;
justify-content: space-between;
width: 100%;
margin-bottom: 12px; /* 增大與條的距離 */
color: white;
}

/* 讓選項文字稍微「縮排」 */
.result-info span:first-child {
font-size: 13px;
letter-spacing: 2px;
font-weight: normal;
}

/* 讓票數數字稍微「突顯」 */
/* 讓選項標籤變為純白色 */
.result-info span:first-child {
color: #ffffff; /* 改為純白 */
font-size: 14px;
letter-spacing: 2px;
opacity: 1; /* 恢復 100% 不透明度，增加視覺份量 */
font-weight: bold;
}

/* 修正進度條：增加開頭的圓角與平滑質感 */
.progress-bar {
width: 100%;
height: 8px; /* 稍微加厚一點點，比較好觀察圓角 */
background: #000;
border-radius: 10px; /* 容器圓角 */
overflow: hidden;
position: relative;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.8);
}

.progress-fill {
height: 100%;
/* 核心修正：給填滿層也加上圓角，解決邊緣生硬問題 */
border-radius: 10px 0 0 10px;
background: #222;
transition: width 1s ease-in-out;
}

/* 領先狀態：強化火焰漸層與流光 */
.progress-fill.active {
background: linear-gradient(90deg,
#b30000 0%,
#ff0000 30%,
#ff6600 75%,
#fff5e6 100%
);
box-shadow: 0 0 15px rgba(255, 68, 68, 0.9);
border-radius: 10px; /* 滿格時全圓角 */
}

/* 讓票數數字維持高對比 */
.result-info span:last-child {
color: #ffcc33; /* 讓百分比數字跟計時器一樣用金色，更有整體感 */
font-weight: bold;
}

/* 增加一個流光動畫 (Shine Effect) */
.progress-fill.active::after {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
animation: flow-shine 2.5s infinite linear;
}

@keyframes flow-shine {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}

/* 倒數計時數字樣式微調 */
.timer-display {
font-size: 64px;
font-weight: 900;
color: #ffcc33;
font-family: "STSong", "微軟正黑體", sans-serif;
text-shadow: 2px 2px 0px #000, 0 0 20px rgba(255, 204, 51, 0.6);
letter-spacing: 2px;
}


/* 第五頁-final-result */
/* --- 整合後的選項樣式 --- */


/* --- 純文字勝出宣告 --- */
.winner-announcement-pure {
width: 100%;
margin: 15px 0 20px 0;
text-align: center;
margin: 15px 0 20px 0;
font-size: 28px;           /* 放大字體，使其成為副標題焦點 */
font-weight: bold;
letter-spacing: 5px;      /* 拉開字距，增加莊嚴感 */
text-indent: 5px;      /* 關鍵：加入跟字距一樣數值的縮排，能將文字推回正中心 */

/* 文字漸層與發光核心 */
background: linear-gradient(180deg, #ffcc33 0%, #fff5e6 50%, #ffcc33 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;

/* 強烈發光效果，模擬大標題質感 */
text-shadow: 0 0 15px rgba(255, 204, 51, 0.8);

/* 增加一個細微的呼吸動效 */
animation: simple-glow 3s infinite ease-in-out;
}

@keyframes simple-glow {
0%, 100% { filter: drop-shadow(0 0 5px rgba(255, 204, 51, 0.5)); }
50% { filter: drop-shadow(0 0 15px rgba(255, 204, 51, 0.8)); }
}

/* --- 下方結算標籤 (維持暗色調，不搶戲) --- */
.settle-badge {
display: inline-block;
padding: 4px 15px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #ffffff;
border-radius: 20px;
font-size: 11px;
letter-spacing: 2px;
}

/* 1. 選項名稱：透過父層 class 決定顏色 */
.winner .option-name {
color: #ffffff !important; /* 獲勝者純白 */
font-size: 16px;
font-weight: bold;
letter-spacing: 2px;
}

.loser .option-name {
color: rgba(255, 255, 255, 0.4) !important; /* 失敗者變灰暗 */
font-size: 14px;
font-weight: bold;
letter-spacing: 2px;
}

/* 2. 數據百分比 */
.winner .vote-data {
color: #ffcc33;
font-size: 18px;
font-weight: 900;
text-shadow: 0 0 10px rgba(255, 204, 51, 0.6);
}

.loser .vote-data {
color: rgba(255, 255, 255, 0.3); /* 失敗者數據變淡 */
font-size: 14px;
}

/* 3. 進度條容器 */
.progress-bar {
width: 100%;
height: 8px;
background: #000;
border-radius: 10px;
overflow: hidden;
margin-top: 10px;
border: 1px solid rgba(255, 255, 255, 0.05);
}

/* 4. 進度條填滿層：區分勝負樣式 */
.winner .progress-fill {
height: 100%;
background: linear-gradient(90deg, #b30000, #ff0000, #ff6600, #fff5e6);
box-shadow: 0 0 20px rgba(255, 68, 68, 0.8);
border-radius: 10px;
transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.loser .progress-fill {
height: 100%;
background: #333; /* 失敗者用深灰色 */
box-shadow: none;
border-radius: 10px;
transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- 以下維持你原本的設定 (標籤與訊息) --- */

.result-status-tag {
display: inline-block;
padding: 5px 20px;
background: rgba(255, 204, 51, 0.2);
border: 1px solid #ffcc33;
color: #ffcc33;
border-radius: 20px;
font-size: 12px;
margin: 15px 0;
}

@keyframes blink {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.7; }
}




/* 第六頁-Summary*/
/* 統計容器：稍微增加內距與間距 */
.stats-display {
display: flex;
flex-direction: column;
gap: 30px; /* 每一題之間的間距 */
padding: 30px 20px;
background: rgba(20, 10, 5, 0.8);
}

.stat-group {
text-align: left;
}

/* 章節標題：較小的文字 */
.question-label {
font-size: 12px;
color: #ffffff;
margin-bottom: 8px;
display: block;
letter-spacing: 1px;
}

/* 選項與數據排列 */
.choice-row {
display: flex;

align-items: center;
margin-bottom: 6px;
}

.choice-text {
font-size: 16px;
font-weight: bold;
color: #ffcc33; /* 統一使用你的招牌金色 */
}

.choice-percent {
font-size: 16px;
font-weight: 900;
color: #ffcc33;
text-shadow: 0 0 10px rgba(255, 204, 51, 0.5);
}

/* 進度條細節：延續之前的發光感 */
.stat-group .progress-bar {
height: 6px; /* 統計頁可以稍微細一點，視覺較精緻 */
background: rgba(0, 0, 0, 0.5);
border-radius: 10px;
overflow: hidden;
}

.stat-group .progress-fill {
height: 100%;
background: linear-gradient(90deg, #b30000, #ff0000, #ff6600);
box-shadow: 0 0 10px rgba(255, 68, 68, 0.4);
border-radius: 10px;
}

/* 按鈕容器，確保置中並與上方統計區塊保持距離 */
.action-area {
width: 100%;
display: flex;
justify-content: center;
margin-top: 30px;
z-index: 20; /* 確保在背景之上 */
}

.next-btn-link {
text-decoration: none;
}

.next-btn {
width: 200px;
height: 50px;
border-radius: 8px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;

/* 延續你的品牌配色：深紅褐色漸層 */
background: radial-gradient(circle at center, #5e2418 0%, #220b06 100%);
border: 1px solid rgba(255, 215, 135, 0.25);

/* 文字樣式 */
color: #ffffff;
font-size: 16px;
font-weight: bold;
letter-spacing: 2px;
text-shadow: 0 0 8px rgba(255, 204, 51, 0.4);

/* 陰影質感 */
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8),
inset 0 1px 1px rgba(255, 255, 255, 0.1);

transition: all 0.3s ease;
}

/* 點擊效果 */
.next-btn:active {
transform: translateY(2px) scale(0.98);
background: radial-gradient(circle at center, #8a3324 0%, #220b06 100%);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.9);
}

/* 懸停微光 */
.next-btn:hover {
border: 1px solid rgba(255, 215, 135, 0.5);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9),
inset 0 0 10px rgba(255, 204, 51, 0.1);
}



/* 第七頁-thanks */
/* 感謝頁容器 */
.thanks-container {
position: relative;
z-index: 10;
width: 100%;
/* 核心修正：改為 flex: 1 讓它佔滿除了 footer 以外的剩餘空間 */
flex: 1;
display: flex;
flex-direction: column;
justify-content: center; /* 真正的垂直置中 */
align-items: center;
text-align: center;
padding: 0 30px;
box-sizing: border-box;
/* 移除 min-height 或 height: 100%，交給 flex 控制 */
}

.thanks-content {
/* 減少底部邊距，原本 50px 太大會把內容往上推 */
margin-bottom: 30px;
background: rgba(0, 0, 0, 0.4);
width: 100%;
}


.thanks-text {
color: #ffffff;
font-size: 20px;
letter-spacing: 4px;
margin: 10px 0;
opacity: 0.9;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}

/* 強調文字 (金色) */
.thanks-text.highlight {
color: #ffcc33;
font-size: 26px; /* 稍微加大，強化「完成故事」的成就感 */
font-weight: bold;
text-shadow: 0 0 15px rgba(255, 204, 51, 0.5);
margin-bottom: 30px;
letter-spacing: 4px;
}

.thanks-text.sub {
font-size: 16px;
color: #ffffff;
margin-top: 20px;
}


/* 圖片容器與大小控制 */
.thanks-img-wrapper {
width: 100%;
display: flex;
justify-content: center;
/* 增加上下對稱的間距 */
margin: 30px 0;
}

.thanks-icon-static {
width: 150px;      /* 鎖定寬度，解決「太大」的問題 */
height: auto;      /* 維持比例 */
filter: drop-shadow(0 0 15px rgba(255, 165, 0, 0.4)); /* 增加微弱火光感 */
animation: simple-float 4s infinite ease-in-out;     /* 增加一個緩慢漂浮感，讓靜止畫不呆板 */
}


/* 漂浮動畫：讓畫面更有靈魂 */
@keyframes simple-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-15px); }
}

/* 修正背景亮度：感謝頁應該要更暗，才能襯托金字 */
.thanks-container + .background.is-blurred {
filter: brightness(0.2) blur(10px) !important;
}


body {
overflow: hidden;
}