/*
 * =========================================================================
 * 檔案名稱：GuandiOracle.css
 * 系統版本：V0.90
 * 作者宣告：五元網站包租公-Tiger老師
 * 系統說明：關帝聖君籤詩-線上抽籤卜卦 (純前端淨化基底版 - 教科書等級註解)
 * 重點說明：
 * 1. 完整保留所有動畫與 RWD 設定，絕對不壓縮任何程式碼。
 * 2. 採用 CSS 變數 (Custom Properties) 實作五套主題色系秒切換陣法。
 * 3. 嚴格執行 3 個空白字元的內縮規範，確保教科書等級的排版。
 * 4. 針對 SEO、AEO、GEO 佈局保留語意化與友善的 RWD 響應式空間。
 * =========================================================================
 */

/* =========================================================================
 * 【一、系統全域變數與多主題色系定義 (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;
   --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;           
   --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;
   --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;
   --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;                
   /* 上方留 60px 空間避開固定定位的導覽列，左右設為 auto 達成絕對水平置中，下方留 20px */
   margin: 60px 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;                    
   /* 區塊與下方元素之間保留 30px 的垂直間距 */
   margin-bottom: 30px;              
   /* 雙重陰影設計：外側黑色深陰影增加懸浮立體感，內側(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); 
   /* 核心動畫：使用貝茲曲線(cubic-bezier) 創造帶有彈性(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; 
   /* 清除超連結預設的下劃線 */
   text-decoration: none;    
   /* 將行內元素轉為區塊元素，讓超連結填滿整個 li 區塊，大幅增加使用者的點擊範圍 */
   display: block;           
   /* 內部上下留白 15px，左右留白 20px */
   padding: 15px 20px; 
   /* 項目底部加上一條主色調半透明的虛線，做為分隔線 */
   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;       
}


/* =========================================================================
 * 【五、左側懸浮選單 (Floating Color Theme Selector)】
 * 說明：固定於螢幕左側，用來快速切換五行陣法佈景主題。
 * ========================================================================= */
/* 懸浮選單主容器 */
.floating-menu {
   /* 固定定位，不論頁面如何捲動，永遠固定在視窗畫面上 */
   position: fixed;          
   /* 緊貼螢幕絕對左側 */
   left: 0;                  
   /* 初始位置鎖定在螢幕垂直 40% 的高度 */
   top: 40%;                 
   /* 利用 transform 向上偏移自身高度的 50%，達成真正的 Y 軸垂直置中計算 */
   transform: translateY(-50%); 
   /* 啟動 Flexbox 排版陣法 */
   display: flex;            
   /* 改變主軸方向，讓子元素(按鈕)由上到下垂直排列 */
   flex-direction: column;   
   /* 垂直排列的按鈕之間保留 10px 的間距 */
   gap: 10px;                
   /* 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 (約 28px) */
   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 {
   /* 覆寫原本極淡的背景，改用 85% 濃度的純黑作為底色防護罩，徹底阻擋底紋穿透干擾 */
   background: rgba(0, 0, 0, 0.75); 
   /* 追加毛玻璃特效：將背後剩餘 15% 透過去的底紋進行模糊處理，營造頂級科技質感 */
   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);
}


/* =========================================================================
 * 【七、籤詩解盤區塊佈局 (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; 
}

/* 籤詩頭部區域 (包含吉凶徽章與歷史典故標題) */
.lot-header {
   /* 啟動 Flexbox 陣法進行橫向佈局 */
   display: flex;                
   /* 將內部元素推向左右兩端，剩餘空間留在中間，達成左右分散對齊 */
   justify-content: space-between; 
   /* 讓內部元素在垂直方向絕對置中 */
   align-items: center;          
   /* 底部加上一條玻璃擬態變數的裝飾分隔線 */
   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); 
}

/* 歷史典故名稱框 (如：劉備求雨) */
.lot-story {
   /* 字體 1.4rem */
   font-size: 1.4rem; 
   /* 字體加粗 */
   font-weight: bold; 
   /* 文字為白色 */
   color: #fff; 
   /* 背景帶有 15% 的主色調透明度 */
   background: rgba(var(--primary-rgb), 0.15); 
   /* 框線為主色調 */
   border: 1px solid var(--primary); 
   /* 特別在左側加上 5px 的超粗線，強烈提升武俠古籍的設計感 */
   border-left: 5px solid var(--primary); 
   /* 內距設定 */
   padding: 6px 15px; 
   /* 圓角 4px */
   border-radius: 4px; 
   /* 稍微加大字元間距，方便閱讀短語 */
   letter-spacing: 2px; 
   /* 加上微微的文字陰影 */
   text-shadow: 0 0 5px var(--primary); 
}

