/* 1. 基礎設定 */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    background-color: #1a1a1a;
    /* 修正下面這一行，移除多餘的重複字眼 */
    font-family: "Microsoft JhengHei", "PingFang TC", sans-serif;
}

/* 2. 手機容器 */
.phone-container {
    /* 核心佈局：確保子元素乖乖由上而下排隊 */
    display: flex;
    flex-direction: column;
    
    /* 尺寸設定 */
    width: 100%;
    max-width: 390px;
    min-height: 100vh;
    
    /* 置中與溢出處理 */
    margin: 0 auto;
    position: relative; /* 這是為了讓背景圖當底，但內容層不被鎖死 */
    overflow-y: auto;   /* 允許內容過多時可以上下捲動 */
    overflow-x: hidden; /* 防止背景縮放產生的橫向捲動 */
    
    /* 外觀 */
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
    background-color: #1a1a1a;
    
    /* 新增：讓內部的內容不要死貼著邊緣 */
    padding-bottom: 20px; 
}


/* 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;
    /* 放射狀漸層：中心深紅褐色到邊緣純黑 */
    background: radial-gradient(circle at 50% 60%, rgba(62, 32, 24, 0.4) 0%, rgba(0, 0, 0, 0.9) 100%);
    pointer-events: none;
}

.header {
    position: relative; 
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 60px; /* 改用 padding 來推頂部距離 */
    margin-bottom: 40px; /* 增加底部間距，確保不重疊 */
}
.main-logo {
    width: 280px; /* 這裡調整 LOGO 寬度，它會依比例縮放 */
    height: auto;
    
    /* 增加戰火氛圍的發光感 */
    filter: drop-shadow(0 0 15px rgba(255, 80, 0, 0.6));
}

/* 新增 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-logo {
    animation: flicker 3s infinite ease-in-out;
}

.join-btn {

    position: relative;
    width: 240px;
    height: 64px;
    margin: 40px auto; /* 關鍵：靠 margin 置中，並與上下拉開距離 */
    
    /* 以下維持原本的精緻質感設定 */
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 0.5em;
    padding-left: 0.5em;
    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 15px 35px rgba(0, 0, 0, 0.9), 
                inset 0 1px 1px rgba(255, 255, 255, 0.15), 
                inset 0 0 20px rgba(0, 0, 0, 0.6);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


/* 點擊時的質感改變：模擬實體按壓感 */
.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 */
.game-footer {
    width: 100%;
    margin-top: auto;        /* 確保推到底部 */
    background-color: #000;  /* 純黑背景 */
    padding: 12px 0;         /* 上下縮減高度讓它更精緻 */
    z-index: 100;
}

.footer-content {
    display: flex;
    justify-content: center; /* 內容水平置中 */
    align-items: center;     /* 內容垂直置中 */
    gap: 8px;                /* 關鍵：縮小單位之間的間距，讓字集中 */
    color: #fff;             /* 純白文字 */
    font-size: 11px;         /* 縮小字級符合圖二比例 */
    font-family: "Microsoft JhengHei", sans-serif;
    letter-spacing: 0px;     /* 移除字距讓文字緊湊 */
}

.footer-content span {
    white-space: nowrap;     /* 防止手機版自動斷行 */
}

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

/* 針對寬螢幕（電腦版）的優化 */
@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-top: 100px;         /* 這裡的數值越大，內容就降得越低。你可以試試 80px ~ 120px */
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    box-sizing: border-box;
}

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

/* 投票中 */
.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: 30px;  /* 增加與下方按鈕的間距，讓畫面呼吸 */
}

/* 讓紅點閃爍 */
.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: 30px;
    width: 280px; /* 確保容器寬度與按鈕一致 */
}

.vote-btn {
    width: 100%; /* 改為 100% 以適應 options 容器 */
    padding: 16px 20px; /* 稍微調整 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;
}

/* 選中後的狀態： */
.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); }
}

/* 已投票提示 */
.vote-status {
    font-weight: bold; 
    font-family: "Microsoft JhengHei", sans-serif;
    color: #FFD700; 
    font-size: 14px;
    margin-top: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
}



/* 統計條容器 */
.results-container {
    width: 320px;
    /* 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; }
}