/*
 * =========================================================================
 * 檔案名稱：CPO.css
 * 系統版本：V0.35 (天璣大補帖：全陣法無縫整合修復卷)
 * 作者宣告：五元網站包租公-Tiger老師
 * 系統說明：天上聖母線上抽籤卜卦 (純前端淨化基底版 - 教科書等級註解)
 * 重點說明：
 * 1. 完整保留所有動畫與 RWD 設定，絕對不壓縮任何程式碼。
 * 2. 採用 CSS 變數實作五套主題色系秒切換陣法。
 * 3. 嚴格執行 3 個空白字元的內縮規範，確保教科書等級的排版。
 * 4. 針對 SEO、AEO、GEO 佈局保留語意化與友善的 RWD 響應式空間。
 * 5. 整合行動版摺疊解盤與圖卡完美 RWD 雙欄陣法。
 * 6. 徹底清除舊版重疊程式碼，整合 V0.13~V0.22 所有升級陣法。
 * =========================================================================
 */

/* =========================================================================
 * 【一、系統全域變數與多主題色系定義 (CSS Variables)】
 * 說明：利用 :root 宣告預設變數，並透過 body[data-theme="..."] 來覆寫變數，
 * 達到不需修改個別 Class 就能全站一鍵換色的「變色龍陣法」。
 * ========================================================================= */

/* 預設主題：關帝赤紅 (符合天上聖母的忠義火紅) */
:root {
   /* 網頁極深色背景，營造科技武俠感的底層空間 */
   --bg-main: #0a0505;          
   /* 主色調：充滿爆發力的科技紅 */
   --primary: #ff1a1a;          
   /* 主色調的 RGB 數值，專門用於設定 rgba 透明度發光特效 */
   --primary-rgb: 255, 26, 26;  
   /* 點綴色：武財神金，用於強調重點與按鈕視覺焦點 */
   --accent: #ffd700;           
   /* 點綴色的 RGB 數值，用於陰影與外發光透明度 */
   --accent-rgb: 255, 215, 0;   
   /* 玻璃擬態 (Glassmorphism) 的半透明背景，提供層次感 */
   --glass-bg: rgba(20, 10, 10, 0.75);     
   /* 玻璃擬態的半透明邊框，讓區塊邊緣帶有微光 */
   --glass-border: rgba(255, 26, 26, 0.3); 
   /* 警告與凶險提示的專用紅色 (如：叮嚀事項的紅字) */
   --danger: #ff4444;           
}

/* 主題二：科技青藍 (Cyber-Wuxia 駭客任務風) */
body[data-theme="cyan"] {
   /* 背景微調為深藍黑色 */
   --bg-main: #050a10;
   /* 主色調切換為科技感極強的青色 (Cyan) */
   --primary: #00ffff;          
   /* 青色的 RGB 數值 */
   --primary-rgb: 0, 255, 255;
   /* 點綴色保持金色，形成高對比 */
   --accent: #ffd700;
   /* 點綴色的 RGB 數值 */
   --accent-rgb: 255, 215, 0;
   /* 玻璃擬態背景帶入微藍色調 */
   --glass-bg: rgba(5, 10, 16, 0.75);
   /* 玻璃擬態邊框轉為半透明青色 */
   --glass-border: rgba(0, 255, 255, 0.3);
}

/* 主題三：武財神金 (求財祈福專用) */
body[data-theme="wealth-gold"] {
   /* 背景微調為極深的金色調 */
   --bg-main: #141100;
   /* 主色調切換為耀眼金，象徵財富 */
   --primary: #ffcc00;          
   /* 金色的 RGB 數值 */
   --primary-rgb: 255, 204, 0;
   /* 點綴色改為正紅色，以鎮壓版面不致浮誇 */
   --accent: #ff0033;           
   /* 點綴色的 RGB 數值 */
   --accent-rgb: 255, 0, 51;
   /* 玻璃擬態背景帶入微黃色調 */
   --glass-bg: rgba(20, 17, 0, 0.75);
   /* 玻璃擬態邊框轉為半透明金色 */
   --glass-border: rgba(255, 204, 0, 0.3);
}

/* 主題四：紫氣東來 (宮廟神聖莊嚴風 - 系統預設) */
body[data-theme="temple-purple"] {
   /* 背景微調為極深的紫色調 */
   --bg-main: #12051a;
   /* 主色調切換為神聖靈氣紫 */
   --primary: #b266ff;          
   /* 紫色的 RGB 數值 */
   --primary-rgb: 178, 102, 255;
   /* 點綴色保持金色，彰顯尊貴 */
   --accent: #ffd700;
   /* 點綴色的 RGB 數值 */
   --accent-rgb: 255, 215, 0;
   /* 玻璃擬態背景帶入微紫色調 */
   --glass-bg: rgba(18, 5, 26, 0.75);
   /* 玻璃擬態邊框轉為半透明紫色 */
   --glass-border: rgba(178, 102, 255, 0.3);
}

/* 主題五：翡翠靈玉 (寧靜自然風) */
body[data-theme="jade-green"] {
   /* 背景微調為極深的綠色調 */
   --bg-main: #05120a;
   /* 主色調切換為生機盎然的翡翠綠 */
   --primary: #00e676;          
   /* 綠色的 RGB 數值 */
   --primary-rgb: 0, 230, 118;
   /* 點綴色保持金色 */
   --accent: #ffd700;
   /* 點綴色的 RGB 數值 */
   --accent-rgb: 255, 215, 0;
   /* 玻璃擬態背景帶入微綠色調 */
   --glass-bg: rgba(5, 18, 10, 0.75);
   /* 玻璃擬態邊框轉為半透明綠色 */
   --glass-border: rgba(0, 230, 118, 0.3);
}


/* =========================================================================
 * 【二、全域重置與基礎佈局 (Global Reset & Base Layout)】
 * 說明：統一各大瀏覽器的基礎樣式，奠定後續排版的穩定基石。
 * ========================================================================= */

/* 星號 (*) 代表網頁中的所有元素，徹底重置預設的盒模型計算方式 */
* {
   /* 讓 padding 與 border 的寬度向內計算，不會撐大原本設定的 width 數值 */
   box-sizing: border-box; 
   /* 清除瀏覽器預設的外部間距，讓排版從零開始 */
   margin: 0;              
   /* 清除瀏覽器預設的內部間距 */
   padding: 0;             
}

/* 網頁主體基礎設定 */
body {
   /* 套用 CSS 變數，設定全站背景底色 */
   background-color: var(--bg-main); 
   /* 字體優先順序：微軟正黑體為主，蘋方體為輔，最後 fallback 到無襯線字體 */
   font-family: "Microsoft JhengHei", "PingFang TC", sans-serif; 
   /* 全站預設文字顏色為白色，確保在深色背景上的高可讀性 */
   color: #ffffff;                   
   /* 嚴格防止因動畫超出邊界或寬度計算誤差，而產生破壞版面的水平捲軸 */
   overflow-x: hidden;               
   /* 利用放射狀漸層 (radial-gradient) 在頁面頂部中央打出一道主色調的高光，創造 3D 空間感 */
   background-image: radial-gradient(circle at center top, rgba(var(--primary-rgb), 0.15) 0%, var(--bg-main) 70%);
}

/* 網頁主內容容器，負責限制寬度並置中，利於 GEO 區域資訊的整齊展示 */
.main-container {
   /* 最大寬度限制為 1000px，確保在超大螢幕上的閱讀舒適度與視線集中 */
   max-width: 1000px;                
   /* 上方留 40px，左右設為 auto 達成絕對水平置中，下方留 20px */
   margin: 40px auto 20px auto;      
   /* 左右保留 15px 內部留白，避免手機版螢幕過窄時文字貼齊螢幕邊緣 */
   padding: 0 15px;                  
}


/* =========================================================================
 * 【三、玻璃擬態面板模組 (Glassmorphism UI)】
 * 說明：作為全站各個獨立區塊(Header, 互動區, 解盤區)的共用基底樣式。
 * ========================================================================= */
.glass-panel {
   /* 背景套用預設的半透明玻璃變數 */
   background: var(--glass-bg);      
   /* 設定 1px 的實線邊框，顏色套用半透明主色調邊框變數 */
   border: 1px solid var(--glass-border); 
   /* 設定 8px 的圓角，讓科技感帶有柔和的武俠圓潤感 */
   border-radius: 8px;               
   /* 區塊內部四周保留 25px 的呼吸空間 */
   padding: 25px;                    
   /* 區塊與下方元素之間保留 10px 的垂直間距 */
   margin-bottom: 10px;              
   /* 雙重陰影設計：外側黑色深陰影增加懸浮立體感，內側(inset)主色發光強化科技燈效 */
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(var(--primary-rgb), 0.1); 
   /* 毛玻璃特效：將此區塊後方(背景)的元素進行 5px 模糊處理，需較新瀏覽器支援 */
   backdrop-filter: blur(5px);       
}


/* =========================================================================
 * 【四、右上角下拉導覽列與選單 (Navigation & Dropdown)】
 * 說明：利用絕對定位佈局選單，並套用精緻的下拉動畫。
 * ========================================================================= */
/* 導覽列定位容器 */
.top-right-nav {
   /* 絕對定位，將其抽離標準文件排版流 */
   position: absolute; 
   /* 固定距離網頁頂部 15px */
   top: 15px;          
   /* 固定距離網頁右側 15px */
   right: 15px;        
   /* Z 軸層級設為 1000，確保選單永遠壓在其他普通元素之上 */
   z-index: 1000;      
}