/* 原始七言絕句或四句詩文展示區塊 */
.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 技術，將 聖意、東坡解 等區塊漂亮地分割為兩欄。
 * ========================================================================= */
/* 網格佈局外層容器 */
.lot-grid-dimensions {
   /* 啟動 CSS Grid 網格陣法 */
   display: grid;                     
   /* 宣告欄位規則：定義兩欄，每欄皆佔據 1 份可用彈性空間 (1 fraction，簡稱 1fr) */
   grid-template-columns: 1fr 1fr;    
   /* 設定網格項目之間的垂直與水平溝槽間距均為 20px */
   gap: 20px;                         
   /* 距離下方天璣解盤保留 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 {
   /* 告訴瀏覽器，這個元素必須橫跨 2 個網格欄位，也就是佔滿整個寬度 */
   grid-column: span 2;               
}

/* 傳統維度小標題 (如：【聖意】、【解曰】) */
.dim-label {
   /* 顏色套用主色調 */
   color: var(--primary); 
   /* 字體大小 1.1rem */
   font-size: 1.1rem; 
   /* 距離下方內文保留 8px 間距 */
   margin-bottom: 8px; 
   /* 宣告為區塊元素，強迫標題後方自動換行，不與內文擠在同一行 */
   display: block;                    
   /* 取消預設加粗，回歸古籍平實感 */
   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; 
   /* 宣告為區塊元素 */
   display: block; 
}


/* =========================================================================
 * 【九、天璣居士獨家六大維度解盤區 (Master Analysis)】
 * 說明：此區塊為系統核心價值，採用點綴色(金)系進行視覺強調。
 * ========================================================================= */
/* 獨家解盤總容器 */
.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); 
}


/* =========================================================================
 * 【十、專屬圖卡 QRCode 與浮水印排版陣法 (Canvas Export UI)】
 * 說明：此區塊預設隱藏，只有在 JS 呼叫 html2canvas 截圖的瞬間才會顯示，
 * 確保使用者下載的圖卡具備完美的商標與獨立 QRCode。
 * ========================================================================= */
/* 圖卡 QRCode 總容器 */
.card-qrcode { 
   /* 內部所有內容絕對水平置中 */
   text-align: center; 
   /* 與上方內容距離 25px */
   margin-top: 25px; 
   /* 網頁上預設不顯示，避免影響一般瀏覽 */
   display: none; 
}

/* 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; 
}

/* Flexbox 陣法：保證圖卡底部的 QRCode、浮水印與網址絕對垂直置中對齊 */
.card-qr-layout {
   /* 啟動 Flexbox 排版 */
   display: flex;             
   /* 改變主軸為垂直，讓內部元素由上到下堆疊排列 */
   flex-direction: column;    
   /* 次軸置中：讓所有垂直堆疊的元素在水平中心線上完美對齊 */
   align-items: center;       
   /* 主軸置中：整體內容置中 */
   justify-content: center;   
   /* 元素與元素之間的垂直間隔設為 8px */
   gap: 8px;                  
   /* 區塊上下保留 15px 留白空間 */
   padding: 15px 0;
}

/* 圖卡專屬賜福文字標題 (關聖帝君 賜福靈籤) */
.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 變數的點綴色，若無則降級為青色 (#00ffff) 保護 */
   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; 
}

/* 計數器內跳動的數字本體 */
.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 銅錢擲筊的拋物線翻轉。
 * ========================================================================= */

/* --- 14.1 太極陣盤底座 --- */
.taichi-circle { 
   /* 陣盤固定寬度 150px */
   width: 300px; 
   /* 陣盤固定高度 150px，形成正方基準 */
   height: 300px; 
   /* 透過 auto 將陣盤水平居中 */
   margin: 30px auto 0px; 
   /* 相對定位，做為內外圈與中心文字的圓心座標原點 */
   position: relative; 
}

