/* 全局設定 */
body {
    /* 設定預設字體，確保中文顯示美觀 */
    font-family: "PingFang TC", "Helvetica Neue", Helvetica, Arial, "Microsoft JhengHei", sans-serif;
    /* 確保背景為純黑 */
    background-color: #000;
}

/* App 主容器 (RWD 關鍵) */
.app-container {
    max-width: 480px; /* 限制最大寬度，模擬手機尺寸 */
    margin: 0 auto;   /* 在大螢幕時水平置中 */
}

/* 主視覺藍色區塊 */
.main-visual {
    background-color: #6592d6; /* 仿造草圖中的藍色 */
    position: relative;
    /* 確保區塊有一定的高度比例 */
    min-height: 60vh; 
    background-image: url('images/sysShow.png');
    background-size: cover;      /* 讓圖片依比例縮放，直到完全覆蓋容器 */
    background-position: center; /* 讓圖片居中，避免只看到左上角 */
    background-repeat: no-repeat; /* 防止圖片重複出現 */
}

/* 紅色「海報」手寫字 */
.poster-text {
    color: #e45c5c;
    font-size: 1.5rem;
    /* 使用草書或標楷體來模擬手寫感 */
    font-family: 'Brush Script MT', cursive, "DFKai-SB", "BiauKai";
    transform: rotate(-5deg); /* 微微傾斜，增加手寫的隨性感受 */
}

/* 客製化漸層按鈕 */
.btn-custom {
    /* 藍色到水藍色的漸層 */
    background: linear-gradient(90deg, #67c5d4 0%, #3a7bd5 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease-in-out;
}

/* 按鈕 Hover 效果：模擬草圖中被粉紅色圈起來的感覺 */
.btn-custom:hover {
    color: white;
    transform: scale(1.05); /* 滑鼠游標移過去時微微放大 */
    box-shadow: 0 0 0 4px rgba(255, 20, 147, 0.6); /* 產生粉紅色的外發光圈 */
}

/* 紅色 "<- start" 文字 */
.start-text {
    color: #e45c5c;
    font-size: 1.2rem;
    font-family: 'Brush Script MT', cursive, "DFKai-SB", "BiauKai";
    transform: rotate(-3deg);
}

/* RWD 微調：針對非常小的螢幕 (如 iPhone SE) */
@media (max-width: 375px) {
    .main-visual h1 {
        font-size: 2.5rem; /* 字體稍微縮小以免破版 */
    }
}

/* =========================================
   第二頁 (投票與影片列表) 專用樣式
   ========================================= */

/* 投票橫幅 */
.voting-banner {
    /* 仿造草圖的淺藍/紫漸層背景 */
    background-image: url('images/starback10.png'); /* 如果圖片在 images 資料夾下，請改為 url('images/star-back-10.png') */
    background-size: cover;     /* 讓圖片等比例縮放並填滿整個橫幅 */
    background-position: center;  /* 讓圖片保持置中，確保星星圖案能完美顯示 */
    background-repeat: no-repeat; /* 防止圖片重複拼貼 */

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s ease;

    min-height: 150px; /* 強制給予一個最低高度，確保星星能露出來 (可依喜好微調 140px~160px) */
    display: flex;
    flex-direction: column;
    justify-content: center; /* 讓文字在擴大的空間裡保持垂直置中 */
}

.voting-banner h4,
.voting-banner p {
    font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Nunito", sans-serif;
    font-weight: 900; /* 標題可以設定到 900 讓它更飽滿粗壯 */
}

/* 讓橫幅有被點擊或 hover 的互動感 */
.voting-banner:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.6);
}