/* 選單觸發主按鈕 */
.menu-toggle-btn {
   /* 背景填入 10% 透明度的主色調 */
   background: rgba(var(--primary-rgb), 0.1); 
   /* 文字顏色套用主色調 */
   color: var(--primary); 
   /* 邊框設定 1px 實線主色調 */
   border: 1px solid var(--primary); 
   /* 按鈕內部上下 10px、左右 15px 的間距 */
   padding: 10px 15px; 
   /* 按鈕圓角 4px */
   border-radius: 4px; 
   /* 滑鼠移入時顯示為手指圖示，提示此為可點擊元件 */
   cursor: pointer;          
   /* 文字大小設為 1rem (預設字體大小) */
   font-size: 1rem; 
   /* 字體加粗，增加辨識度 */
   font-weight: bold; 
   /* 設定所有的樣式改變(如 hover)都具備 0.3 秒的平滑過渡動畫 */
   transition: all 0.3s ease; 
   /* 按鈕周圍打上主色調發光陰影 */
   box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.3); 
   /* 啟動 Flexbox 排版，讓內部的圖示與文字水平並排 */
   display: flex;            
   /* 讓內部元素在垂直方向絕對居中對齊 */
   align-items: center;      
   /* 設定圖示與文字之間的水平間距為 8px */
   gap: 8px;                 
   /* 強制按鈕內的文字絕對不換行 */
   white-space: nowrap;      
}

/* 按鈕滑鼠懸停時的狀態 */
.menu-toggle-btn:hover {
   /* 滑鼠懸停時，背景完全填滿主色調 */
   background: var(--primary); 
   /* 為了確保高對比度，文字反白轉為黑色 */
   color: #000;                
}

/* 下拉式選單列表容器 */
.dropdown-list {
   /* 初始狀態設定為隱藏，避免阻擋滑鼠點擊下方的元素 */
   visibility: hidden;         
   /* 初始透明度設為 0，用於漸出動畫 */
   opacity: 0;                 
   /* 絕對定位，其參考座標為父元素 .top-right-nav */
   position: absolute;         
   /* 靠右側對齊，與觸發按鈕右切齊 */
   right: 0;                   
   /* 定位在按鈕下方 120% 的位置，預留一點垂直縫隙 */
   top: 120%;                  
   /* 選單背景設為 95% 不透明的極深黑色 */
   background: rgba(10, 5, 5, 0.95); 
   /* 選單外框套用主色調 */
   border: 1px solid var(--primary); 
   /* 選單圓角 4px */
   border-radius: 4px; 
   /* 清除清單標籤 (ul/li) 預設的黑色圓點符號 */
   list-style: none;           
   /* 保障選單最小寬度為 240px，避免文字被擠壓 */
   min-width: 240px;           
   /* 加上極深的大範圍黑色陰影，創造選單浮在空中的立體感 */
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.8); 
   /* 初始狀態先將選單向上偏移 15px，為稍後的下拉出場動畫作準備 */
   transform: translateY(-15px); 
   /* 核心動畫：使用貝茲曲線創造帶有彈性(Q彈)的下拉特效 */
   transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); 
}

/* 當 JavaScript 為選單賦予 .show 類別時，觸發動畫顯示選單 */
.dropdown-list.show {
   /* 將狀態改為可見，允許滑鼠點擊互動 */
   visibility: visible; 
   /* 透明度轉為 1，完全顯示 */
   opacity: 1; 
   /* 取消 Y 軸偏移量，讓選單回歸原位，形成下拉彈出的視覺效果 */
   transform: translateY(0); 
}

/* 下拉選單內的超連結 (a) 樣式 */
.dropdown-list li a {
   /* 文字顏色設為淡灰色 */
   color: #ddd;
   /* 字體大小設定為 15px */
   font-size: 15px; 
   /* 清除超連結預設的下劃線 */
   text-decoration: none;    
   /* 將行內元素轉為區塊元素，讓超連結填滿整個 li 區塊，大幅增加點擊範圍 */
   display: block;           
   /* 內部上下留白 15px，左右留白 18px */
   padding: 15px 18px; 
   /* 項目底部加上一條主色調半透明的虛線，做為分隔線 */
   border-bottom: 1px dashed rgba(var(--primary-rgb), 0.3); 
   /* 設定 0.3 秒的漸變過渡時間 */
   transition: 0.3s; 
}

/* 下拉選單內的超連結懸停狀態 */
.dropdown-list li a:hover {
   /* 滑鼠懸停時，文字顏色轉為點綴色(金黃) */
   color: var(--accent); 
   /* 背景刷上一層淡淡的點綴色 */
   background: rgba(var(--accent-rgb), 0.1); 
   /* 動畫核心：滑鼠懸停時，左側內距加大 5px，讓文字向右推擠，產生互動推力感 */
   padding-left: 25px;
   /* 右側內距微調 */
   padding-right: 15px;       
}


/* =========================================================================
 * 【五、左側懸浮選單 (Floating Color Theme Selector)】
 * 說明：固定於螢幕左側，用來快速切換五行陣法佈景主題。
 * ========================================================================= */
/* 懸浮選單主容器 */
.floating-menu {
   /* 固定定位，不論頁面如何捲動，永遠固定在視窗畫面上 */
   position: fixed;          
   /* 緊貼螢幕絕對左側 */
   left: 0;                  
   /* 初始位置鎖定在螢幕垂直 70% 的高度 */
   top: 70%;                 
   /* 利用 transform 向上偏移自身高度的 50%，達成真正的 Y 軸垂直置中計算 */
   transform: translateY(-50%); 
   /* 啟動 Flexbox 排版陣法 */
   display: flex;            
   /* 改變主軸方向，讓子元素(按鈕)由上到下垂直排列 */
   flex-direction: column;   
   /* 垂直排列的按鈕之間保留 4px 的間距 */
   gap: 4px;                
   /* Z 軸層級設為 999，確保不會被中央主要內容區塊遮擋 */
   z-index: 999;             
   /* 容器內部四周保留 10px 緩衝區 */
   padding: 10px; 
}

/* 單一色系切換圓形按鈕 */
.theme-selector {
   /* 預設文字顏色為白色 */
   color: #fff; 
   /* 清除底線 */
   text-decoration: none; 
   /* 內部文字水平置中 */
   text-align: center; 
   /* 將邊角設為 50%，將正方形切換為正圓形 */
   border-radius: 50%;       
   /* 固定按鈕寬度為 40px */
   width: 40px;              
   /* 固定按鈕高度為 40px，與寬度一致形成完美正圓 */
   height: 40px; 
   /* 行高設定為 36px (考量到邊框厚度)，讓內部文字絕對垂直置中 */
   line-height: 36px;        
   /* 文字加粗 */
   font-weight: bold; 
   /* 邊框顏色直接讀取 HTML 內聯樣式中傳入的 --btn-color CSS 變數 */
   border: 2px solid var(--btn-color); 
   /* 外圍光暈也套用該主題色變數 */
   box-shadow: 0 0 10px var(--btn-color); 
   /* 按鈕背景帶有些微毛玻璃特效 */
   backdrop-filter: blur(3px); 
   /* 懸停漸變時間 0.3 秒 */
   transition: 0.3s; 
}

/* 切換按鈕懸停或被選中 (active) 時的狀態 */
.theme-selector:hover, 
.theme-selector.active {
   /* 背景完全填滿該按鈕專屬的主題色 */
   background: var(--btn-color); 
   /* 為求高對比，文字反白變為黑色 */
   color: #000;                  
}


/* =========================================================================
 * 【六、標題與基礎按鈕元件 (Headers, Selects, Buttons)】
 * 說明：系統主標題、語系下拉與科技武俠風按鈕統一樣式。
 * ========================================================================= */
/* 頂部標題區域容器 */
.header-title-area {
   /* 讓內部的標題與副標題全部水平置中對齊 */
   text-align: center; 
}

/* 霓虹發光主標題 (例如：天上聖母 抽籤卜卦) */
.glow-title {
   /* 字體大小設定為 1.8rem */
   font-size: 1.8rem; 
   /* 標題主色調 */
   color: var(--primary); 
   /* 利用大範圍文字陰影創造霓虹燈管發光效果 */
   text-shadow: 0 0 15px var(--primary); 
   /* 距離下方元素保留 10px 間距 */
   margin-bottom: 10px; 
   /* 增加字元間距為 3px，讓標題更顯大氣與莊嚴 */
   letter-spacing: 3px;                  
}

/* 副標題 (作者宣告或版本) */
.header-subtitle {
   /* 字體大小為 1.1rem */
   font-size: 1.1rem; 
   /* 顏色採用點綴色(金黃) */
   color: var(--accent); 
}

/* 科技武俠風專用下拉式選單 (如：語系選擇 select) */
.cyber-select {
   /* 背景採用 180 度垂直漸層，上半部帶有一點主色調光澤，下半部過渡到深黑色 */
   background: linear-gradient(180deg, rgba(var(--primary-rgb), 0.15) 0%, rgba(10, 5, 5, 0.9) 100%); 
   /* 文字使用主色調 */
   color: var(--primary); 
   /* 邊框為 1px 實線主色調 */
   border: 1px solid var(--primary); 
   /* 圓角 4px */
   border-radius: 4px; 
   /* 取消瀏覽器原生的藍色 Focus 輪廓線，避免破壞科技感 */
   outline: none;            
   /* 滑鼠移入顯示手指圖示 */
   cursor: pointer; 
   /* 內部文字自帶微弱發光 */
   text-shadow: 0 0 5px rgba(var(--primary-rgb), 0.5); 
   /* 外部帶有微弱的陰影光暈 */
   box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.2); 
   /* 0.3秒過渡動畫 */
   transition: all 0.3s ease; 
}

/* 下拉選單滑鼠懸停或取得焦點 (focus) 時的狀態 */
.cyber-select:hover, 
.cyber-select:focus {
   /* 邊框顏色瞬間轉變為點綴色 (金/黃) */
   border-color: var(--accent); 
   /* 文字顏色同步轉變為點綴色 */
   color: var(--accent); 
   /* 陰影光暈放大並轉為點綴色，增加視覺反饋 */
   box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.4); 
}

/* 下拉選單內部選項 (option) 的樣式 */
.cyber-select option {
   /* 當點擊展開時，內部選項區塊的背景色鎖定為純深黑色 */
   background-color: #0a0505; 
   /* 選項文字強制為白色 */
   color: #ffffff; 
}