/* 陣盤外圈：利用 ::after 偽元素畫出一圈虛線 */
.taichi-circle::after { 
   content: ""; 
   position: absolute; 
   top: 0; left: 0; right: 0; bottom: 0; 
   border-radius: 50%; 
   border: 4px dashed var(--primary); 
   /* 綁定雙重動畫陣法：12秒緩慢順時針旋轉 + 3秒呼吸燈發光，互不干擾 */
   animation: spin-clockwise-standby 12s linear infinite, taichi-pulse-glow 3s ease-in-out infinite; 
}

/* 陣盤內圈：利用 ::before 偽元素畫出一圈較小的實線 */
.taichi-circle::before { 
   content: ""; 
   position: absolute; 
   top: 10px; left: 10px; right: 10px; bottom: 10px; 
   border-radius: 50%; 
   border: 2px solid var(--accent); 
   /* 綁定雙重動畫陣法：18秒緩慢逆時針旋轉 (創造齒輪交錯的錯視感) + 3秒呼吸燈發光 */
   animation: spin-reverse-standby 18s linear infinite, taichi-pulse-inner-glow 3s ease-in-out infinite; 
}

/* 陣盤中心的文字 (如：關帝聖君) */
/* --- V0.91 更新：陣盤中心的神像圖片 (取代原本的文字) --- */
.taichi-img { 
   /* 絕對定位，將圖片抽離排版流，做為獨立圖層 */
   position: absolute; 
   /* 將降落點設定在水平與垂直各 50% 的圓心位置 */
   top: 50%; 
   left: 50%; 
   /* 利用 transform 偏移自身長寬的一半，達成完美的中心對準 */
   transform: translate(-50%, -50%); 
   /* 設定圖片寬度為 120px，確保能完美塞入直徑 130px 的內圈邊界中，保留呼吸空間 */
   width: 270px; 
   /* 設定圖片高度為 120px，形成正方形比例基底 */
   height: 270px; 
   /* 將圖片邊角削成 50%，強制裁切為正圓形，與太極陣盤完美融合 */
   border-radius: 50%; 
   /* 啟動物件適配陣法：確保神像圖片等比例縮放填滿圓形，絕不變形或扭曲 */
   object-fit: cover; 
   /* 確保神像圖片不會被內外圈的旋轉線條蓋住，永遠立於最上層 */
   z-index: 10; 
   /* 加上微微的點綴色外框，增加神像與陣盤之間的立體層次感 */
   border: 2px solid var(--accent);
   /* 綁定神像專屬的待機呼吸發光動畫 (週期 3 秒，無限循環) */
   animation: img-breathe-standby 3s ease-in-out infinite; 
}

/* 系統狀態切換：當 JS 啟動抽籤時，覆寫神像狀態，進入極速發光模式 */
.taichi-circle.fast-spin .taichi-img { 
   /* 神像圖片進入高速旋轉時的爆發發光動畫，加上 !important 強制覆寫原本的待機動畫 */
   animation: img-breathe-active 0.8s ease-in-out infinite !important; 
}

/* --- 14.2 古銅錢 3D 擲筊模組 --- */
/* 銅錢的佈局容器 */
.coin-container { 
   /* Flex 排版 */
   display: flex; 
   /* 水平居中 */
   justify-content: center; 
   /* 垂直居中 */
   align-items: center; 
   /* 兩枚銅錢之間距離 40px */
   gap: 40px; 
   /* 寬度滿版 */
   width: 100%; 
   /* 外距排版 */
   margin: 40px auto 30px 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); }   

/* --- 14.3 動畫關鍵影格 (Keyframes) 定義區 --- */
/* 神像圖片待機緩慢呼吸 (V0.91 新增) */
@keyframes img-breathe-standby { 
   /* 0% 與 100% 狀態：維持原比例，帶有基礎的點綴色外圍光暈 */
   0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 10px var(--accent); } 
   /* 50% 狀態：微微放大至 1.05 倍並增強陰影，產生神力運籌的呼吸感 */
   50% { transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 0 20px var(--accent); } 
}