/* Event 標籤 (沿用首頁按鈕的漸層色) */
.event-badge {
    background: linear-gradient(90deg, #67c5d4 0%, #3a7bd5 100%);
    color: white;
    font-size: 0.8rem;
}

/* 影片列表外框 */
.video-list {
    background-color: #18181a; /* 比純黑稍微灰一點，增加層次感 */
}

/* =========================================
   影片縮圖與排版樣式
   ========================================= */

/* 取代原本的 .video-thumbnail */
.video-img {
    width: 140px;      /* 保持與草圖相近的寬度 */
    height: 79px;      /* YouTube 縮圖通常是 16:9，所以高度抓大約 79px */
    object-fit: cover; /* 確保圖片填滿範圍，不會被拉長變形 */
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* 點擊或滑鼠移過去時的微互動 */
.video-img:hover {
    opacity: 0.8;
    transform: scale(1.02); /* 微微放大，增加點擊感 */
}
/* =========================================
   客製化影片列表的捲軸樣式 (強制覆蓋版)
   ========================================= */

/* 支援 Firefox */
.video-list {
    scrollbar-width: thin;
    scrollbar-color: #4a78d6 transparent;
}

/* 針對 WebKit 核心瀏覽器 (Chrome, Safari, Edge) */

/* 1. 整個捲軸的寬度與背景 */
.video-list::-webkit-scrollbar {
    width: 6px !important;
    background-color: transparent !important; /* 強制背景透明，消滅白底 */
}

/* 2. 捲軸的背景軌道 */
.video-list::-webkit-scrollbar-track {
    background-color: transparent !important; /* 強制軌道透明 */
    box-shadow: none !important;              /* 去除任何預設的陰影 */
}

/* 3. 可拖曳的滑塊 (Thumb) */
.video-list::-webkit-scrollbar-thumb {
    background-color: #4a78d6 !important;     /* 強制指定藍色，消滅灰色 */
    border-radius: 10px !important;
    /* 加一個與影片列表背景相同的邊框，可以讓滑塊看起來更細緻、不貼邊 */
    border: 1px solid #18181a !important;     
}

/* 4. 滑鼠移到滑塊上時的效果 */
.video-list::-webkit-scrollbar-thumb:hover {
    background-color: #67c5d4 !important;
}

/* =========================================
   覆蓋與擴充 Bootstrap 的客製化樣式
   ========================================= */

/* 1. Modal 主體：深灰背景、大圓角與陰影 */
.custom-modal-bg {
    background-color: #242424 !important; /* 深灰色背景 */
    border-radius: 28px !important; /* 強制覆蓋 Bootstrap 預設圓角 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
}

/* 2. 副標題文字顏色 */
.custom-subtitle {
    color: #e0e0e0; 
    font-size: 0.85rem;
}

/* 3. 圖片中的純藍色按鈕 */
.custom-btn-blue {
    background-color: #3b82f6 !important; /* 亮藍色 */
    color: #ffffff !important;
    border: none !important;
    border-radius: 20px !important; /* 圓潤的邊角 */
    transition: background-color 0.2s ease, transform 0.1s ease;
}

/* 按鈕互動效果 */
.custom-btn-blue:hover {
    background-color: #2563eb !important;
    color: #ffffff !important;
}
.custom-btn-blue:active {
    transform: scale(0.98); /* 點擊時微縮的物理回饋感 */
}

/* 4. 客製化內部捲軸 (只在規則太長需要滾動時出現) */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background-color: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #4a78d6;
    border-radius: 10px;
}

/* =========================================
   投票列表頁專用樣式
   ========================================= */

/* 頂部切換標籤 (Tabs) */
.tab-item {
    color: #888888;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    padding-bottom: 4px;
    transition: color 0.2s ease;
}

/* 啟動狀態的標籤 */
.tab-item.active {
    color: #4da3ff; /* 配合圖片的亮藍色 */
    font-weight: bold;
    /* 如果圖片中下方有底線，可以把下面這行取消註解 */
    /* border-bottom: 2px solid #4da3ff; */
}

/* 中間大塊的深色背景 (只有上方有大圓角) */
.custom-dark-bg {
    background-color: #242424;
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
    position: relative;
    /* 確保這塊背景在按鈕的下層 */
    z-index: 1; 
}

/* 圓形頭像佔位符 */
.avatar-circle {
    width: 72px;  /* 可根據手機螢幕微調大小 */
    height: 72px;
    background-color: #a3bbfb; /* 圖片中的淺紫藍色 */
    border-radius: 50%;
    /* 加上一點微小的內陰影增加立體感 */
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.2);
    transition: transform 0.2s ease;
    cursor: pointer;
}

/* 點擊頭像的互動回饋 */
.avatar-circle:active {
    transform: scale(0.92);
}

/* 底部按鈕的絕對定位容器 */
.sticky-bottom-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10; /* 確保按鈕永遠浮在最上層 */
}