/* 系統狀態提示文字列容器 (例如：✨ 默念姓名與所求之事... ✨) */
.system-prompt {
   /* 改用 75% 濃度的純黑作為底色防護罩，徹底阻擋底紋穿透干擾 */
   background: rgba(0, 0, 0, 0.75); 
   /* 追加毛玻璃特效：將背後透過去的底紋進行模糊處理，營造頂級科技質感 */
   backdrop-filter: blur(25px);
   /* 加上一圈與主色調呼應的極細邊框，增強區塊的實體邊界感 */
   border: 1px solid rgba(var(--primary-rgb), 0.3);
   /* 左側 4px 的粗邊框，保留系統提示與警告的強烈視覺引導 */
   border-left: 4px solid var(--primary); 
   /* 提示文字維持高對比的純白色 */
   color: #fff; 
   /* 內部四周留白 15px，確保文字有足夠的呼吸空間 */
   padding: 15px; 
   /* 確保內部文字絕對水平置中 */
   text-align: center; 
   /* 字體大小設為 1.1rem，利於行動裝置閱讀 */
   font-size: 1.1rem; 
   /* 右側帶有些微的圓角 4px，呼應全站的武俠圓潤感 */
   border-radius: 4px; 
   /* 加上外發光深色陰影，讓提示列在底紋中產生明顯的高低落差與懸浮感 */
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
}

/* 科技感主按鈕基底共用類別 */
.cyber-btn {
   /* 按鈕背景填充 15% 透明度的主色調 */
   background: rgba(var(--primary-rgb), 0.15); 
   /* 文字顏色為白色 */
   color: #fff; 
   /* 邊框加粗為 2px，立體感更強 */
   border: 2px solid var(--primary); 
   /* 垂直內距 12px，水平內距 30px，讓按鈕看起來大氣好按，增加點擊率 */
   padding: 12px 30px;       
   /* 字體大小 1.2rem */
   font-size: 1.2rem; 
   /* 滑鼠移入顯示手指 */
   cursor: pointer; 
   /* 圓角 4px */
   border-radius: 4px; 
   /* 過渡動畫 0.3 秒 */
   transition: 0.3s; 
   /* 文字陰影增添科技發光感 */
   text-shadow: 0 0 5px var(--primary); 
   /* 按鈕本身帶有主色調外發光 */
   box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.4); 
   /* 按鈕外部保留 5px 間距避免太擁擠 */
   margin: 5px; 
}

/* 主按鈕懸停狀態 */
.cyber-btn:hover {
   /* 背景轉為實心主色調 */
   background: var(--primary); 
   /* 文字反白為黑色 */
   color: #000; 
   /* 懸停時，發光光暈範圍擴大一倍，視覺效果極強 */
   box-shadow: 0 0 20px var(--primary); 
}

/* 強調版本科技按鈕 (同時帶有 cyber-btn 與 accent 類別，通常用於第二順位重要按鈕) */
.cyber-btn.accent {
   /* 覆寫邊框顏色為點綴色(金) */
   border-color: var(--accent);
   /* 覆寫文字顏色為點綴色 */
   color: var(--accent);
   /* 文字發光顏色轉為點綴色 */
   text-shadow: 0 0 5px var(--accent);
   /* 陰影發光顏色轉為點綴色 */
   box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.4);
}

/* 強調版本按鈕的懸停狀態 */
.cyber-btn.accent:hover {
   /* 背景轉為實心點綴色 */
   background: var(--accent);
   /* 文字轉黑 */
   color: #000; 
   /* 發光範圍加倍 */
   box-shadow: 0 0 20px var(--accent);
}

/* =========================================================================
 * 【七、求籤互動區廟宇專屬陣法底紋 (Temple Diamond Lattice)】
 * 說明：利用純 CSS 漸層繪製傳統廟宇的「菱格窗花」，並完美連動五行主題色系。
 * ========================================================================= */
#lottery-action-area {
   /* 疊加陣法：底層維持原本設定好的玻璃擬態半透明背景色 */
   background-color: var(--glass-bg);
   /* 核心底紋陣法：使用重複線性漸層 (repeating-linear-gradient) 
    * 1. 分別繪製 45 度與 -45 度的交叉細線，形成廟宇傳統的「菱格窗花」。
    * 2. 利用 rgba 讀取當下主題色的 RGB 數值。
    * 3. 設定 18% 左右的極低透明度，讓底紋若隱若現，絕不干擾上方文字。
    */
   background-image: 
      repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(var(--primary-rgb), 0.18) 20px, rgba(var(--primary-rgb), 0.18) 21px),
      repeating-linear-gradient(-45deg, transparent, transparent 20px, rgba(var(--primary-rgb), 0.18) 20px, rgba(var(--primary-rgb), 0.18) 21px);
   /* 確保疊加的背景圖片不會溢出原本設定好的 8px 圓角邊界 */
   border-radius: 8px;
}

/* =========================================================================
 * 【八、神機妙算滿版主視覺陣法 (V0.13 升級重構版)】
 * 說明：取代舊有太極陣盤，使用滿版神像圖片進行爆發式祈福動畫。
 * ========================================================================= */
/* 重新校準陣法模組容器的內部文字與排版 */
#taichi-array-module {
   /* 確保內部圖片與元素絕對水平置中 */
   text-align: center;
   /* 距離下方按鈕區塊保留 20px 的呼吸空間 */
   margin-bottom: 20px;
}

/* 設定天上聖母滿版主視覺圖的基礎樣式 */
#CPO-main-vision {
   /* 寬度設定為父容器的 95%，兩側留白營造立體懸浮感 */
   width: 95%;
   /* 最大寬度限制為 800px，確保在電腦大螢幕上畫質依然精緻 */
   max-width: 800px;
   /* 宣告為區塊元素，以利運用 margin 進行精準置中 */
   display: block;
   /* 上下留白 15px，左右 auto 達成絕對水平置中 */
   margin: 15px auto;
   /* 加上 12px 圓角，呼應科技武俠風的柔和邊界 */
   border-radius: 12px;
   /* 綁定主色調的 2px 實線邊框，完美連動五行主題色系 */
   border: 2px solid var(--primary);
   /* 設定所有樣式變更時具備 0.5 秒的平滑過渡 */
   transition: all 0.5s ease-in-out;
}

/* 預設待機特效：神光呼吸陣 (Idle State) */
.CPO-vision-idle {
   /* 呼叫 CPOBreathe 動畫，週期 4 秒，無限平滑循環 */
   animation: CPOBreathe 4s infinite ease-in-out;
}

/* 求籤觸發特效：神明賜福降臨陣 (Active State) */
.CPO-vision-active {
   /* 呼叫 CPODivine 動畫，週期 2.5 秒(配合 JS 抽籤等待時間)，結束後停留在最後一格 */
   animation: CPODivine 2.5s ease-in-out forwards;
}

/* =========================================================================
 * 【九、籤詩解盤區塊佈局 (Lottery Result Architecture)】
 * 說明：負責籤詩結果的卡片式展示，包含吉凶、標題與原始詩文。
 * ========================================================================= */
/* 籤詩結果寬版大卡片容器 */
.card-area.wide-card {
   /* 背景採用 90% 透明度的極黑，蓋住主背景的複雜紋理以利閱讀 */
   background: rgba(5, 5, 5, 0.9); 
   /* 外圍包上一層 2px 的主色調粗框 */
   border: 2px solid var(--primary); 
   /* 內部保留 30px 的大留白 */
   padding: 30px; 
   /* 圓角 8px */
   border-radius: 8px; 
   /* 寬度佔滿父容器 100% */
   width: 100%; 
   /* 確保最大寬度不會超過 1000px，維持版面比例 */
   max-width: 1000px; 
   /* 區塊本身水平置中對齊 */
   margin: 0 auto; 
   /* 相對定位，做為內部可能出現的絕對定位元素的參考點 */
   position: relative; 
   /* 隱藏超出邊界的內容 */
   overflow: hidden; 
}

/* 籤詩頭部區域 (包含吉凶徽章與歷史典故標題 - V0.14 升級靠左對齊) */
.lot-header {
   /* 啟動 Flexbox 陣法進行橫向佈局 */
   display: flex;                
   /* 改為靠左對齊，讓徽章與標題緊密相連，避免長標題斷行難看 */
   justify-content: flex-start; 
   /* 讓內部元素在垂直方向絕對置中 */
   align-items: center;          
   /* 設定徽章與標題之間的間距為 15px */
   gap: 15px;
   /* 底部加上一條玻璃擬態變數的裝飾分隔線 */
   border-bottom: 1px solid var(--glass-border); 
   /* 距離裝飾線保留 15px 的內距 */
   padding-bottom: 15px; 
   /* 距離下方詩文/典故區塊保留 20px 的外距 */
   margin-bottom: 20px; 
}

/* 吉凶徽章標籤 (例如：上上、中吉、下下) */
.lot-badge {
   /* 背景色採用 135 度斜向漸層：由代表凶險的危險紅，過渡到主色紅，營造立體感 */
   background: linear-gradient(135deg, var(--danger), var(--primary)); 
   /* 文字為白色 */
   color: #fff; 
   /* 垂直內距 8px，水平 15px */
   padding: 8px 15px; 
   /* 圓角 4px */
   border-radius: 4px; 
   /* 字體加粗 */
   font-weight: bold; 
   /* 外圍包上一層金色的點綴色實心框，讓徽章極度顯眼 */
   border: 1px solid var(--accent); 
}

/* 籤號與吉凶副標題 (例如：第 01 籤) */
.lot-title {
   /* 將字體放大至 2rem，確立其頁首地位 */
   font-size: 2rem; 
   /* 顏色採用點綴色 */
   color: var(--accent); 
}