/* 抽籤啟動時，神像圖片進入強烈爆發刺眼發光模式 (V0.91 新增) */
@keyframes img-breathe-active { 
   /* 0% 與 100% 狀態：稍微放大，帶有強烈的主色與點綴色發光 */
   0%, 100% { transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 0 15px var(--accent), 0 0 30px var(--primary); } 
   /* 50% 狀態：瞬間放大至 1.15 倍，疊加三層發光陰影 (點綴色+主色+純白)，展現神威顯赫的視覺震撼 */
   50% { transform: translate(-50%, -50%) scale(1.15); box-shadow: 0 0 25px var(--accent), 0 0 50px var(--primary), 0 0 70px #ffffff; } 
}


/* 外圈呼吸燈：緩慢放大並增加光暈陰影 */
@keyframes taichi-pulse { 
   /* 動畫起點(0%)與終點(100%)：陰影較弱，維持 1 倍大小 */
   0%, 100% { box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.4); transform: scale(1); } 
   /* 動畫中點(50%)：陰影極度擴張，整體放大 1.03 倍，產生吸氣膨脹感 */
   50% { box-shadow: 0 0 35px rgba(var(--primary-rgb), 0.9); transform: scale(1.03); } 
}

/* 內圈專用較弱的呼吸燈 */
@keyframes taichi-pulse-inner { 
   0%, 100% { box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.3); } 
   50% { box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.7); } 
}

/* 外圈高速順時針旋轉 */
@keyframes spin-fast { 
   0% { transform: rotate(0deg); } 
   /* 從 0 轉到 360 度，形成一圈完整的順時針迴圈 */
   100% { transform: rotate(360deg); } 
}

/* 內圈高速逆時針旋轉 */
@keyframes spin-reverse-fast { 
   0% { transform: rotate(0deg); } 
   /* 從 0 轉到負 360 度，形成逆時針迴圈 */
   100% { transform: rotate(-360deg); } 
}

/* 文字待機緩慢呼吸 */
@keyframes text-breathe-standby { 
   0%, 100% { transform: translate(-50%, -50%) scale(1); text-shadow: 0 0 10px var(--accent); } 
   /* 放大至 1.05 倍並增強陰影 */
   50% { transform: translate(-50%, -50%) scale(1.05); text-shadow: 0 0 20px var(--accent); } 
}

/* 抽籤啟動時，文字進入強烈爆發刺眼發光模式 */
@keyframes text-breathe-active { 
   0%, 100% { transform: translate(-50%, -50%) scale(1.1); text-shadow: 0 0 15px var(--accent), 0 0 30px var(--primary); color: #fff; } 
   /* 瞬間放大至 1.5 倍，疊加三層發光陰影 (點綴色+主色+純白)，並變換字體顏色 */
   50% { transform: translate(-50%, -50%) scale(1.5); text-shadow: 0 0 25px var(--accent), 0 0 50px var(--primary), 0 0 70px #fff; color: var(--accent); } 
}

/* 神明拋物線擲筊運算核心：銅錢拋空翻轉動畫 */
@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); } 
}

/* --- V0.97 陣盤專屬動畫引擎 --- */

/* 外圈：常駐緩慢順時針旋轉 */
@keyframes spin-clockwise-standby { 
   0% { transform: rotate(0deg); } 
   100% { transform: rotate(360deg); } 
}

/* 內圈：常駐緩慢逆時針旋轉 */
@keyframes spin-reverse-standby { 
   0% { transform: rotate(0deg); } 
   100% { transform: rotate(-360deg); } 
}

/* 外圈：純陰影呼吸燈 (拔除舊版的 scale 放縮，讓陣盤旋轉更穩定、威嚴) */
@keyframes taichi-pulse-glow { 
   0%, 100% { box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.4); } 
   50% { box-shadow: 0 0 35px rgba(var(--primary-rgb), 0.9); } 
}

/* 內圈：純陰影呼吸燈 */
@keyframes taichi-pulse-inner-glow { 
   0%, 100% { box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.3); } 
   50% { box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.7); } 
}

/* 抽籤啟動時的高速爆發旋轉 (覆寫補上強烈定格發光，避免被雙重動畫蓋掉) */
@keyframes spin-fast { 
   0% { transform: rotate(0deg); box-shadow: 0 0 40px rgba(var(--primary-rgb), 1); } 
   100% { transform: rotate(360deg); box-shadow: 0 0 40px rgba(var(--primary-rgb), 1); } 
}
@keyframes spin-reverse-fast { 
   0% { transform: rotate(0deg); box-shadow: 0 0 30px rgba(var(--accent-rgb), 1); } 
   100% { transform: rotate(-360deg); box-shadow: 0 0 30px rgba(var(--accent-rgb), 1); } 
}