/* 底部滿版大按鈕 */
.bottom-action-btn {
    border-radius: 0; /* 取消預設圓角 */
    border-top-left-radius: 28px; /* 只有上方有圓角，貼合圖片設計 */
    border-top-right-radius: 28px;
    /* 因為手機底部可能會有 Home Bar，所以 padding-bottom 設大一點 */
}

/* =========================================
   遊戲感導覽按鈕 (現代手遊 / 電競 UI 風格)
   ========================================= */
.game-btn-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 半透明的藍色科技感背景 */
    background: linear-gradient(135deg, rgba(77, 163, 255, 0.15), rgba(59, 130, 246, 0.05));
    border: 1px solid rgba(77, 163, 255, 0.4); /* 微亮的邊框 */
    color: #4da3ff; /* 亮藍色文字 */
    font-size: 0.85rem;
    font-weight: 800;
    font-family: "Impact", "Arial Black", "Microsoft JhengHei", sans-serif; /* 粗體字型增加力量感 */
    letter-spacing: 1px;
    padding: 6px 14px;
    border-radius: 8px; /* 科技感的微圓角，不要太軟爛 */
    box-shadow: 0 0 10px rgba(77, 163, 255, 0.1); /* 預設微微發光 */
    backdrop-filter: blur(4px); /* 毛玻璃效果 */
    /* 這裡加上了類似小遊戲物理彈跳的貝茲曲線動畫 */
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); 
}

/* 滑鼠游標移過去的霓虹發光效果 */
.game-btn-nav:hover {
    background: rgba(77, 163, 255, 0.3);
    border-color: #4da3ff;
    color: #ffffff;
    /* 增加外發光與內發光，創造通電的感覺 */
    box-shadow: 0 0 15px rgba(77, 163, 255, 0.6), inset 0 0 8px rgba(77, 163, 255, 0.3);
    transform: translateY(-2px); /* 微微浮起 */
}

/* 點擊時的物理回饋感 (重要！遊戲感的靈魂) */
.game-btn-nav:active {
    transform: scale(0.92) translateY(0); /* 點擊時瞬間縮小並壓下去 */
    box-shadow: 0 0 5px rgba(77, 163, 255, 0.4);
    background: rgba(59, 130, 246, 0.4); /* 按下時顏色變深 */
}

/* 圓形頭像 */
.avatar-circle {
    width: 72px;  
    height: 72px;
    background-color: #a3bbfb; /* 保留底色：如果照片破圖或還沒載入，會顯示這個漂亮的紫藍色 */
    border-radius: 50%;
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.2);
    transition: transform 0.2s ease;
    cursor: pointer;
    
    /* 👇 新增這兩行 👇 */
    object-fit: cover; /* 關鍵！這會像遮罩一樣，讓照片自動置中並裁切成完美圓形，絕不變形 */
    display: block;    /* 確保 img 標籤的 margin: auto (mx-auto) 能夠正常運作置中 */
}

/* 點擊頭像的互動回饋 (維持不變) */
.avatar-circle:active {
    transform: scale(0.92);
}

/* =========================================
   單選狀態的藍色發光外框
   ========================================= */
.selected-avatar {
    /* 第一層是 4px 的實心亮藍色邊框，第二層是外圍的藍色霓虹光暈 */
    box-shadow: 0 0 0 4px #3b82f6, 0 0 15px rgba(59, 130, 246, 0.8) !important;
    transform: scale(1.08) !important; /* 選到時明顯放大 */
    /* 為了讓縮放有平滑動畫，確保原本的 .avatar-circle 有設定 transition */
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Q彈縮放效果 */
}