/* 易經卦象獨立橫幅區塊 (V0.20 升級陣法) */
.lot-hexagram-box {
   /* 文字絕對置中 */
   text-align: center;
   /* 字體大小 1.15rem */
   font-size: 1.15rem;
   /* 文字純白 */
   color: #fff;
   /* 背景採用 90 度橫向漸層：左右透明，中間透出 30% 主色調，營造發光橫幅感 */
   background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb), 0.3), transparent);
   /* 上下保留 8px，左右 15px 的內距 */
   padding: 8px 15px;
   /* 距離下方典故區塊推開 15px 間距 */
   margin-bottom: 15px;
   /* 上下加上 1px 的半透明主色調實線，強化科技邊界感 */
   border-top: 1px solid rgba(var(--primary-rgb), 0.5);
   border-bottom: 1px solid rgba(var(--primary-rgb), 0.5);
   /* 字元間距加大，提升莊嚴感 */
   letter-spacing: 2px;
   /* 加上微微的主色調文字陰影 */
   text-shadow: 0 0 5px var(--primary);
}

/* 歷史典故長文專屬立體排版方塊 (V0.14 升級陣法) */
.lot-story-detail-box {
   /* 背景採用 8% 透明度的主色調，與純黑背景做出柔和區隔 */
   background: rgba(var(--primary-rgb), 0.08);
   /* 左側加上 4px 的主色調粗框，營造古籍「引言」的視覺效果 */
   border-left: 4px solid var(--primary);
   /* 內部上下保留 15px，左右保留 20px 的舒適閱讀內距 */
   padding: 15px 20px;
   /* 距離下方的詩文黑框保留 20px 的間距 */
   margin-bottom: 20px;
   /* 右側加上 8px 的圓角，左側維持直角以貼合粗邊框，展現科技不對稱美學 */
   border-radius: 0 8px 8px 0;
   /* 文字顏色採用高亮度的淡灰色，確保長時間閱讀不刺眼 */
   color: #eee;
   /* 字體大小設定為 1.1rem，適合長篇故事閱讀 */
   font-size: 1.1rem;
   /* 行高拉大至 1.8 倍，讓上下行文字不互相干擾 */
   line-height: 1.8;
   /* 增加 1px 的字元間距，讓中文字體排列更透氣 */
   letter-spacing: 1px;
   /* 加上極其微弱的文字陰影，提升立體質感 */
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* 原始七言絕句或四句詩文展示區塊 */
.lot-poem-box {
   /* 詩文內容絕對水平置中對齊 */
   text-align: center; 
   /* 四周保留 20px 內距 */
   padding: 20px; 
   /* 背景加上 40% 的深黑遮罩，凸顯詩文 */
   background: rgba(0, 0, 0, 0.4); 
   /* 頂部加上主色調虛線，模仿古書裁切線 */
   border-top: 1px dashed var(--primary);    
   /* 底部同樣加上虛線框 */
   border-bottom: 1px dashed var(--primary); 
   /* 距離下方維度解說區保留 25px 的間距 */
   margin-bottom: 25px; 
}

/* 詩文區塊內的每一行段落 (p 標籤是由 JS 動態產生替換逗號而來) */
.lot-poem-box p {
   /* 詩文字體放大為 1.6rem */
   font-size: 1.6rem; 
   /* 文字為白色 */
   color: #fff; 
   /* 極度重要：刻意加大字元間距至 4px，營造古文詩詞在朗讀時的獨特節奏感 */
   letter-spacing: 4px; 
   /* 行高設為 1.8 倍，讓上下詩句不擁擠 */
   line-height: 1.8; 
}


/* =========================================================================
 * 【十、傳統解籤網格佈局陣法 (CSS Grid System)】
 * 說明：利用現代 CSS Grid 技術，將聖意、東坡解等區塊漂亮地分割為三欄。
 * 整合 V0.21 (三欄網格) 與 V0.22 (同行顯示) 升級陣法。
 * ========================================================================= */
/* 網格佈局外層容器 */
.lot-grid-dimensions {
   /* 啟動 CSS Grid 網格陣法 */
   display: grid;                     
   /* 宣告欄位規則：定義三欄，每欄皆佔據 1 份可用彈性空間 (1fr) */
   grid-template-columns: repeat(3, 1fr);    
   /* 設定網格項目之間的垂直與水平溝槽間距均為 15px */
   gap: 15px;                         
   /* 距離下方天璣解盤保留 25px 間距 */
   margin-bottom: 25px; 
}

/* 單一個傳統維度解說項目區塊 (如：聖意) */
.dim-item {
   /* 背景帶有極淡(5%)的主色調，區隔視覺 */
   background: rgba(var(--primary-rgb), 0.05); 
   /* 左側加上 3px 的主色調實線做為視覺引導 */
   border-left: 3px solid var(--primary); 
   /* 內部保留 15px 閱讀空間 */
   padding: 15px; 
}

/* 需要獨占整行的特殊網格項目 (例如：文字通常最長的【占驗】) */
.dim-item.full-width {
   /* 網格黑科技：使用 1 / -1 語法，命令該區塊從第一條網格線跨到最後一條，強制滿版！ */
   grid-column: 1 / -1 !important;               
}

/* 傳統維度小標題 (如：【聖意】、【解曰】) */
.dim-label {
   /* 顏色套用主色調 */
   color: var(--primary); 
   /* 字體大小 1.1rem */
   font-size: 1.1rem; 
   /* 強制覆寫為行內區塊，允許元素並排，取消強迫換行 (V0.22 升級) */
   display: inline-block !important;                    
   /* 移除底部空間，讓同行排版更緊湊 (V0.22 升級) */
   margin-bottom: 0 !important; 
   /* 取消預設加粗，回歸古籍平實感 */
   font-weight: normal; 
   /* 視覺特效：利用左右兩側微小的文字陰影，創造出一種類似古籍印刷時「墨水暈開」的錯覺 */
   text-shadow: 0.5px 0 0 var(--primary), -0.5px 0 0 var(--primary); 
}

/* 傳統維度解說的內文 */
.dim-text { 
   /* 文字採用淡灰色，降低視覺干擾 */
   color: #ddd; 
   /* 設定 1.6 倍行高，利於長篇閱讀 */
   line-height: 1.6; 
   /* 強制覆寫為行內元素，達成完美的單行顯示 (V0.22 升級) */
   display: inline !important; 
}


/* =========================================================================
 * 【十一、天璣居士獨家解盤與行動版摺疊陣法 (Master Analysis & Accordion UI)】
 * 說明：此區塊為系統核心價值，採用點綴色系進行視覺強調。並整合了
 * 行動版專屬的摺疊(Accordion)機制，提升小螢幕閱讀體驗。
 * ========================================================================= */
/* 獨家解盤總容器 */
.lot-master-box {
   /* 背景使用點綴色(金黃)的 5% 透明度，與傳統解盤的主色紅做出區隔 */
   background: rgba(var(--accent-rgb), 0.05); 
   /* 邊框同樣使用 30% 透明度的點綴色 */
   border: 1px solid rgba(var(--accent-rgb), 0.3); 
   /* 內部四周留白 20px */
   padding: 20px; 
   /* 圓角 8px */
   border-radius: 8px; 
}

/* 獨家解盤大標題 (💬 天璣居士・獨家解盤：) */
.master-title { 
   /* 顏色套用點綴色 */
   color: var(--accent); 
   /* 底部加上虛線分隔線 */
   border-bottom: 1px dashed var(--accent); 
   /* 距離分隔線留白 10px */
   padding-bottom: 10px; 
   /* 距離下方內容留白 15px */
   margin-bottom: 15px; 
}

/* 解盤段落小標籤 (【原釋義】、【天璣解籤】) */
.master-label { 
   /* 顏色為點綴色 */
   color: var(--accent); 
   /* 字體加粗 */
   font-weight: bold; 
   /* 宣告區塊元素強迫換行 */
   display: block; 
   /* 距下方 8px */
   margin-bottom: 8px; 
   /* 字體 1.15rem */
   font-size: 1.15rem; 
}

/* 解盤段落內文 */
.master-text { 
   /* 文字純白，確保最清晰的閱讀體驗 */
   color: #fff; 
   /* 行高拉大至 1.8，適合深入閱讀解說 */
   line-height: 1.8; 
   /* 字體大小 1.05rem */
   font-size: 1.05rem; 
}

/* 用於強調的解盤段落容器 (如：天璣解籤本體) */
.master-section.highlight { 
   /* 距離上方段落強制推開 25px 的空間，做出層次區分 */
   margin-top: 25px; 
}

/* 原釋義/總結與下方六大維度細項之間的分隔線 */
.master-divider {
   /* 使用點綴色建立 1px 的虛線分隔 */
   border-top: 1px dashed rgba(var(--accent-rgb), 0.4); 
   /* 上下保留 25px 大間距 */
   margin: 25px 0; 
}

/* 六大詳細維度的小標題 (❖ 事業前途、❖ 感情姻緣 等) */
.master-sub-label {
   /* 顏色為點綴色 */
   color: var(--accent); 
   /* 字體加粗 */
   font-weight: bold; 
   /* 區塊元素強迫換行 */
   display: block; 
   /* 距上方段落推開 20px */
   margin-top: 20px; 
   /* 距下方內文推開 8px */
   margin-bottom: 8px; 
   /* 字體 1.1rem */
   font-size: 1.1rem; 
   /* 文字外發光提升精緻度 */
   text-shadow: 0 0 5px rgba(var(--accent-rgb), 0.5); 
}

/* ⚠️ 紅字叮嚀事項專屬樣式 (極度危險與重要) */
.master-warning {
   /* 強制使用 CSS 變數定義的危險紅，並加上 !important 宣告，絕對不允許被覆蓋 */
   color: var(--danger) !important;  
   /* 字體加粗 */
   font-weight: bold; 
   /* 區塊換行 */
   display: block; 
   /* 距上方 25px */
   margin-top: 25px; 
   /* 距下方 8px */
   margin-bottom: 8px; 
   /* 字體 1.1rem */
   font-size: 1.1rem; 
   /* 加上大範圍的紅色發光陰影，營造神明警告的強烈視覺壓迫感 */
   text-shadow: 0 0 8px rgba(255, 68, 68, 0.4); 
}


/* =========================================================================
 * 【十二、圖卡匯出與 RWD 雙欄堆疊陣法 (Canvas Export & RWD Layout)】
 * 說明：圖卡底部的專屬 QRCode 區域排版，支援手機窄螢幕的上下堆疊自適應。
 * ========================================================================= */
/* 圖卡 QRCode 總容器 */
.card-qrcode { 
   /* 內部所有內容絕對水平置中 */
   text-align: center; 
   /* 與上方內容距離 25px */
   margin-top: 25px; 
   /* 網頁上預設不顯示，避免影響一般瀏覽，僅供截圖瞬間喚醒 */
   display: none; 
}

/* 圖卡底部雙欄平衡陣法 (RWD 外層容器) */
.card-qr-wrapper {
   /* 啟動 Flexbox 排版 */
   display: flex;
   /* 讓內部左右兩側區塊置中對齊 */
   justify-content: center;
   /* 確保垂直對齊於中央 */
   align-items: center;
   /* 桌機版維持左右 40px 的安全間距 */
   gap: 40px; 
   /* 與上方內容拉開 25px 內距 */
   padding-top: 25px;
   /* 加上 25px 的外距推開空間 */
   margin-top: 25px;
   /* 加入主色調半透明的頂部虛線分隔線 */
   border-top: 1px dashed rgba(var(--primary-rgb), 0.5);
}

/* QRCode 圖片本體外框修飾 */
.card-qrcode img { 
   /* 外圍加上 2px 實線點綴色邊框 */
   border: 2px solid var(--accent); 
   /* 圓角 4px */
   border-radius: 4px; 
   /* 內距 5px，形成白色畫框效果 */
   padding: 5px; 
   /* 確保圖片底色為純白，以利手機掃描 */
   background: #fff; 
   /* 圖片外圍加上點綴色光暈 */
   box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.5); 
   /* 限制 QRCode 圖片最大寬度不超過 120px，避免圖卡底部頭重腳輕 */
   max-width: 120px; 
   /* 高度依比例自動縮放 */
   height: auto; 
}