/* =========================================================================
 * 【十五、專屬 RWD 平板版響應式優化 (max-width: 1024px)】
 * 說明：當設備螢幕寬度小於或等於 1024px 時 (例如 iPad 橫向或直向)，
 * 觸發此區塊的 CSS 覆寫，自動縮小間距與字體，完美適配。
 * ========================================================================= */
@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; }
   
   /* 重構籤詩頭部排版：由原本的 Flex 左右分散 (row) 改為由上到下的垂直堆疊排列 (column) */
   .lot-header { flex-direction: column; gap: 12px; text-align: center; }
   /* 標題字體縮小 */
   .lot-title { font-size: 1.6rem; }
   /* 故事字體縮小 */
   .lot-story { font-size: 1.2rem; }
   
   /* 傳統維度網格佈局：在平板依然維持雙欄陣列，但縮小網格間距避免擁擠 */
   .lot-grid-dimensions { gap: 15px; }
   .dim-item { padding: 15px 12px; }
   .dim-label { font-size: 1.05rem; }
   .dim-text { font-size: 0.95rem; }
   
   /* 縮小獨家解盤框內距與字體 */
   .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; }
   
   /* 選單文字摺疊特效設計：手機/平板螢幕較小，平時將選單按鈕旁的文字隱藏 (max-width: 0)，點擊展開時才如畫卷般出現 */
   .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; }
}

/* =========================================================================
 * 【十六、專屬 RWD 手機版終極響應式優化 (max-width: 767px)】
 * 說明：當設備螢幕寬度小於或等於 767px 時 (一般智慧型手機直向)，
 * 觸發最終防線，執行極端的單欄位化。
 * ========================================================================= */
@media (max-width: 767px) {
   /* 傳統解籤網格終極陣法：強制取消雙欄，全面改為單欄直排 (1fr)，確保極窄的手機螢幕上閱讀字體不會擁擠 */
   .lot-grid-dimensions { grid-template-columns: 1fr; }
   
   /* 原本設定為橫跨雙欄的項目 (例如：占驗)，因為已經變成單欄，所以強制退回橫跨 1 欄，避免邏輯錯誤 */
   .dim-item.full-width { grid-column: span 1; }
}

/* =========================================================================
 * 【V0.93 新增】求籤互動區 - 廟宇專屬陣法底紋 (Temple Diamond Lattice)
 * 說明：利用純 CSS 漸層繪製傳統廟宇的「菱格窗花」，並完美連動五行主題色系。
 * 規範：維持三字元內縮，確保教科書等級註解。
 * ========================================================================= */
#lottery-action-area {
   /* 疊加陣法：底層維持原本設定好的玻璃擬態半透明背景色 */
   background-color: var(--glass-bg);
   /* * 核心底紋陣法：使用重複線性漸層 (repeating-linear-gradient) 
    * 1. 分別繪製 45 度與 -45 度的交叉細線，形成廟宇傳統的「菱格窗花」。
    * 2. 利用 rgba(var(--primary-rgb), 0.08) 動態讀取當下主題色的 RGB 數值。
    * 3. 設定 0.08 (8%) 的極低透明度，讓底紋若隱若現，絕不干擾上方的太極陣與文字。
    */
   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.96 新增】行動版解盤摺疊陣法 (Mobile Accordion UI)
 * 說明：桌機版預設全開；行動版隱藏內容，點擊標題後展開。
 * 作者宣告：五元網站包租公-Tiger老師
 * ========================================================================= */
/* 桌機版狀態：隱藏「展開解籤」文字，並強制顯示所有內容 */
.mobile-toggle-text {
   display: none;
}
.toggle-content {
   display: block;
}

@media (max-width: 1024px) {
   /* 行動版狀態：顯示「展開解籤」文字 */
   .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;
      /* 加上內距，讓手指更容易點擊 (Touch Target 最佳化) */
      padding: 5px 0;
      /* 確保區塊滿版，防止點擊死角 */
      display: block; 
   }
}