/* =========================================
   取消/次要按鈕樣式
   ========================================= */
.custom-btn-cancel {
    background-color: #3f3f46 !important; /* 深灰色，不會搶走主按鈕的視覺焦點 */
    color: #d4d4d8 !important; /* 淺灰文字 */
    border: none !important;
    transition: all 0.2s ease;
}

.custom-btn-cancel:hover {
    background-color: #52525b !important; /* 滑鼠移過稍微變亮 */
    color: #ffffff !important;
}

.custom-btn-cancel:active {
    transform: scale(0.96); /* 一樣保留 Q 彈的點擊回饋 */
}

/* =========================================
   投票證書專用樣式
   ========================================= */

/* 證書卡片本體：漸層背景、圓角、陰影 */
.cert-card {
    background: linear-gradient(180deg, #d3c4ff 0%, #fefdff 60%, #ffeaf7 100%);
    border-radius: 24px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.8);
    /* 如果背景是白色的，加上這個可以讓卡片感覺浮起來 */
}

/* 外層容器：負責把超出的部分喀嚓剪掉 */
.cert-avatar-wrapper {
    width: 140px;
    height: 140px;
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: 16px;
    border: 3px solid #ffffff;
    overflow: hidden; /* 🌟 核心：超出圓角範圍的直接隱藏 */
}

/* 內層圖片：強制 140px + cover */
.cert-avatar-img {
    width: 140px !important;  /* 🌟 強制寫死 140px，html2canvas 就不會算錯 */
    height: 140px !important; /* 🌟 強制寫死 140px */
    object-fit: cover !important; /* 🌟 確保填滿且不變形 */
    object-position: center !important; /* 確保對準正中間 */
    display: block;
}

/* 強制允許手機長按跳出選單 (對抗 Line / IG 內建瀏覽器) */
#finalGeneratedImg {
    -webkit-touch-callout: default !important; /* 強制喚醒長按選單 */
    -webkit-user-select: auto !important;      /* 允許選取 */
    user-select: auto !important;
    pointer-events: auto !important;           /* 確保點擊事件能穿透 */
}

/* =========================================
   膠囊狀透明導覽按鈕 (Pill-shaped Transparent Buttons)
   ========================================= */
.pill-btn-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent; /* 透明背景 */
    /* 使用與圖片相符的柔和灰藍色，可自行微調色碼 */
    border: 3.5px solid #7a93c8; 
    color: #7a93c8; 
    border-radius: 18px; /* 數值設很大，確保左右兩側是完美的半圓 */
    padding: 6px 16px; /* 控制按鈕的寬高比例 */
    font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Nunito", sans-serif;
    font-weight: 800;
    font-size: 1rem;
    text-decoration: none !important;
    letter-spacing: 1px;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s;
    cursor: pointer;
    /* 取消 Bootstrap button 預設的外框 */
    outline: none; 
}

/* 滑鼠移過去的微亮效果 */
.pill-btn-nav:hover {
    color: #92abdd;
    border-color: #92abdd;
}

/* 點擊時的物理回饋感 */
.pill-btn-nav:active {
    transform: scale(0.92);
    /* 點擊時加一點微光背景，增加回饋感 */
    background-color: rgba(122, 147, 200, 0.2); 
}

/* 針對返回箭頭的微調 */
.pill-btn-nav .icon {
    font-size: 0.9rem;
    margin-right: 5px;
    position: relative;
    top: -1px; /* 微調讓箭頭跟文字在視覺上完美對齊 */
}

/* =========================================
   橫幅右下角：查看規則按鈕
   ========================================= */
.rules-banner-btn {
    background-color: #b9d0f0; /* 淺藍色背景 */
    color: #273b69; /* 深藍色文字 (與星星同色系) */
    border: none;
    border-radius: 8px; /* 微圓角矩形 */
    font-size: 0.85rem;
    padding: 6px 14px;
    letter-spacing: 1px;
    transition: all 0.2s ease;
    font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Nunito", sans-serif;
    font-weight: 800;
}