/* 圖卡專屬賜福文字標題 (天上聖母 賜福靈籤) */
.card-watermark-title {
   /* 顏色套用點綴色 */
   color: var(--accent); 
   /* 字體 1.3rem */
   font-size: 1.3rem; 
   /* 字體加粗 */
   font-weight: bold; 
   /* 增加字距 3px，提升神聖感 */
   letter-spacing: 3px; 
   /* 文字外發光 */
   text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.8); 
   /* 文字底部加上一條主色調的裝飾虛線 */
   border-bottom: 1px dashed var(--primary); 
   /* 距離虛線 5px */
   padding-bottom: 5px; 
   /* 距上方 QRCode 5px */
   margin-top: 5px; 
}

/* 圖卡最底部的當前分享網址 */
.card-watermark-url {
   /* 顏色為淡灰 */
   color: #ddd; 
   /* 字體縮小為 0.85rem，做為註腳 */
   font-size: 0.85rem; 
   /* 強制使用等寬字體(monospace)，這是排版英文網址或程式碼的最佳實踐 */
   font-family: monospace;    
   /* 字距 1px */
   letter-spacing: 1px; 
   /* 稍微降低透明度至 0.8，避免網址搶走神明賜福標題的視覺焦點 */
   opacity: 0.8;              
}


/* =========================================================================
 * 【十三、廠商贊助與廣告區塊 (Ad Grid & Carousel)】
 * 說明：支援多欄位廣告與具備 RWD 自適應能力的 16:9 圖片輪播器。
 * ========================================================================= */
/* 側邊欄或廣告區塊的副標題 (h2) */
aside h2 {
   /* 顏色套用點綴色 */
   color: var(--accent); 
   /* 文字置中 */
   text-align: center; 
   /* 距下方內容 20px */
   margin-bottom: 20px; 
}

/* 友情連結與文字廣告網格容器 */
.ad-grid {
   /* 啟動 CSS Grid 陣法 */
   display: grid; 
   /* 關鍵設定：在桌機版強制建立 3 個等寬的網格空間 (1fr)，實現三欄並排 */
   grid-template-columns: repeat(3, 1fr); 
   /* 網格間距為 15px */
   gap: 15px; 
}

/* 單筆文字廣告按鈕樣式 */
.text-ad {
   /* 使用 Flexbox 讓內部的圖示與文字垂直對齊 */
   display: flex; 
   align-items: center; 
   /* 文字白色 */
   color: #fff; 
   /* 移除超連結底線 */
   text-decoration: none; 
   /* 背景塗上 50% 的半透明黑 */
   background: rgba(0, 0, 0, 0.5); 
   /* 內距設定 */
   padding: 12px 15px; 
   /* 圓角 4px */
   border-radius: 4px; 
   /* 邊框為 30% 透明度的主色調 */
   border: 1px solid rgba(var(--primary-rgb), 0.3); 
   /* 0.3 秒過渡動畫 */
   transition: all 0.3s ease; 
}

/* 單筆文字廣告的懸停互動狀態 */
.text-ad:hover {
   /* 文字轉為點綴色 */
   color: var(--accent); 
   /* 邊框同步轉為點綴色 */
   border-color: var(--accent); 
   /* 視覺特效：Y 軸向上移動 2px，產生被「吸起」的物理回饋感 */
   transform: translateY(-2px); 
   /* 加上底部陰影，增強立體浮空感 */
   box-shadow: 0 4px 10px rgba(var(--accent-rgb), 0.2); 
}

/* 廣告按鈕前方的紅色小圖示 */
.red-icon {
   /* 顏色強制為主色調 */
   color: var(--primary); 
   /* 距右側文字 10px */
   margin-right: 10px; 
}

/* --- 以下為 16:9 圖片輪播區 (Carousel Engine) CSS --- */
/* 輪播器最外層容器 */
.ad-carousel-wrapper {
   /* 寬度佔滿可用空間 */
   width: 100%; 
   /* 現代 CSS 神兵利器：強制鎖定區塊的寬高比為 16:9，無論螢幕多大，完美適配標準圖片尺寸 */
   aspect-ratio: 16 / 9;      
   /* 相對定位，讓內部的絕對定位控制箭頭與浮動文字有一個精確的參考座標點 */
   position: relative;        
   /* 絕對隱藏超出框外的圖片軌道，達成「遮罩」與裁切效果 */
   overflow: hidden;          
   /* 2px 實線主色邊框 */
   border: 2px solid var(--primary); 
   /* 圓角 8px */
   border-radius: 8px; 
}

/* 圖片滑動軌道 (JS 操控的核心對象) */
.ad-slider-track {
   /* 啟動 Flexbox，讓內部的每一張幻燈片 (Slide) 水平橫向排成一長列 */
   display: flex;             
   /* 初始寬度設定為 500% (假設 5 張圖)。此數值將會在 JS 甦醒機制中被動態重新計算覆寫 */
   width: 500%;               
   /* 高度與容器一致 */
   height: 100%; 
   /* 動畫引擎核心：當 CSS transform 被 JS 改變時，利用 0.5 秒執行平滑的左右滑動動畫 */
   transition: transform 0.5s ease-in-out; 
}

/* 單一張幻燈片區塊 */
.ad-slide {
   /* 初始寬度為 20% (100% / 5)。同樣會被 JS 依據實際圖片張數動態覆寫，確保單張圖剛好塞滿一個畫面 */
   width: 20%;                
   /* 相對定位，供內部文字參考 */
   position: relative; 
}

/* 幻燈片內的實體 img 圖片 */
.ad-slide img {
   /* 寬度撐滿幻燈片 */
   width: 100%; 
   /* 高度撐滿幻燈片 */
   height: 100%; 
   /* 核心裁切技術：讓圖片等比例縮放並填滿整個區塊，多餘的部分自動裁切掉，絕不變形 */
   object-fit: cover;         
   /* 預設透明度降為 0.7，稍微暗一點，凸顯上的層文字 */
   opacity: 0.7;              
   /* 透明度過渡動畫 */
   transition: 0.3s; 
}

/* 滑鼠懸停於幻燈片時，讓圖片恢復全亮 */
.ad-slide:hover img { 
   opacity: 1;                
}

/* 廣告圖片上左上角的浮動標題文字 */
.ad-slide-title {
   /* 絕對定位 */
   position: absolute; 
   /* 距頂部 20px */
   top: 20px; 
   /* 距左側 20px */
   left: 20px; 
   /* 背景加上 80% 的黑色保護層 */
   background: rgba(0, 0, 0, 0.8); 
   /* 文字白色 */
   color: #fff; 
   /* 內距設定 */
   padding: 10px 20px; 
   /* 左側加上 4px 點綴色粗框，強調標題重點 */
   border-left: 4px solid var(--accent); 
   /* 字體 1.2rem */
   font-size: 1.2rem; 
}

/* 廣告圖片上右下角的浮動連結按鈕 */
.ad-slide-link {
   /* 絕對定位 */
   position: absolute; 
   /* 距底部 20px */
   bottom: 20px; 
   /* 距右側 20px */
   right: 20px; 
   /* 背景採用 80% 主色調 */
   background: rgba(var(--primary-rgb), 0.8); 
   /* 文字白色 */
   color: #fff; 
   /* 內距設定 */
   padding: 10px 20px; 
   /* 清除底線 */
   text-decoration: none; 
   /* 邊框主色調 */
   border: 1px solid var(--primary); 
   /* 圓角 4px */
   border-radius: 4px; 
   /* 漸變動畫 */
   transition: 0.3s; 
}

/* 連結按鈕的懸停狀態 */
.ad-slide-link:hover {
   /* 背景轉為點綴色 */
   background: var(--accent); 
   /* 文字轉黑 */
   color: #000; 
}