/* 滑鼠懸停效果 */
.rules-banner-btn:hover {
    background-color: #a4bfdf; /* 稍微變深的藍色 */
    color: #1a2849;
    transform: scale(1.05); /* 微微放大 */
}

/* 點擊時的微縮效果 */
.rules-banner-btn:active {
    transform: scale(0.95);
}

/* =========================================
   「開始投票」專屬星星按鈕
   ========================================= */
.custom-btn-start {
    background-color: #7992cb !important; /* 圖片中的莫蘭迪藍色 */
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important; /* 圓角設定 */
    /* 套用我們之前設定好的Ｑ彈圓體 */
    font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Nunito", sans-serif;
    font-size: 1.25rem;
    
    /* 🌟 核心排版技巧：讓星星靠邊，文字居中 🌟 */
    display: flex;
    justify-content: space-between; 
    align-items: center;
    padding-left: 24px; /* 控制左邊星星距離邊緣的空間 */
    padding-right: 24px; /* 控制右邊星星距離邊緣的空間 */
    
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 加上一點微陰影增加層次 */
    transition: all 0.2s ease;
}

/* 點擊時的物理回饋感 */
.custom-btn-start:active {
    transform: scale(0.96);
    background-color: #6a83bc !important; /* 點下去稍微變深 */
}

/* 星星的專屬顏色與大小 */
.custom-btn-start .star-icon {
    color: #e5deb2; /* 圖片中的淺黃/米色 */
    font-size: 1.5rem;
    line-height: 1;
    /* 因為星星符號有時視覺中心偏高，用 relative 微微往下壓對齊文字 */
    position: relative;
    top: -2px; 
}

/* 中間文字的設定 */
.custom-btn-start .btn-text {
    letter-spacing: 2px; /* 讓字距稍微拉開，更好看 */
    font-weight: 900;
}

/* =========================================
   「確認PICK」底部專屬星星按鈕
   ========================================= */
.custom-btn-confirm-pick {
    background-color: #7992cb !important; /* 莫蘭迪藍色 */
    color: #ffffff !important;
    border: none !important;
    border-radius: 16px !important; /* 讓四個角都變成圓角，符合圖片樣式 */
    font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Nunito", sans-serif;
    
    /* 排版魔法：星星靠兩邊、文字置中 */
    display: flex;
    justify-content: space-between; 
    align-items: center;
    padding: 16px 24px !important; /* 讓按鈕高度大一點，更好點擊 */
    
    transition: all 0.2s ease;
}

/* 點擊時的微縮回饋 */
.custom-btn-confirm-pick:active {
    transform: scale(0.96);
    background-color: #6a83bc !important;
}

/* 🌟 深藍色星星設定 🌟 */
.custom-btn-confirm-pick .star-icon {
    color: #3b507d; /* 圖片中的深藍色星星 */
    font-size: 1.5rem;
    position: relative;
    top: -2px; 
}

/* 中間文字設定 */
.custom-btn-confirm-pick .btn-text {
    letter-spacing: 1px;
    font-weight: 900;
}

/* =========================================
   首頁專屬「START」按鈕
   ========================================= */
.btn-start-home {
    display: inline-block;
    background-color: #7992cb; /* 莫蘭迪藍色 */
    color: #ffffff !important;
    text-decoration: none;
    
    /* 字體設定：粗圓體 */
    font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Nunito", sans-serif;
    font-weight: 900;
    font-size: 1.3rem; /* 字體稍微大一點，更有入口按鈕的氣勢 */
    letter-spacing: 2px;
    
    /* 形狀與間距 */
    padding: 12px 40px; /* 上下12px，左右40px，撐出寬扁的飽滿感 */
    border-radius: 20px; /* 大圓角矩形，符合圖片的圓潤感 */
    
    /* 陰影與過場動畫 */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 滑鼠移過去稍微變亮浮起 */
.btn-start-home:hover {
    background-color: #8aa3db;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

/* 點擊時的物理 Q 彈回饋 */
.btn-start-home:active {
    transform: scale(0.92) translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}