/* 輪播圖左右切換箭頭共用樣式 */
.ad-arrow {
   /* 絕對定位 */
   position: absolute; 
   /* 定位在垂直 50% 處 */
   top: 50%;                  
   /* 利用 translateY 向上偏移自身高度一半，達成完美的絕對垂直置中 */
   transform: translateY(-50%); 
   /* 背景 60% 黑 */
   background: rgba(0, 0, 0, 0.6); 
   /* 箭頭符號顏色套用主色調 */
   color: var(--primary); 
   /* 移除預設的邊框 */
   border: none; 
   /* 將箭頭符號放大為 2rem */
   font-size: 2rem; 
   /* 上下 15px，左右 10px 的點擊範圍 */
   padding: 15px 10px; 
   /* 顯示可點擊手指 */
   cursor: pointer; 
   /* Z 軸設為 10，確保按鈕必定蓋在滑動的圖片軌道之上 */
   z-index: 10;               
}

/* 左箭頭貼齊左側 */
.ad-arrow-prev { left: 0; }
/* 右箭頭貼齊右側 */
.ad-arrow-next { right: 0; }

/* 輪播圖底部導覽小圈圈的容器 */
.ad-dots-container {
   /* 絕對定位 */
   position: absolute;
   /* 距離底部 15px */
   bottom: 15px;
   /* 從左側開始算 */
   left: 0;
   /* 寬度佔滿 100%，以利後續置中計算 */
   width: 100%;
   /* 使用 Flexbox 排版 */
   display: flex;
   /* 將內部的小圈圈群體推向水平正中央 */
   justify-content: center;
   /* 確保不會被圖片蓋住 */
   z-index: 10;
}

/* 單一導覽小圈圈的基本外觀 */
.ad-dot {
   /* 寬度 10px */
   width: 10px;
   /* 高度 10px */
   height: 10px;
   /* 左右各保留 5px 間距，讓圈圈不沾黏 */
   margin: 0 5px;
   /* 預設顏色為 50% 的半透明白 */
   background-color: rgba(255, 255, 255, 0.5);
   /* 50% 圓角，變成正圓 */
   border-radius: 50%;
   /* 可點擊手指 */
   cursor: pointer;
   /* 背景色漸變動畫 0.3 秒 */
   transition: background-color 0.3s ease;
}

/* 目前作用中 (Active) 對應當下幻燈片的小圈圈發光外觀 */
.ad-dot.active {
   /* 讀取 CSS 變數的點綴色，若無則降級為青色保護 */
   background-color: var(--accent, #00ffff);
   /* 加上同色的光暈，標示當前進度 */
   box-shadow: 0 0 8px var(--accent, #00ffff);
}


/* =========================================================================
 * 【十四、頁腳資訊與流量計數器 (Footer & Counters)】
 * 說明：系統版權宣告、作者資訊與 AJAX 動態載入的計數器介面。
 * ========================================================================= */
/* 科技武俠風頁腳容器 */
.cyber-footer-info {
   /* 內容水平置中 */
   text-align: center; 
   /* 上下內距 40px，左右 20px 大氣留白 */
   padding: 40px 20px; 
   /* 背景加上 80% 的黑色重磅壓底 */
   background: rgba(0, 0, 0, 0.8); 
   /* 頂部加上 2px 的主色調粗線做為區隔 */
   border-top: 2px solid var(--primary); 
   /* 內文為淡灰色 */
   color: #ccc; 
   /* 行高 1.8 */
   line-height: 1.8; 
}

/* 頁腳內的標題 (h3) */
.cyber-footer-info h3 { 
   /* 顏色為主色調 */
   color: var(--primary); 
   /* 距下方 15px */
   margin-bottom: 15px; 
}

/* 頁腳內的強調字眼 (strong) */
.cyber-footer-info strong { 
   /* 顏色為點綴色，凸顯作者或重點宣告 */
   color: var(--accent); 
}

/* 作者詳細資訊的文字虛線框 */
.info-content-box {
   /* 轉換為行內區塊，讓寬度由內容決定但仍可設定內外距，同時配合外層的 text-align 置中 */
   display: inline-block; 
   /* 框內文字改為靠左對齊，方便閱讀條列式資訊 */
   text-align: left; 
   /* 1px 點綴色虛線邊框 */
   border: 1px dashed var(--accent); 
   /* 內距設定 */
   padding: 20px 30px; 
   /* 圓角 8px */
   border-radius: 8px; 
   /* 背景抹上淡淡(5%)的點綴色 */
   background: rgba(var(--accent-rgb), 0.05); 
   /* 距下方 25px */
   margin-bottom: 25px; 
}

/* 作者資訊框內的段落 */
.info-content-box p { 
   /* 距下方 10px */
   margin-bottom: 10px; 
   /* 字體 1.1rem */
   font-size: 1.1rem; 
   /* 淡灰色 */
   color: #ccc; 
}

/* 針對最後一個段落，取消底部留白，維持框內上下間距對稱 */
.info-content-box p:last-child { 
   margin-bottom: 0;          
}

/* 底部社群分享按鈕群組容器 */
.footer-action-buttons {
   /* 啟動 Flexbox 排版 */
   display: flex; 
   /* 整個按鈕群置中 */
   justify-content: center; 
   /* 按鈕之間保留 15px 溝槽間距 */
   gap: 15px; 
   /* 上下外距 25px */
   margin: 25px 0; 
}

/* 科技感次級操作按鈕 (例如分享 FB, LINE) */
.cyber-action-btn {
   /* 背景透明，依賴邊框呈現輪廓 */
   background: transparent; 
   /* 邊框點綴色 */
   border: 1px solid var(--accent); 
   /* 文字點綴色 */
   color: var(--accent); 
   /* 內距設定 */
   padding: 8px 20px; 
   /* 清除底線 */
   text-decoration: none; 
   /* 圓角 4px */
   border-radius: 4px; 
   /* 0.3 秒漸變動畫 */
   transition: 0.3s; 
   /* 手指游標 */
   cursor: pointer; 
}

/* 操作按鈕懸停狀態 */
.cyber-action-btn:hover {
   /* 背景填滿點綴色 */
   background: var(--accent); 
   /* 文字反黑 */
   color: #000; 
}

/* 頁腳最底部的版權宣告小字 */
.cyber-footer-copyright { 
   /* 距上方 20px */
   margin-top: 20px; 
   /* 字體縮小為 0.9rem */
   font-size: 0.9rem; 
   /* 深灰色，降低干擾 */
   color: #777; 
}

/* 最底部用來容納流量計數器的深色區帶 */
.counter-footer {
   /* 寬度 100% 滿版 */
   width: 100%; 
   /* 背景純黑 */
   background: #000; 
   /* 上下內距 12px */
   padding: 12px 0; 
   /* 頂部主色調實線 */
   border-top: 1px solid var(--primary); 
}

/* 計數器項目的群組容器 */
.counter-group { 
   /* Flex 排版 */
   display: flex; 
   /* 置中 */
   justify-content: center; 
   /* 間隔 20px */
   gap: 20px; 
}

/* 單個獨立的計數項目框 (如：今日入陣) */
.counter-item {
   /* Flex 排版 */
   display: flex; 
   /* 方向改為垂直：讓標題在上，數字在下 */
   flex-direction: column;    
   /* 水平置中 */
   align-items: center; 
   /* 標題文字灰色 */
   color: #aaa; 
   /* 標題字體 0.9rem */
   font-size: 0.9rem; 
   /* 背景刷上 5% 微弱的白，拉出層次 */
   background: rgba(255, 255, 255, 0.05); 
   /* 內距設定 */
   padding: 8px 25px; 
   /* 圓角 4px */
   border-radius: 4px; 
   /* 深色邊框包覆 */
   border: 1px solid #333; 
   /* 最小寬度保障，避免數字位數變化時框忽大忽小 */
   min-width: 120px; 
}

/* 計數器內跳動的數字本體 (會被 JS 的 K 值引擎轉換) */
.count-val {
   /* 數字為點綴色 */
   color: var(--accent); 
   /* 加粗 */
   font-weight: bold; 
   /* 放大至 1.3rem */
   font-size: 1.3rem; 
   /* 距上方標題 5px */
   margin-top: 5px; 
   /* 數字發光陰影 */
   text-shadow: 0 0 5px rgba(var(--accent-rgb), 0.5); 
}


/* =========================================================================
 * 【十五、專屬 QRCode 彈跳視窗陣法 (Modal UI)】
 * 說明：以 fixed 絕對定位覆蓋全螢幕的黑色半透明遮罩，展示網址 QRCode。
 * ========================================================================= */
/* 彈跳視窗最外層的黑色遮罩 */
.qr-modal { 
   /* 固定定位，將遮罩鎖死在螢幕上，無懼捲軸捲動 */
   position: fixed; 
   /* 貼齊頂部 */
   top: 0; 
   /* 貼齊左側 */
   left: 0; 
   /* 寬度 100% 滿版 */
   width: 100%; 
   /* 高度 100% 滿版 */
   height: 100%; 
   /* 背景塗上高達 85% 不透明的純黑，強烈遮蓋背後內容 */
   background: rgba(0,0,0,0.85); 
   /* Z 軸設為 1001，確保超越導覽列的 1000 成為全場最高層級 */
   z-index: 1001;             
   /* 預設隱藏，由 JS 控制 display 屬性來喚醒 */
   display: none;             
   /* Flex 陣法水平置中內容 */
   justify-content: center; 
   /* Flex 陣法垂直置中內容 */
   align-items: center; 
}

/* 彈跳視窗的中央白色/深色內容主體卡片 */
.qr-modal-content { 
   /* 背景套用全域深色變數 */
   background: var(--bg-main); 
   /* 外圍包上 2px 主色調框線 */
   border: 2px solid var(--primary); 
   /* 內距 30px */
   padding: 30px; 
   /* 圓角 8px */
   border-radius: 8px; 
   /* 內部文字置中 */
   text-align: center; 
   /* 相對定位，供右上角關閉按鈕做為基準點 */
   position: relative; 
   /* 寬度預設 90%，適應手機版 */
   width: 90%; 
   /* 最大寬度限制為 350px，確保在桌機上不會過度膨脹 */
   max-width: 350px; 
}

/* 彈跳視窗右上角的 (X) 關閉按鈕 */
.qr-close-btn { 
   /* 絕對定位 */
   position: absolute; 
   /* 距離卡片頂部 10px */
   top: 10px; 
   /* 距離卡片右側 15px */
   right: 15px; 
   /* 白色字體 */
   color: #fff; 
   /* 放大至 1.5rem */
   font-size: 1.5rem; 
   /* 手指游標提示可關閉 */
   cursor: pointer; 
}

/* 卡片內的標題 (h3) */
.qr-modal-content h3 { 
   /* 距下方內容 20px */
   margin-bottom: 20px; 
}

/* QRCode 圖片與自訂容器的共用強制排版 */
#qrImage, #qrPlaceholder { 
   /* 強制覆蓋外距，上下推開 20px 保留閱讀呼吸空間 */
   margin-top: 20px !important; 
   margin-bottom: 20px !important; 
}


/* =========================================================================
 * 【十六、神機妙算特效動畫引擎陣法 (CSS Animations)】
 * 說明：利用 @keyframes 實作神明呼吸發光與 3D 銅錢擲筊的拋物線翻轉。
 * ========================================================================= */

/* --- 16.1 滿版主視覺特效動畫 (V0.13 重構) --- */
/* 神明賜福：待機呼吸陣關鍵影格定義 */
@keyframes CPOBreathe {
   /* 起點與終點：位移歸零，外圍散發與主色調呼應的微弱光暈 */
   0%, 100% {
      transform: translateY(0);
      box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.3);
   }
   /* 動畫中點：向上懸浮 5px，光暈擴大加強，營造神明呼吸的生命力 */
   50% {
      transform: translateY(-5px);
      box-shadow: 0 0 25px rgba(var(--primary-rgb), 0.7);
   }
}

/* 神明賜福：降臨陣關鍵影格定義 (抽籤時爆發) */
@keyframes CPODivine {
   /* 起點：原始大小，亮度正常，帶有點綴色(金黃)的基礎光暈 */
   0% {
      transform: scale(1);
      box-shadow: 0 0 30px rgba(var(--accent-rgb), 0.8);
      filter: brightness(1);
   }
   /* 中點：圖片微幅放大 1.05 倍，亮度提升 1.3 倍，點綴色金光極限爆發 */
   50% {
      transform: scale(1.05);
      box-shadow: 0 0 60px rgba(var(--accent-rgb), 1);
      filter: brightness(1.3);
   }
   /* 終點：恢復原始大小與亮度，保留溫和的金色賜福光暈 */
   100% {
      transform: scale(1);
      box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.5);
      filter: brightness(1);
   }
}

/* --- 16.2 古銅錢 3D 擲筊模組 --- */
/* 銅錢的佈局容器 */
.coin-container { 
   /* Flex 排版 */
   display: flex; 
   /* 水平居中 */
   justify-content: center; 
   /* 垂直居中 */
   align-items: center; 
   /* 兩枚銅錢之間距離 40px */
   gap: 40px; 
   /* 寬度滿版 */
   width: 100%; 
   /* 外距排版 */
   margin: 40px auto 10px auto; 
   z-index: 11; 
   /* 極度重要：建立 800px 深度的 3D 視角景深空間，數字越小透視畸變感越強烈 */
   perspective: 800px;        
}

/* 銅錢本體基礎設定 */
.copper-coin { 
   /* 寬 60px */
   width: 60px; 
   /* 高 60px */
   height: 60px; 
   /* 相對定位供正反面疊加參考 */
   position: relative; 
   /* 3D 陣法神兵：命令此元素保留子元素 (正反兩面) 的 3D Z軸空間深度，這是銅錢能夠立體翻轉的核心關鍵 */
   transform-style: preserve-3d; 
   /* 翻轉時的過渡動畫：設定 1 秒的 ease-out (由快漸慢)，創造落地減速的物理摩擦感 */
   transition: transform 1s ease-out; 
}

/* 銅錢單一面 (陽面與陰面共同套用的基礎樣式) */
.coin-face { 
   /* 絕對定位，將正反兩面完全重疊在同一位置 */
   position: absolute; 
   top: 0; left: 0; 
   /* 尺寸繼承父層 */
   width: 100%; 
   height: 100%; 
   /* 削成圓形 */
   border-radius: 50%; 
   /* 神秘 3D 語法：當這一面隨著 3D 旋轉而背對使用者時，立刻將其設為隱藏 (invisible)，這樣才不會透視過去看到反字的假象 */
   backface-visibility: hidden; 
   /* 為銅錢加上邊緣陰影與內側刻痕凹陷感 */
   box-shadow: 0 5px 10px rgba(0,0,0,0.8), inset 0 0 10px rgba(0,0,0,0.5); 
}

/* 銅錢正面 (陽面 / 聖面，通常為金黃底) */
.coin-front { 
   /* 繪製古銅錢的同心圓漸層金屬反光質感 */
   background: radial-gradient(circle at 30% 30%, #ffd700 0%, #b32400 60%, #4d0000 100%); 
   /* 金黃邊框 */
   border: 2px solid #ffcc00; 
   /* 初始狀態，Y 軸轉角為 0 度 (正面朝上) */
   transform: rotateY(0deg);  
}

/* 銅錢背面 (陰面 / 字面，通常為暗紅底) */
.coin-back { 
   /* 繪製背面較暗沉的金屬漸層 */
   background: radial-gradient(circle at 30% 30%, #8b0000 0%, #4d0000 60%, #1a0000 100%); 
   /* 暗紅邊框 */
   border: 2px solid #5a0000; 
   /* 初始狀態，將其在 3D 空間中翻轉 180 度，預先藏在正面背後 */
   transform: rotateY(180deg); 
}

/* 利用偽元素 ::after 在銅錢中心挖出一個「方孔」 */
.coin-face::after { 
   content: ""; 
   /* 絕對定位至正中央 */
   position: absolute; 
   top: 50%; left: 50%; 
   /* 偏移自身一半達成完美置中 */
   transform: translate(-50%, -50%); 
   /* 方孔寬 15px */
   width: 15px; 
   /* 方孔高 15px */
   height: 15px; 
   /* 背景色採用網頁底色，製造出「穿透鏤空」的錯覺 */
   background: var(--bg-main); 
}

/* 正面方孔的內側邊框陰影 */
.coin-front::after { border: 1px solid #ffcc00; box-shadow: inset 0 0 5px rgba(0,0,0,0.9); }
/* 背面方孔的內側邊框陰影 (較深) */
.coin-back::after { border: 1px solid #3a0000; box-shadow: inset 0 0 8px rgba(0,0,0,0.9); }

/* --- JS 動態呼叫的拋擲翻滾類別 --- */
/* 當 JS 賦予 tossing 時，執行 1 秒的 toss-flip 拋空動畫，forwards 代表停留在動畫最後一格的狀態 */
.copper-coin.tossing { animation: toss-flip 1s ease-in-out forwards; }
/* 若判定結果為陽，鎖定在 0 度 */
.copper-coin.yang { transform: rotateY(0deg); }    
/* 若判定結果為陰，翻轉鎖定在 180 度 */
.copper-coin.yin { transform: rotateY(180deg); }   

/* 神明拋物線擲筊運算核心：銅錢拋空翻轉動畫 */
@keyframes toss-flip { 
   /* 0% 起點：靜止在原點 */
   0% { transform: translateY(0) rotateY(0deg) scale(1); } 
   /* 50% 頂點：利用 Y 軸負向位移 (-100px) 模擬被拋升空，期間瘋狂沿著 Y 軸自轉 1800 度 (5圈)，並配合視覺透視稍微放大 1.5 倍 */
   50% { transform: translateY(-100px) rotateY(1800deg) scale(1.5); } 
   /* 100% 落地點：Y 軸落回 0 原點，總旋轉角度達到 3600 度 (10圈)，恢復原本大小 */
   100% { transform: translateY(0) rotateY(3600deg) scale(1); } 
}


/* =========================================================================
 * 【十七、全域 RWD 響應式優化模組 (Media Queries)】
 * 說明：將原本分散的平板與手機版覆寫語法統一集中，方便管理與維護。
 * ========================================================================= */

/* --- 17.1 平板版響應式優化 (max-width: 1024px) --- */
@media (max-width: 1024px) {
   /* 縮小主容器左右內距，讓出更多螢幕空間 */
   .main-container { padding: 0 8px; }          
   /* 玻璃面板內距同步縮小 */
   .glass-panel { padding: 6px 3px; }         
   /* 右上角選單按鈕內距縮小，取消圖示文字間距 */
   .menu-toggle-btn { padding: 8px 12px; gap: 0; }
   /* 選單文字字體調小 */
   .dropdown-list li a { padding: 15px 20px; font-size: 1rem; line-height: normal; }
   /* 系統提示列字體調小 */
   .system-prompt { font-size: 1rem; padding: 12px; }
   /* 側邊欄標題縮小 */
   aside h2 { font-size: 1.3rem; margin-bottom: 15px; }
   /* 寬版卡片內距大幅縮小 */
   .card-area.wide-card { padding: 15px 10px; }
   
   /* 重構籤詩頭部排版：在窄版螢幕改為由上到下的垂直堆疊排列，避免擠壓 (結合 V0.14) */
   .lot-header { flex-direction: column; gap: 12px; text-align: center; justify-content: center; align-items: center; }
   /* 標題字體縮小 */
   .lot-title { font-size: 1.6rem; }
   
   /* 典故長文區塊在平板/手機上縮小內距與字體 (結合 V0.14) */
   .lot-story-detail-box { padding: 12px 15px; font-size: 1.05rem; }
   
   /* 縮小獨家解盤框內距與字體 */
   .lot-master-box { padding: 15px 12px; }
   .master-label { font-size: 1.05rem; }
   .master-text { font-size: 1rem; }
   
   /* 次級標籤與紅字警告字體縮小 */
   .master-sub-label { font-size: 1.05rem; }
   .master-warning { font-size: 1.05rem; }

   /* 主功能操作按鈕群組在平板上改為 Flex 並行排列 */
   #btn-draw-lot, #btn-toss-coin { padding: 10px 20px; font-size: 1.05rem; }
   .action-group { display: flex; justify-content: center; gap: 10px; }
   /* 利用 flex: 1 讓所有按鈕自動均分可用寬度，強制不換行 */
   .action-group .cyber-btn { font-size: 0.95rem; padding: 10px 5px; margin: 0; flex: 1; white-space: nowrap; }

   /* 廣告區網格破陣重組：由桌機的 3 欄強制降級改為 1 欄直排 (1fr) */
   .ad-grid { grid-template-columns: 1fr; gap: 10px; }
   .text-ad { padding: 15px 10px; font-size: 0.95rem; justify-content: flex-start; }
   
   /* 圖片輪播區外框微調，適應窄版螢幕 */
   .ad-section.glass-panel { padding: 6px; margin-left: 0; margin-right: 0; border: 1px solid var(--glass-border); border-radius: 8px; }
   .ad-carousel-wrapper { border-width: 1px; border-radius: 8px; }
   /* 浮動標題字體調降，避免遮擋畫面過多 */
   .ad-slide-title { font-size: 0.95rem; top: 10px; left: 10px; padding: 5px 10px; }
   .ad-slide-link { bottom: 10px; right: 10px; padding: 6px 15px; font-size: 0.85rem; }
   .ad-arrow { font-size: 1.5rem; padding: 10px 5px; }

   /* 詩文區與頁腳字體縮小 */
   .lot-poem-box { padding: 15px 10px; }
   .cyber-footer-info { padding: 30px 10px; }
   .info-content-box { padding: 15px 12px; width: 100%; margin-bottom: 20px; }
   .info-content-box p { font-size: 0.95rem; }
   
   /* 底部四顆社群操作按鈕改為 2x2 網格陣列，提升手機指尖點擊率 */
   .footer-action-buttons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; width: 100%; margin: 0; }
   .cyber-action-btn { width: 100%; padding: 12px 0; text-align: center; font-size: 0.95rem; }
   
   .glow-title { font-size: 1.6rem; }
   .header-subtitle { font-size: 0.9rem; }
   
   /* 選單文字摺疊特效設計：手機/平板螢幕較小，平時將選單按鈕旁的文字隱藏，點擊展開時才出現 */
   .menu-text { display: inline-block; max-width: 0; opacity: 0; overflow: hidden; vertical-align: middle; margin: 0; transition: max-width 0.4s ease, opacity 0.4s ease, margin 0.4s ease; }
   /* 搭配 JS 賦予的 expanded 類別，展開文字 */
   .menu-toggle-btn.expanded .menu-text { max-width: 150px; opacity: 1; margin-left: 8px; }
   
   /* 行動版滿版選單覆寫：寬度拉長並置頂，改變原本桌機版的小方塊型態 */
   .dropdown-list { position: fixed; top: 60px; right: 15px; width: calc(100% - 30px); max-width: 320px; max-height: 0; overflow: hidden; visibility: hidden; opacity: 0; transform: none; transition: max-height 0.5s ease-in-out, opacity 0.4s ease, visibility 0.5s; }
   /* 利用 max-height 展開行動版選單 */
   .dropdown-list.show { max-height: 400px; visibility: visible; opacity: 1; }
   
   /* 底部計數器在平板上改為 2x2 網格，避免橫向排版爆框 */
   .counter-group { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 8px; }
   .counter-item { min-width: 0; padding: 5px 10px; }
   .count-val { font-size: 1.1rem; }

   /* --- 行動版解盤手風琴摺疊陣法啟動 --- */
   /* 行動版狀態：顯示「展開解籤」文字 */
   .mobile-toggle-text { display: inline-block; font-size: 0.85rem; color: #aaa; margin-left: 10px; font-weight: normal; }
   /* 行動版狀態：預設隱藏解籤內容 */
   .toggle-content { display: none; }
   /* 當 JS 加上 expanded 類別時，將內容顯示出來 */
   .toggle-content.expanded { display: block; margin-top: 10px; }
   /* 讓標題區塊在手機上變成可點擊的觸控範圍 */
   .toggle-label { cursor: pointer; padding: 5px 0; display: block; }
}

/* --- 17.2 手機版終極響應式優化 (max-width: 767px) --- */
@media (max-width: 767px) {
   /* 傳統解籤網格終極陣法：強制取消三欄，全面改為兩欄直排 (結合 V0.21) */
   .lot-grid-dimensions { grid-template-columns: repeat(2, 1fr); gap: 10px; }
   
   /* 原本設定為跨滿版的項目，保持滿版不受影響，因為使用 1 / -1 語法 */
   
   /* 圖卡底部 RWD 堆疊陣法：改變 Flex 主軸方向，由橫向 (row) 強制轉為垂直上下堆疊 */
   .card-qr-wrapper {
      flex-direction: column;
      /* 縮小上下區塊的間距為 20px */
      gap: 20px;
   }
}

/* ========================================================================= */
/* 樣式名稱：開運六要訣 (lucky_elements) 視覺陣法修正                        */
/* 系統版本：V0.23 (極簡無框瘦身版)                                          */
/* 作者宣告：五元網站包租公-Tiger老師                                        */
/* 樣式說明：拔除厚重外框與內距，完美對齊傳統七維解盤，徹底釋放左右版面空間  */
/* ========================================================================= */

/* [主容器] 開運六要訣的外層網格佈局 */
.lucky-elements-grid {
   /* [排版] 啟動 CSS Grid 陣法 */
   display: grid;
   /* [欄位設定] 設定為雙欄位並排，完美利用橫向空間 */
   grid-template-columns: repeat(2, 1fr);
   /* [陣眼間距] 設定各個開運項目之間的微小距離 */
   gap: 10px;
   /* [外部邊界] 與上方區塊保持安全距離 */
   margin-top: 15px;
   /* [釋放空間] 徹底移除原本厚重的 padding、border 與背景色，融入大版面 */
   padding: 0;
   border: none;
   background: transparent;
   box-shadow: none;
}

/* [微容器] 單一開運元素 (如：吉方、吉色) */
.lucky-item {
   /* [排版] 使用彈性盒子，讓標題與數值同行排列，節省垂直與水平空間 */
   display: flex;
   /* [對齊] 垂直置中對齊 */
   align-items: center;
   /* [底色] 移除厚重底色，改用極淡的透明度區隔項目，不佔視覺重量 */
   background: rgba(var(--primary-rgb), 0.05);
   /* [內部留白] 縮小內距至極限 (上下 8px，左右 10px) */
   padding: 8px 10px;
   /* [邊角] 配合整體風格的微圓角 */
   border-radius: 4px;
   /* [邊框] 拔除左側粗邊框，改用極細微的單色邊框，保持視覺輕量化 */
   border: 1px solid rgba(var(--primary-rgb), 0.15);
}

/* [文字屬性] 開運元素的標題名稱 (例如：吉方) */
.lucky-label {
   /* [字級] 輔助字體大小 */
   font-size: 0.9em;
   /* [色彩] 綁定系統主題色 */
   color: var(--primary);
   /* [字重] 加粗強調 */
   font-weight: bold;
   /* [間距] 與右側的具體數值拉開一點距離 */
   margin-right: 8px;
   /* [佈局] 防止標題被長字串擠壓變形 */
   flex-shrink: 0;
}

/* [文字屬性] 開運元素的具體開示數值 (例如：正南、帝王紫) */
.lucky-value {
   /* [字級] 數值字體大小 */
   font-size: 0.95em;
   /* [色彩] 高對比白色，確保易讀性 */
   color: #ffffff;
   /* [字重] 加粗 */
   font-weight: bold;
   /* [佈局] 讓數值自動填滿剩餘空間 */
   flex-grow: 1;
   /* [換行] 若字串太長 (如時間區間)，允許自動換行而不撐破版面 */
   word-break: break-word;
}

/* ========================================================================= */
/* 樣式名稱：CPO.css (局部修正)                                    */
/* 系統版本：V0.20 (行動版文字響應式修正陣法)                                */
/* 作者宣告：五元網站包租公-Tiger老師                                        */
/* 說明：確保「展開解籤內容」只在手機與平板顯示，維持桌機版的霸氣與乾淨    */
/* ========================================================================= */

/* [桌機版防護陣] 當螢幕寬度大於 1024px 時 (桌機與大螢幕) */
@media (min-width: 1025px) {
   /* 鎖定手機版專屬的提示文字類別 */
   .mobile-toggle-text {
      /* [強制隱藏] 使用 !important 確保絕對隱藏，不讓多餘文字干擾桌機版面 */
      display: none !important;
   }
}

/* [行動版顯現陣] 當螢幕寬度小於等於 1024px 時 (平板與手機) */
@media (max-width: 1024px) {
   /* 鎖定手機版專屬的提示文字類別 */
   .mobile-toggle-text {
      /* [行內顯示] 讓提示文字自然跟隨在主標題的右側 */
      display: inline-block;
      /* [視覺降級] 將字體縮小至 0.85em，避免搶走主標題的風采 */
      font-size: 0.85em;
      /* [色彩微調] 設定為半透明的輔助色，降低視覺壓迫感 */
      color: rgba(var(--primary-rgb), 0.7);
      /* [間距推擠] 與左側主標題拉開 10px 的安全距離 */
      margin-left: 10px;
      /* [字重重置] 取消粗體，呈現輕量化的提示感 */
      font-weight: normal;
   }
}