/*
 * =========================================================================
 * 檔案名稱：GOW5.css
 * 系統版本：V0.55 (科技武俠風：天璣大滿貫完美淨化版)
 * 作者宣告：五元網站包租公-Tiger老師 (台灣老站神)
 * 系統說明：五路財神 五行五維求財籤線上抽籤卜卦 (純前端淨化基底版 - 教科書等級註解)
 * 重點說明：
 * 1. 完整保留所有動畫與 RWD 設定，絕對不壓縮任何程式碼。
 * 2. 採用 CSS 變數實作五套主題色系秒切換陣法 (已合併散落之變數宣告)。
 * 3. 嚴格執行 3 個空白字元的內縮規範，確保教科書等級的排版。
 * 4. 針對 SEO、AEO、GEO 佈局保留語意化與友善的 RWD 響應式空間。
 * 5. 整合行動版摺疊解盤與圖卡完美 RWD 雙欄陣法 (已收斂所有 @media)。
 * 6. 徹底拔除舊有銅錢擲杯，升級為 3D 虛擬金幣投擲陣法。
 * 7. 導入 CSS3 絲滑跑馬燈 (取代 marquee) 與懸浮法訣 (Tooltip)。
 * =========================================================================
 */

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

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

/* [主題二] 大財 (火) - 關帝赤紅 (與預設 :root 相同，保留以供獨立呼叫) */
body[data-theme="Mazu-red"] {
   --bg-main: #0a0505;
   --primary: #ff3333;
   --primary-rgb: 255, 51, 51;
   --accent: #cc0000;
   --accent-rgb: 204, 0, 0;
   --bg-dark: #1a0000;
   --glass-bg: rgba(20, 10, 10, 0.75);
   --glass-border: rgba(255, 51, 51, 0.3);
}

/* [主題三] 偏財 (水) - 科技青藍 (Cyber-Wuxia 駭客任務風) */
body[data-theme="cyan"] {
   --bg-main: #050a10;
   --primary: #00ffff;          
   --primary-rgb: 0, 255, 255;
   --accent: #0088ff;
   --accent-rgb: 0, 136, 255;
   --bg-dark: #00111a;
   --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: #ffd700;          
   --primary-rgb: 255, 215, 0;
   --accent: #ff9900;           
   --accent-rgb: 255, 153, 0;
   --bg-dark: #1a1500;
   --glass-bg: rgba(20, 17, 0, 0.75);
   --glass-border: rgba(255, 215, 0, 0.3);
}

/* [主題五] 穩財 (紫微/土) - 紫氣東來 (宮廟神聖莊嚴風 - 系統預設) */
body[data-theme="temple-purple"] {
   --bg-main: #12051a;
   --primary: #b266ff;          
   --primary-rgb: 178, 102, 255;
   --accent: #8c1aff;
   --accent-rgb: 140, 26, 255;
   --bg-dark: #11001a;
   --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;          
   --primary-rgb: 0, 230, 118;
   --accent: #00b359;
   --accent-rgb: 0, 179, 89;
   --bg-dark: #001a0d;
   --glass-bg: rgba(5, 18, 10, 0.75);
   --glass-border: rgba(0, 230, 118, 0.3);
}

/* =========================================================================
 * 【二、全域重置與基礎佈局 (Global Reset & Base Layout)】
 * 說明：初始化所有 HTML 標籤的內外距，設定全站基礎字型與星空漸層背景。
 * ========================================================================= */

/* 將所有元素的寬高計算方式改為 border-box，避免 padding 撐破版面 */
* {
   box-sizing: border-box; 
   margin: 0;              
   padding: 0;             
}

/* 設定網頁主體背景與字型設定 */
body {
   /* 載入主題設定的主背景色 */
   background-color: var(--bg-main); 
   /* 優先使用微軟正黑與蘋果字體，確保跨平台閱讀舒適 */
   font-family: "Microsoft JhengHei", "PingFang TC", sans-serif; 
   /* 預設字體顏色為純白 */
   color: #ffffff;                   
   /* 隱藏水平卷軸，避免破版 */
   overflow-x: hidden;               
   /* 科技武俠風專屬：從上方中央向外擴散的放射狀漸層，營造神聖光暈 */
   background-image: radial-gradient(circle at center top, rgba(var(--primary-rgb), 0.15) 0%, var(--bg-main) 70%);
}

/* 全站最外層的主要容器，限制最大寬度並置中 */
.main-container {
   max-width: 1000px;                
   /* 上距 40px，左右自動置中，下距 20px */
   margin: 40px auto 20px auto;      
   /* 左右保留安全內距，避免手機版貼齊邊緣 */
   padding: 0 15px;                  
}

/* =========================================================================
 * 【三、玻璃擬態面板模組 (Glassmorphism UI)】
 * 說明：全站共用的底板樣式，帶有半透明毛玻璃效果與霓虹陰影。
 * ========================================================================= */
.glass-panel {
   /* 載入主題設定的半透明背景色 */
   background: var(--glass-bg);      
   /* 外圍加上隱約的主題色邊框 */
   border: 1px solid var(--glass-border); 
   /* 圓角處理，柔化視覺邊緣 */
   border-radius: 8px;               
   /* 內容與邊框的呼吸空間 */
   padding: 25px;                    
   /* 與下方元件的距離 */
   margin-bottom: 10px;              
   /* 外陰影營造浮動感，內陰影營造科技光暈 */
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(var(--primary-rgb), 0.1); 
   /* 關鍵屬性：背景模糊，實現毛玻璃質感 (需瀏覽器支援) */
   backdrop-filter: blur(5px);       
}

.glass-panel-3 {
   /* 載入主題設定的半透明背景色 */
   background: var(--glass-bg);      
   /* 外圍加上隱約的主題色邊框 */
   border: 1px solid var(--glass-border); 
   /* 圓角處理，柔化視覺邊緣 */
   border-radius: 8px;               
   /* 內容與邊框的呼吸空間 */
   padding: 25px;                    
   /* 與下方元件的距離 */
   margin-top: 50px;
   margin-bottom: 10px;              
   /* 外陰影營造浮動感，內陰影營造科技光暈 */
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(var(--primary-rgb), 0.1); 
   /* 關鍵屬性：背景模糊，實現毛玻璃質感 (需瀏覽器支援) */
   backdrop-filter: blur(5px);       
}

/* =========================================================================
 * 【四、右上角下拉導覽列與選單 (Navigation & Dropdown)】
 * 說明：處理網頁右上角的 CyberMenu，包含按鈕樣式與隱藏選單的彈出動畫。
 * ========================================================================= */

/* 導覽列定位容器，固定於畫面右上角 */
.top-right-nav {
   position: absolute; 
   top: 15px;          
   right: 15px;        
   /* 確保層級在最上方，不會被金幣或神像遮擋 */
   z-index: 1000;      
}

/* 主按鈕外觀 (例如：☰ Menu) */
.menu-toggle-btn {
   /* 微弱的主題色背景 */
   background: rgba(var(--primary-rgb), 0.1); 
   color: var(--primary); 
   border: 1px solid var(--primary); 
   padding: 10px 15px; 
   border-radius: 4px; 
   /* 滑鼠移入時顯示手型指標 */
   cursor: pointer;          
   font-size: 1rem; 
   font-weight: bold; 
   /* 所有的變化加上 0.1 秒的平滑轉場 */
   transition: all 0.1s ease; 
   box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.3); 
   /* 使用 Flexbox 讓圖示與文字垂直置中 */
   display: flex;            
   align-items: center;      
   gap: 8px;                 
   /* 確保文字不會因為空間不夠而斷行 */
   white-space: nowrap;      
}

/* 滑鼠移入按鈕時的反白效果 */
.menu-toggle-btn:hover {
   background: var(--primary); 
   color: #000;                
}

/* 下拉選單主體 (預設為隱藏並往上推移 15px) */
.dropdown-list {
   /* 預設隱藏，避免點擊穿透 */
   visibility: hidden;         
   opacity: 0;                 
   position: absolute;         
   /* 對齊按鈕右側 */
   right: 0;                   
   /* 與按鈕底部保留一點距離 */
   top: 120%;                  
   /* 極深的背景色，避免透出下方文字影響閱讀 */
   background: rgba(10, 5, 5, 0.95); 
   border: 1px solid var(--primary); 
   border-radius: 4px; 
   list-style: none;           
   min-width: 260px;           
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.8); 
   /* 初始狀態往上推，準備執行滑落動畫 */
   transform: translateY(-15px); 
   /* 使用 cubic-bezier 產生輕微的彈跳感 */
   transition: all 0.1s cubic-bezier(0.68, -0.55, 0.265, 1.55); 
}

/* 當 JS 掛上 .show 類別時，觸發動畫顯示選單 */
.dropdown-list.show {
   visibility: visible; 
   opacity: 1; 
   /* 回到正常位置，完成滑落 */
   transform: translateY(0); 
}

/* 選單內的超連結項目樣式 */
.dropdown-list li a {
   color: #ddd;
   font-size: 15px; 
   text-decoration: none;    
   display: block;           
   padding: 15px 18px; 
   /* 項目之間使用虛線分隔 */
   border-bottom: 1px dashed rgba(var(--primary-rgb), 0.3); 
   transition: 0.1s; 
}

/* 滑鼠移入選單項目時，向右推移產生箭頭指引感 */
.dropdown-list li a:hover {
   color: var(--accent); 
   background: rgba(var(--accent-rgb), 0.1); 
   /* 增加左內距，文字往右擠 */
   padding-left: 25px;
   padding-right: 15px;       
}

/* =========================================================================
 * 【五、左側懸浮選單 (Floating Color Theme Selector)】
 * 說明：處理網頁左側垂直排列的圓形色系切換按鈕。
 * ========================================================================= */

/* 懸浮選單容器，固定於畫面左側偏下方 */
.floating-menu {
   position: fixed;          
   left: 0;                  
   top: 70%;                 
   /* 利用 Y 軸負 50% 達成精準垂直置中 */
   transform: translateY(-50%); 
   /* 使用 Flexbox 垂直排列按鈕 */
   display: flex;            
   flex-direction: column;   
   /* 按鈕之間的極小間距 */
   gap: 4px;                
   /* 確保不會被背景元件遮擋 */
   z-index: 999;             
   padding: 10px; 
}

/* 單一圓形色碼按鈕樣式 */
.theme-selector {
   color: #fff; 
   text-decoration: none; 
   text-align: center; 
   /* 將正方形變成完美的圓形 */
   border-radius: 50%;       
   width: 40px;              
   height: 40px; 
   /* 確保文字在圓圈內垂直置中 */
   line-height: 36px;        
   font-weight: bold; 
   /* 邊框使用 HTML 中定義的行內變數 --btn-color */
   border: 2px solid var(--btn-color); 
   /* 產生同色系的外發光陰影 */
   box-shadow: 0 0 10px var(--btn-color); 
   backdrop-filter: blur(3px); 
   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 {
   font-size: 1.8rem; 
   color: var(--primary); 
   /* 文字外發光陰影，強化科技感 */
   text-shadow: 0 0 15px var(--primary); 
   margin-bottom: 10px; 
   /* 拉開字距，增加莊嚴與大氣感 */
   letter-spacing: 3px;                  
}

/* 系統副標題樣式 */
.header-subtitle {
   font-size: 1.1rem; 
   color: var(--accent); 
}

/* 五維財運下拉選單 (<select>) 樣式 */
.cyber-select {
   /* 微妙的由上而下漸層背景 */
   background: linear-gradient(180deg, rgba(var(--primary-rgb), 0.15) 0%, rgba(10, 5, 5, 0.9) 100%); 
   color: var(--primary); 
   border: 1px solid var(--primary); 
   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); 
   transition: all 0.3s ease; 
}

/* 當滑鼠移入或點擊展開時，將顏色切換為強調色 (金/紅) */
.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 {
   background: rgba(0, 0, 0, 0.75); 
   /* 強烈毛玻璃效果，凸顯文字 */
   backdrop-filter: blur(25px);
   border: 1px solid rgba(var(--primary-rgb), 0.3);
   /* 左側加粗實線，營造引文區塊感 */
   border-left: 4px solid var(--primary); 
   color: #fff; 
   padding: 15px; 
   text-align: center; 
   font-size: 1.1rem; 
   border-radius: 4px; 
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
}

/* 全站共用的科技武俠風按鈕 (主色系) */
.cyber-btn {
   background: rgba(var(--primary-rgb), 0.15); 
   color: #fff; 
   border: 2px solid var(--primary); 
   padding: 12px 30px;       
   font-size: 1.2rem; 
   cursor: pointer; 
   border-radius: 4px; 
   transition: 0.3s; 
   text-shadow: 0 0 5px var(--primary); 
   box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.4); 
   margin: 5px; 
}

/* 按鈕滑鼠移入時的實心高亮狀態 */
.cyber-btn:hover {
   background: var(--primary); 
   color: #000; 
   box-shadow: 0 0 20px var(--primary); 
}

/* 全站共用的科技武俠風按鈕 (強調色系，用於重要操作) */
.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);
}


/* =========================================================================
 * 【十七、3D 虛擬筊杯真實物理模組 (3D Jiao Toss Animation Engine)】
 * 系統版本：V0.60_Beta (龍騰地動・全息擬真版)
 * 作者宣告：五元網站包租公-Tiger老師 (台灣老站神)
 * 系統說明：保留交叉重疊與聖筊起手式，並加入拋高爆發與落地地動特效。
 * ========================================================================= */

/* [筊杯容器] 雙杯緊密交叉陣法 */
.coin-grid-2 {
   display: flex;
   justify-content: center;
   align-items: center;
   /* 將 gap 歸零，用負邊距來創造重疊 */
   gap: 0;
   max-width: 200px;
   margin: 0 auto;
}

/* 👑 [V0.60 新增：地動山搖特效] 模擬筊杯落地時的重量打擊感 */
@keyframes jiaoGroundShake {
   0%, 100% { transform: translate(0, 0); }
   20% { transform: translate(-2px, 2px); }
   40% { transform: translate(2px, -1px); }
   60% { transform: translate(-1px, 1px); }
   80% { transform: translate(1px, -1px); }
}

/* 配合稍後的 JS，觸發落地震動 */
.coin-grid-2.ground-impact {
   animation: jiaoGroundShake 0.4s ease-out;
}

/* [單一筊杯外框] */
.coin-unit {
   position: relative;
   width: 180px;
   aspect-ratio: 1 / 2;
   perspective: 1200px;
}

/* 🌟 核心修正 1：交叉靠攏 (模擬雙手合十握筊) */
#coin-1 {
   margin-right: -25px; /* 左筊向右擠壓，產生 25px 的重疊 */
   z-index: 2; /* 左筊疊在上方 */
}
#coin-2 {
   margin-left: -25px; /* 右筊向左擠壓 */
   z-index: 1; /* 右筊墊在下方 */
}

/* 🌟 核心修正 2：靜止預設狀態為「一正一反 (聖筊)」 */
.coin-core {
   width: 100%; height: 100%;
   position: absolute;
   top: 0; left: 0;
   transform-style: preserve-3d;
   transition: transform 1.5s cubic-bezier(0.2, 0.8, 0.3, 1);
}

/* 左筊預設：陽面 (平的) 向上 */
#coin-core-1 { transform: rotateY(0deg); }
/* 右筊預設：陰面 (凸的) 向上 */
#coin-core-2 { transform: rotateY(180deg); }

/* [筊杯圖片共通樣式] 絕對定位並隱藏背面 */
.coin-side {
   position: absolute;
   top: 0; left: 0;
   width: 100%; height: 100%;
   box-shadow: none !important;
   border-radius: 0 !important;
   background: transparent !important;
   border: none !important;
   backface-visibility: hidden;
   object-fit: contain; 
   /* 配合空中的光芒爆發，加入平滑轉場 */
   transition: filter 0.3s ease;
}

/* 科技美學：輪廓發光陣法 (Drop Shadow) */
.coin-unit.normal-lot .coin-side { filter: drop-shadow(0 0 10px rgba(255, 204, 0, 0.8)); }
.coin-unit.special-lot .coin-side { filter: drop-shadow(0 0 15px rgba(157, 78, 221, 0.9)); }

.coin-head { transform: rotateY(0deg); z-index: 2; }
.coin-tail { transform: rotateY(180deg); z-index: 1; }

/* 
 * --- 🌟 物理拋物線強化 --- 
 * 確保右筊從 180 度出發，並拋得更高、加入空中光芒爆發
 */

@keyframes jiao-physics-1 {
   /* 左筊從 0deg (正) 出發 */
   0% { transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); filter: brightness(1); }
   /* 👑 特效強化：拋擲到最高點 (-220px)，加入高光爆發 (brightness) 與殘影 */
   40% { transform: translate3d(-60px, -220px, 100px) rotateX(1440deg) rotateY(720deg) rotateZ(-25deg) scale(1.6); filter: brightness(1.5) drop-shadow(0 0 30px var(--accent-gold)); }
   /* 落地瞬間的第一次微幅彈跳 */
   80% { transform: translate3d(-10px, -25px, 0) rotateX(1780deg) rotateY(1050deg) rotateZ(-10deg) scale(1.05); }
   100% { transform: translate3d(0, 0, 0) rotateX(1800deg) rotateY(1080deg) rotateZ(0deg) scale(1); filter: brightness(1); }
}

@keyframes jiao-physics-2 {
   /* ⚠️ 右筊從 180deg (反) 出發，以符合起手式 */
   0% { transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(180deg) rotateZ(0deg) scale(1); filter: brightness(1); }
   /* 👑 特效強化：拋擲到最高點 (-200px)，加入高光爆發 (brightness) 與殘影 */
   45% { transform: translate3d(70px, -200px, 80px) rotateX(1080deg) rotateY(900deg) rotateZ(30deg) scale(1.5); filter: brightness(1.5) drop-shadow(0 0 30px var(--accent-gold)); }
   85% { transform: translate3d(15px, -20px, 0) rotateX(1420deg) rotateY(1240deg) rotateZ(15deg) scale(1.02); }
   100% { transform: translate3d(0, 0, 0) rotateX(1440deg) rotateY(1620deg) rotateZ(0deg) scale(1); filter: brightness(1); }
}

/* [觸發旋轉類別] */
.is-tossing-1 { animation: jiao-physics-1 1.8s cubic-bezier(0.15, 0.85, 0.35, 1) forwards !important; }
.is-tossing-2 { animation: jiao-physics-2 1.8s cubic-bezier(0.15, 0.85, 0.35, 1) forwards !important; }

/* [結果鎖定類別] JS 判定後強制顯示正面或反面 */
.force-head { transform: rotateY(0deg) !important; animation: none !important; }
.force-tail { transform: rotateY(180deg) !important; animation: none !important; }


/* =========================================================================
 * 【十八、純 CSS 3D 虛擬籤筒與群籤陣法 (Pure CSS Cylinder & Sticks)】
 * 系統版本：V0.13 (純 CSS 拔劍出鞘版)
 * 作者宣告：五元網站包租公-Tiger老師 (台灣老站神)
 * 系統說明：採用純 CSS 漸層繪製立體籤筒，搭配 z-index: -1 完美實現物理遮擋。
 * ========================================================================= */

/* [動畫與物理引擎舞台] */
#lottery-action-area {
   position: relative;
   min-height: 350px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   /* 隱藏跳太高的籤，確保不撐破版面 */
   overflow: hidden; 
   
   /* 疊加陣法：底層維持原本設定好的玻璃擬態半透明背景色 */
   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;
}

/* [純 CSS 籤筒本體] 利用漸層與圓角打造立體圓柱感 */
.cyber-cylinder-body {
   position: relative;
   width: 120px;
   height: 220px;
   /* 使用極深色漸層模擬科技檀木質感 */
   background: linear-gradient(to right, #1a0505, #4d0f0f, #1a0505);
   border: 2px solid var(--primary);
   border-radius: 8px 8px 25px 25px;
   /* 內陰影增強立體感，外陰影產生科技光暈 */
   box-shadow: inset 0 0 30px rgba(0,0,0,0.9), 0 0 20px rgba(var(--primary-rgb), 0.5);
   margin: 0 auto;
   transform-origin: bottom center;
   /* 🌟 核心陣眼：層級設為 10，確實蓋住內部的籤 */
   z-index: 10; 
}

/* [籤筒上的宮廟名牌] */
.cylinder-label {
   position: absolute;
   top: 40px;
   left: 50%;
   transform: translateX(-50%);
   width: 45px;
   background: rgba(var(--accent-rgb), 0.15);
   border: 1px solid var(--accent);
   color: var(--accent);
   font-weight: bold;
   font-size: 1.3em;
   text-align: center;
   padding: 15px 5px;
   border-radius: 4px;
   writing-mode: vertical-rl;
   letter-spacing: 4px;
   box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.5);
   text-shadow: 0 0 5px var(--accent);
}

/* [裝載所有籤支的容器] */
.stick-group {
   position: absolute;
   /* 🌟 核心陣眼：將容器往上拉 60px，讓籤露出籤筒頂部 */
   top: -60px; 
   left: 0;
   width: 100%;
   height: 120px;
   display: flex;
   justify-content: center;
   align-items: flex-end;
   /* 🌟 核心陣眼：設為 -1，完美藏在籤筒背景色的後方！ */
   z-index: -1; 
}

/* [單支背景籤 (幻影)] 純 CSS 繪製的竹籤 */
.fortune-stick {
   position: absolute;
   width: 10px;
   height: 150px;
   /* 竹籤原木色 */
   background: linear-gradient(to right, #b8860b, #daa520, #b8860b);
   border: 1px solid #8b6508;
   border-radius: 5px 5px 0 0;
   transform-origin: bottom center;
   /* 降低背景籤的亮度，凸顯主籤 */
   filter: brightness(0.6);
}

/* [準備躍出的主籤] */
.main-fortune-stick {
   position: absolute;
   width: 30px;
   height: 160px;
   /* 科技武俠風專屬主籤發光色 */
   background: linear-gradient(to right, #ffd700, #ffffe0, #ffd700);
   border: 1px solid #b8860b;
   border-radius: 8px 8px 0 0;
   transform-origin: bottom center;
   /* 預設藏在中間，亮度正常 */
   transform: translateX(0) rotate(0deg);
   filter: brightness(0.9);
   z-index: 5;
}

/* [主籤上的文字] */
.stick-text-overlay {
   position: absolute;
   top: 15%; 
   left: 50%;
   transform: translateX(-50%);
   writing-mode: vertical-lr;
   font-size: 1.05rem; 
   color: #1a0500; 
   font-weight: bold;
   letter-spacing: 3px;
   opacity: 0;
   transition: opacity 0.3s ease;
}

/* --- 🌟 物理動畫定義 --- */

/* [搖籤動畫] 對整個籤筒施放 */
@keyframes shake-cyber-cylinder {
   0% { transform: rotate(0deg) translateY(0); }
   25% { transform: rotate(-15deg) translateY(-5px); }
   50% { transform: rotate(0deg) translateY(0); }
   75% { transform: rotate(15deg) translateY(-5px); }
   100% { transform: rotate(0deg) translateY(0); }
}

.anim-shake {
   animation: shake-cyber-cylinder 0.4s ease-in-out infinite;
}

/* [主籤躍出動畫] */
@keyframes main-stick-jump {
   0% { 
      transform: translateY(0) scale(1); 
      opacity: 1; 
      filter: brightness(0.9) drop-shadow(0 0 0 transparent);
   }
   50% { 
      /* 向上躍出並放大 */
      transform: translateY(-60px) scale(1.3); 
      opacity: 1; 
      filter: brightness(1.5) drop-shadow(0 0 20px var(--accent));
   }
   100% { 
      /* 定格在半空中 */
      transform: translateY(-30px) scale(1.15); 
      opacity: 1; 
      filter: brightness(1.2) drop-shadow(0 0 15px var(--accent));
   }
}

.anim-pop-out {
   /* 觸發躍出動畫，並停留在最後一個影格 (forwards) */
   animation: main-stick-jump 1.2s cubic-bezier(0.25, 1.5, 0.5, 1) forwards;
   /* 確保躍出時邊框與陰影變色 */
   border-color: var(--accent) !important;
   z-index: 20 !important;
}



/* =========================================================================
 * 【八、神機妙算滿版主視覺陣法 (Main Vision & Animations)】
 * 說明：控制 16:9 神像圖片的呼吸與求籤時的發光爆發特效。
 * ========================================================================= */
#taichi-array-module {
   text-align: center;
   margin-bottom: 20px;
}

/* 神像主體樣式設定 */
#GOW5-main-vision {
   width: 95%;
   /* 限制最大寬度，避免在電腦大螢幕上過於巨大 */
   max-width: 800px;
   display: block;
   margin: 15px auto;
   border-radius: 12px;
   border: 2px solid var(--primary);
   /* 圖片狀態切換時的平滑轉場 */
   transition: all 0.5s ease-in-out;
}

/* [靜止狀態]：掛載呼吸燈動畫 */
.GOW5-vision-idle {
   /* 呼叫下方定義的 GOW5Breathe 關鍵影格，無限循環 */
   animation: GOW5Breathe 4s infinite ease-in-out;
}

/* [求籤狀態]：掛載發光降臨動畫 */
.GOW5-vision-active {
   /* 呼叫 GOW5Divine 關鍵影格，執行 2.5 秒後停留在最後狀態 (forwards) */
   animation: GOW5Divine 2.5s ease-in-out forwards;
}

/* --- 神機妙算特效動畫引擎陣法 --- */

/* [預設待機特效：神光呼吸陣] */
@keyframes GOW5Breathe {
   0%, 100% {
      transform: translateY(0);
      box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.3);
   }
   50% {
      transform: translateY(-12px);
      box-shadow: 0 0 25px rgba(var(--primary-rgb), 0.7);
   }
}

/* [求籤觸發特效：發光降臨陣] */
@keyframes GOW5Divine {
   0% {
      transform: scale(1);
      box-shadow: 0 0 30px rgba(var(--accent-rgb), 0.8);
      filter: brightness(1);
   }
   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);
   }
}

/* =========================================================================
 * 【九、籤詩解盤區塊佈局 (Lottery Result Architecture)】
 * 說明：處理抽出籤詩後，顯示的標題、卦象、詩詞與財神賜語的排版。
 * ========================================================================= */

/* 解盤主畫布容器 */
.card-area.wide-card {
   background: rgba(5, 5, 5, 0.9); 
   border: 2px solid var(--primary); 
   padding: 30px; 
   border-radius: 8px; 
   width: 100%; 
   max-width: 1000px; 
   margin: 0 auto; 
   position: relative; 
   overflow: hidden; 
}

/* 解盤頂部：籤號與籤名區域 */
.lot-header {
   /* 使用 Flexbox 讓左側標籤與右側標題水平排列 */
   display: flex;                
   justify-content: flex-start; 
   align-items: center;          
   gap: 15px;
   /* 底部加上分隔線 */
   border-bottom: 1px solid var(--glass-border); 
   padding-bottom: 15px; 
   margin-bottom: 20px; 
}

/* 左側紅色吉凶標籤 (如：上上籤) */
.lot-badge {
   /* 由警示紅漸變到主題紅的立體感背景 */
   background: linear-gradient(135deg, var(--danger), var(--primary)); 
   color: #fff; 
   padding: 8px 15px; 
   border-radius: 4px; 
   font-weight: bold; 
   border: 1px solid var(--accent); 
}

/* 籤詩主名稱 (如：蘇東坡遊江) */
.lot-title {
   font-size: 2rem; 
   color: var(--accent); 
}

/* 在主標題右側的籤詩喻意 (如：喻: 豁達大度) */
.sign-title {
    color: var(--gold-primary, #f6e09a);
    font-size: 85%;
    font-weight: normal;
    padding-left: 8px;
    text-shadow: 0 0 5px var(--gold-glow, rgba(246, 224, 154, 0.4));
}

/* (RWD 專用) 斷行標籤，預設在桌機隱藏 */
.sign-title .rwd-break {
    display: none;
}

/* 卦象跑馬燈外框 (V0.55 已改由 .cyber-marquee-container 接手，此處保留外框樣式) */
.lot-hexagram-box {
   text-align: center;
   font-size: 1.15rem;
   color: #fff;
   /* 中間深兩側透明的漸層背景 */
   background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb), 0.3), transparent);
   /* 上下推開內距，讓跑馬燈有空間 */
   padding: 8px 15px;
   margin-bottom: 15px;
   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);
}

/* 財神賜語 (神明開示) 文字區塊 */
.lot-story-detail-box {
   background: rgba(var(--primary-rgb), 0.08);
   /* 左側粗線營造引言感 */
   border-left: 4px solid var(--primary);
   padding: 15px 20px;
   margin-bottom: 20px;
   /* 右側圓角，左側直角 */
   border-radius: 0 8px 8px 0;
   color: #eee;
   font-size: 1.1rem;
   /* 提高行高，改善長篇閱讀體驗 */
   line-height: 1.8;
   letter-spacing: 1px;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* 籤詩七言絕句區塊 */
.lot-poem-box {
   text-align: center; 
   padding: 20px; 
   background: rgba(0, 0, 0, 0.4); 
   /* 上下虛線分隔 */
   border-top: 1px dashed var(--primary);    
   border-bottom: 1px dashed var(--primary); 
   margin-bottom: 25px; 
}

/* 詩詞文字設定 */
.lot-poem-box p {
   font-size: 1.6rem; 
   color: #fff; 
   /* 拉大字距，營造古詩詞的韻味 */
   letter-spacing: 4px; 
   line-height: 1.8; 
}

/* =========================================================================
 * 【十、傳統解籤網格佈局陣法 (CSS Grid System)】
 * 說明：利用現代 CSS Grid 技術，將聖意、東坡解等區塊漂亮地分割為四欄。
 * ========================================================================= */

/* 八宮格容器 */
.lot-grid-dimensions {
   /* 啟用格線系統 */
   display: grid;                     
   /* 切割為 4 個等寬的欄位 */
   grid-template-columns: repeat(4, 1fr);    
   gap: 15px;                         
   margin-bottom: 25px; 
}

/* 單一網格項目 (如：求財、升遷) */
.dim-item {
   background: rgba(var(--primary-rgb), 0.05); 
   border-left: 3px solid var(--primary); 
   padding: 15px; 
}

/* 若內容過長，強制佔滿整列 (跨越從第 1 條線到最後 1 條線) */
.dim-item.full-width {
   grid-column: 1 / -1 !important;               
}

/* 網格項目的標題 (例如：求財：) */
.dim-label {
   color: var(--primary); 
   font-size: 1.1rem; 
   /* 強制與內容在同一行 */
   display: inline-block !important;                    
   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; 
   line-height: 1.6; 
   /* 強制與標題在同一行 */
   display: inline !important; 
}

/* --- 開運六要訣 (lucky_elements) 專屬網格 --- */
.lucky-elements-grid {
   display: grid;
   /* 六要訣切為 3 個等寬欄位 (上下兩列剛好 6 個) */
   grid-template-columns: repeat(3, 1fr);
   gap: 10px;
   margin-top: 15px;
   padding: 0;
   border: none;
   background: transparent;
   box-shadow: none;
}

/* 六要訣單一項目 */
.lucky-item {
   /* 使用 Flexbox 讓標籤與數值水平排列並置中 */
   display: flex;
   align-items: center;
   background: rgba(var(--primary-rgb), 0.05);
   padding: 8px 10px;
   border-radius: 4px;
   border: 0px 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;
}

/* =========================================================================
 * 【十一、懸浮法訣 (Tooltip) 核心樣式】
 * 說明：結合 JS 正則表達式產生的 HTML 結構，打造無縫科技武俠、霓虹毛玻璃質感。
 * ========================================================================= */

/* 1. 懸浮觸發點 (文字本身) */
.lucky-value.has-tooltip {
   /* 必須設定為 relative，以便內部的 Tooltip 盒子能以此為絕對定位基準 */
   position: relative; 
   /* 滑鼠游標改為 [說明/問號] 狀態，暗示可互動 */
   cursor: help;       
   /* 移除原本的底線，保持畫面乾淨 (V0.45 修正) */
   border-bottom: 0px dotted rgba(255, 255, 255, 0.4); 
   transition: all 0.3s ease;
}

/* 觸發點滑鼠懸浮時的文字霓虹亮點 */
.lucky-value.has-tooltip:hover {
   /* 變成主題專屬的金色 */
   color: var(--gold-primary, #f6e09a); 
   /* 產生外發光，提升科技感 */
   text-shadow: 0 0 10px var(--gold-glow, rgba(246, 224, 154, 0.7));
}

/* 2. Tooltip 懸浮法訣主體盒子 (預設隱藏) */
.lucky-value.has-tooltip .tooltip-box {
   /* 預設完全透明且隱藏，避免干擾畫面點擊 */
   visibility: hidden;
   opacity: 0;
   /* 絕對定位於觸發文字的上方 */
   position: absolute;
   bottom: 130%; 
   left: 50%;
   /* 水平置中，並預設往下位移 10px，為浮升動畫作準備 */
   transform: translateX(-50%) translateY(10px); 
   /* 固定寬度，避免解說文字過長撐破版面 */
   width: 280px;         
   /* 限制最大高度，超長則顯示垂直捲軸 */
   max-height: 200px;     
   overflow-y: auto;      
   padding: 15px;
   /* 確保浮在最上層，蓋過其他宮格 */
   z-index: 100;          
   /* 暗色半透明背景，搭配毛玻璃效果 */
   background: rgba(10, 15, 25, 0.9); 
   -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);       
   /* 隱約的科技藍色邊框與光暈 */
   border: 1px solid var(--border-color, rgba(120, 150, 200, 0.3)); 
   border-radius: 8px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px var(--neon-blue-glow, rgba(0, 200, 255, 0.2)); 
   /* 文字樣式：齊行對齊、強制換行 */
   color: var(--text-muted, #ccc);
   font-size: 0.9rem;
   line-height: 1.6;
   text-align: justify;  
   word-wrap: break-word; 
   /* 浮出時的平滑轉場動畫 (包含位移與透明度) */
   transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0.4s;
}

/* 3. 觸發懸浮狀態 (Hover 顯示 Tooltip) */
.lucky-value.has-tooltip:hover .tooltip-box {
   visibility: visible;
   opacity: 1;
   /* Y 軸歸零，產生由下往上浮升的動態感 */
   transform: translateX(-50%) translateY(0); 
}

/* =========================================================================
 * 【十二、CSS3 絲滑跑馬燈引擎 (Marquee Replacement)】
 * 說明：全面汰換老舊的 <marquee> 標籤，改由純 CSS 驅動，達成 60FPS 完美順暢度。
 * ========================================================================= */

/* 外層容器：限制範圍，隱藏超出的文字 */
.cyber-marquee-container {
   width: 100%;
   /* 切除跑出界外的卦象文字 */
   overflow: hidden;         
   /* 強制文字絕對不換行，維持單行跑動 */
   white-space: nowrap;      
   position: relative;
   box-sizing: border-box;
   padding: 5px 0;
}

/* 內層文字：負責執行捲動動畫 */
.cyber-marquee-content {
   display: inline-block;
   vertical-align: middle;
   /* 動畫名稱 | 持續時間 50s (平穩速度) | 均速移動 | 無限循環 */
   animation: hexagramScroll 50s linear infinite; 
   /* 關鍵陣法：利用 padding-left 將文字一開始推到畫面最右側的外面 */
   padding-left: 100%;       
   color: var(--gold-primary, #f6e09a); 
}

/* 定義由右至左的移動軌跡關鍵影格 */
@keyframes hexagramScroll {
   0% {
      /* 從 padding-left 撐開的最右側原點出發 */
      transform: translate(0, 0);       
   }
   100% {
      /* 往左邊移動自身 100% 的寬度，直到完全滑出左側畫面 */
      transform: translate(-100%, 0);   
   }
}

/* UX 小巧思：滑鼠移上去時暫停捲動，方便善信閱讀 */
.cyber-marquee-container:hover .cyber-marquee-content {
   animation-play-state: paused;
}

/* =========================================================================
 * 【十三、天璣居士獨家解盤與行動版摺疊陣法 (Master Analysis & Accordion UI)】
 * ========================================================================= */

/* 解盤外框容器 */
.lot-master-box {
   /* 使用點綴色(accent)的極淡透明度作為背景 */
   background: rgba(var(--accent-rgb), 0.05); 
   border: 1px solid rgba(var(--accent-rgb), 0.3); 
   padding: 20px; 
   border-radius: 8px; 
}

/* 解盤大標題 (💬 天璣居士・獨家解盤：) */
.master-title { 
   color: var(--accent); 
   border-bottom: 1px dashed var(--accent); 
   padding-bottom: 10px; 
   margin-bottom: 15px; 
}

/* 各段落的小標籤 (如：【總體斷言】) */
.master-label { 
   color: var(--accent); 
   font-weight: bold; 
   display: block; 
   margin-bottom: 8px; 
   font-size: 1.15rem; 
}

/* 各段落的解說內文 */
.master-text { 
   color: #fff; 
   line-height: 1.8; 
   font-size: 1.05rem; 
}

/* 總體斷言專屬的強調間距 */
.master-section.highlight { 
   margin-top: 25px; 
}

/* 各五維維度的水平虛線分隔 */
.master-divider {
   border-top: 1px dashed rgba(var(--accent-rgb), 0.4); 
   margin: 25px 0; 
}

/* 五維子項目的標籤 (如：❖ 事業佈局) */
.master-sub-label {
   color: var(--accent); 
   font-weight: bold; 
   display: block; 
   margin-top: 20px; 
   margin-bottom: 8px; 
   font-size: 1.1rem; 
   text-shadow: 0 0 5px rgba(var(--accent-rgb), 0.5); 
}

/* 警世語專用，強制套用危險紅色 */
.master-warning {
   color: var(--danger) !important;  
   font-weight: bold; 
   display: block; 
   margin-top: 25px; 
   margin-bottom: 8px; 
   font-size: 1.1rem; 
   text-shadow: 0 0 8px rgba(255, 68, 68, 0.4); 
}

/* 桌機版隱藏「展開/收起」的提示文字，因為桌機預設全展開 */
@media (min-width: 1025px) {
   .mobile-toggle-text {
      display: none !important;
   }
}

/* =========================================================================
 * 【十四、圖卡匯出與 RWD 雙欄堆疊陣法 (Canvas Export & RWD Layout)】
 * ========================================================================= */

/* 原本的隱藏版 QRCode 容器 */
.card-qrcode { 
   text-align: center; 
   margin-top: 25px; 
   display: none; 
}

/* 圖卡下載專用的排版容器 (左神像，右 QR 與網址) */
.card-qr-wrapper {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 40px; 
   padding-top: 25px;
   margin-top: 25px;
   border-top: 1px dashed rgba(var(--primary-rgb), 0.5);
}

/* QRCode 圖片本體樣式 */
.card-qrcode img { 
   border: 2px solid var(--accent); 
   border-radius: 4px; 
   padding: 5px; 
   background: #fff; 
   box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.5); 
   max-width: 120px; 
   height: auto; 
}

/* 動態生成的五維圖卡專屬稱號 (如：五路財神 偏財求財籤) */
.card-watermark-title {
   color: var(--accent); 
   font-size: 1.3rem; 
   font-weight: bold; 
   letter-spacing: 3px; 
   text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.8); 
   border-bottom: 1px dashed var(--primary); 
   padding-bottom: 5px; 
   margin-top: 5px; 
}

/* 圖卡底部的來源網址 */
.card-watermark-url {
   color: #ddd; 
   font-size: 0.85rem; 
   font-family: monospace;    
   letter-spacing: 1px; 
   opacity: 0.8;              
}

/* =========================================================================
 * 【十五、廠商贊助與廣告區塊 (Ad Grid & Carousel)】
 * ========================================================================= */
aside h2 {
   color: var(--accent); 
   text-align: center; 
   margin-bottom: 20px; 
}

/* 文字廣告的三欄網格 */
.ad-grid {
   display: grid; 
   grid-template-columns: repeat(3, 1fr); 
   gap: 15px; 
}

/* 文字廣告連結本體 */
.text-ad {
   display: flex; 
   align-items: center; 
   color: #fff; 
   text-decoration: none; 
   background: rgba(0, 0, 0, 0.5); 
   padding: 12px 15px; 
   border-radius: 4px; 
   border: 1px solid rgba(var(--primary-rgb), 0.3); 
   transition: all 0.3s ease; 
}

/* 滑鼠移入廣告時稍微上浮並發光 */
.text-ad:hover {
   color: var(--accent); 
   border-color: var(--accent); 
   transform: translateY(-2px); 
   box-shadow: 0 4px 10px rgba(var(--accent-rgb), 0.2); 
}

.red-icon {
   color: var(--primary); 
   margin-right: 10px; 
}

/* 16:9 圖片廣告輪播容器 */
.ad-carousel-wrapper {
   width: 100%; 
   aspect-ratio: 16 / 9;      
   position: relative;        
   overflow: hidden;          
   border: 2px solid var(--primary); 
   border-radius: 8px; 
}

/* 輪播軌道 (5 張圖片 = 500% 寬度) */
.ad-slider-track {
   display: flex;             
   width: 500%;               
   height: 100%; 
   transition: transform 0.5s ease-in-out; 
}

.ad-slide {
   /* 單張投影片佔軌道的 20% (即 100% 容器寬) */
   width: 20%;                
   position: relative; 
}

.ad-slide img {
   width: 100%; 
   height: 100%; 
   object-fit: cover;         
   opacity: 0.9;              
   transition: 0.3s; 
}

.ad-slide:hover img { 
   opacity: 1;                
}

/* 廣告圖專屬廣告說明 (位於左上角) */
.ad-slide-title {
   position: absolute; 
   top: 20px; 
   left: 20px; 
   background: rgba(0, 0, 0, 0.8); 
   color: #fff; 
   padding: 10px 20px; 
   border-left: 4px solid var(--accent); 
   font-size: 1.2rem; 
}

/* 廣告圖專屬點擊連結按鈕 (位於右下角) */
.ad-slide-link {
   position: absolute; 
   bottom: 20px; 
   right: 20px; 
   background: rgba(var(--primary-rgb), 0.8); 
   color: #fff; 
   padding: 10px 20px; 
   text-decoration: none; 
   border: 1px solid var(--primary); 
   border-radius: 4px; 
   transition: 0.3s; 
}

.ad-slide-link:hover {
   background: var(--accent); 
   color: #000; 
}

/* 左右切換箭頭主體樣式 */
.ad-arrow {
   position: absolute; 
   top: 50%;                  
   transform: translateY(-50%); 
   background: rgba(0, 0, 0, 0.6); 
   color: var(--primary); 
   border: none; 
   font-size: 2rem; 
   padding: 15px 10px; 
   cursor: pointer; 
   z-index: 10; /* 確保浮在圖片最上層 */              
}

/* 左右箭頭各自靠邊定位 */
.ad-arrow-prev { left: 0; }
.ad-arrow-next { right: 0; }

/* 底部點點的外部容器 (強制置中) */
.ad-dots-container {
   position: absolute;
   bottom: 15px;
   left: 0;
   width: 100%;
   display: flex;
   justify-content: center;
   z-index: 10;
}

/* 單一小點點的樣式 */
.ad-dot {
   width: 10px;
   height: 10px;
   margin: 0 5px;
   background-color: rgba(255, 255, 255, 0.5);
   border-radius: 50%;
   cursor: pointer;
   transition: background-color 0.3s ease;
}

/* 目前播放中 (Active) 的小點點，加上強調色與霓虹光暈 */
.ad-dot.active {
   background-color: var(--accent, #00ffff);
   box-shadow: 0 0 8px var(--accent, #00ffff);
}

/* =========================================================================
 * 【十六、頁腳資訊、流量計數器與 QRCode 彈窗 (Footer, Counters & Modal)】
 * ========================================================================= */

/* 系統頁腳主容器 */
.cyber-footer-info {
   text-align: center; 
   padding: 40px 20px; 
   background: rgba(0, 0, 0, 0.8); 
   border-top: 2px solid var(--primary); 
   color: #ccc; 
   line-height: 1.8; 
}

.cyber-footer-info h3 { 
   color: var(--primary); 
   margin-bottom: 15px; 
}

.cyber-footer-info strong { 
   color: var(--accent); 
}

/* 包租公介紹資訊框 */
.info-content-box {
   display: inline-block; 
   text-align: left; 
   border: 1px dashed var(--accent); 
   padding: 20px 30px; 
   border-radius: 8px; 
   background: rgba(var(--accent-rgb), 0.05); 
   margin-bottom: 25px; 
}

.info-content-box p { 
   margin-bottom: 10px; 
   font-size: 1.1rem; 
   color: #ccc; 
}

.info-content-box p:last-child { 
   margin-bottom: 0;          
}

/* 分享與回到首頁按鈕群組 */
.footer-action-buttons {
   display: flex; 
   justify-content: center; 
   gap: 15px; 
   margin: 25px 0; 
}

.cyber-action-btn {
   background: transparent; 
   border: 1px solid var(--accent); 
   color: var(--accent); 
   padding: 8px 20px; 
   text-decoration: none; 
   border-radius: 4px; 
   transition: 0.3s; 
   cursor: pointer; 
}

.cyber-action-btn:hover {
   background: var(--accent); 
   color: #000; 
}

.cyber-footer-copyright { 
   margin-top: 20px; 
   font-size: 0.9rem; 
   color: #777; 
}

/* 流量計數器區域 */
.counter-footer {
   width: 100%; 
   background: #000; 
   padding: 12px 0; 
   border-top: 1px solid var(--primary); 
}

.counter-group { 
   display: flex; 
   justify-content: center; 
   gap: 20px; 
}

.counter-item {
   display: flex; 
   flex-direction: column;    
   align-items: center; 
   color: #aaa; 
   font-size: 0.9rem; 
   background: rgba(255, 255, 255, 0.05); 
   padding: 8px 25px; 
   border-radius: 4px; 
   border: 1px solid #333; 
   min-width: 120px; 
}

/* 計數器數字本體 (如: 1.2K) */
.count-val {
   color: var(--accent); 
   font-weight: bold; 
   font-size: 1.3rem; 
   margin-top: 5px; 
   text-shadow: 0 0 5px rgba(var(--accent-rgb), 0.5); 
}

/* 手機掃碼 QRCode 彈跳視窗 (黑屏遮罩) */
.qr-modal { 
   position: fixed; 
   top: 0; 
   left: 0; 
   width: 100%; 
   height: 100%; 
   background: rgba(0,0,0,0.85); 
   z-index: 1001;             
   display: none;             
   justify-content: center; 
   align-items: center; 
}

/* 彈跳視窗內容框 */
.qr-modal-content { 
   background: var(--bg-main); 
   border: 2px solid var(--primary); 
   padding: 30px; 
   border-radius: 8px; 
   text-align: center; 
   position: relative; 
   width: 90%; 
   max-width: 350px; 
}

/* 關閉按鈕 (右上角 X) */
.qr-close-btn { 
   position: absolute; 
   top: 10px; 
   right: 15px; 
   color: #fff; 
   font-size: 1.5rem; 
   cursor: pointer; 
}

/* =========================================================================
 * 【十七、3D 虛擬筊杯真實物理模組 (3D Jiao Toss Animation Engine)】
 * 系統版本：V0.61 (木質筊杯獨立並排版)
 * 作者宣告：五元網站包租公-Tiger老師 (台灣老站神)
 * 系統說明：徹底拔除所有交疊與負邊距，讓雙筊杯完美並排，並保留 3D 拋擲與地動特效。
 * ========================================================================= */

#coin-toss-module {
   position: relative;
   z-index: 25; 
}


/* [筊杯容器] 雙杯並排落地陣法 */
.coin-grid-2 {
   display: flex;
   justify-content: center;
   align-items: center;
   /* 🌟 陣眼核心：確保 30px 的安全距離，強制兩枚筊杯絕對不交疊 */
   gap: 50px;
   max-width: 250px;
   margin: 0 auto;
}

/* 👑 [地動山搖特效] 模擬筊杯落地時的重量打擊感 */
@keyframes jiaoGroundShake {
   0%, 100% { transform: translate(0, 0); }
   20% { transform: translate(-2px, 2px); }
   40% { transform: translate(2px, -1px); }
   60% { transform: translate(-1px, 1px); }
   80% { transform: translate(1px, -1px); }
}

/* 配合 JS，觸發落地震動 */
.coin-grid-2.ground-impact {
   animation: jiaoGroundShake 0.4s ease-out;
}

/* [單一筊杯外框] 依照木質筊杯的「瘦長比例」設定防護罩 */
.coin-unit {
   position: relative;
   /* 鎖死寬度與高度，避免被內部圖片撐破或變形 */
   width: 80px; 
   height: 160px; 
   perspective: 1200px;
   /* 徹底拔除所有多餘的 margin 擠壓 */
   margin: 0;
}

/* 確保左筊層級在右筊之上，但不再交疊 */
#coin-1 { z-index: 2; }
#coin-2 { z-index: 1; }

/* [立體核心] 乘載正反兩面，執行 3D 旋轉軸心任務 */
.coin-core {
   width: 100%; 
   height: 100%;
   position: absolute;
   top: 0; 
   left: 0;
   transform-style: preserve-3d;
   transition: transform 1.5s cubic-bezier(0.2, 0.8, 0.3, 1);
}

/* 🌟 靜止預設狀態為「一正一反 (聖筊)」起手式 */
/* 左筊預設：陽面 (平的) 向上 */
#coin-core-1 { transform: rotateY(0deg); }
/* 右筊預設：陰面 (凸的) 向上 */
#coin-core-2 { transform: rotateY(180deg); }

/* [筊杯圖片共通樣式] 絕對定位並隱藏背面 */
.coin-side {
   position: absolute;
   top: 0; 
   left: 0;
   width: 100%; 
   height: 100%;
   /* 強制清除任何舊有的圓角或背景干擾 */
   box-shadow: none !important;
   border-radius: 0 !important;
   background: transparent !important;
   border: none !important;
   /* 背面隱藏，避免 3D 翻轉時透視破圖 */
   backface-visibility: hidden;
   /* 讓圖片完美貼合防護罩比例 */
   object-fit: contain; 
   transition: filter 0.3s ease;
}

/* 科技美學：輪廓發光陣法 (Drop Shadow) */
.coin-unit.normal-lot .coin-side { filter: drop-shadow(0 0 10px rgba(255, 204, 0, 0.8)); }
.coin-unit.special-lot .coin-side { filter: drop-shadow(0 0 15px rgba(157, 78, 221, 0.9)); }

/* 定義正反面的基礎角度 */
.coin-head { transform: rotateY(0deg); z-index: 2; }
.coin-tail { transform: rotateY(180deg); z-index: 1; }

/* * --- 🌟 物理拋物線強化 --- 
 * 確保拋得夠高，並在空中加入光芒爆發
 */

@keyframes jiao-physics-1 {
   0% { transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); filter: brightness(1); }
   40% { transform: translate3d(-20px, -220px, 100px) rotateX(1440deg) rotateY(720deg) rotateZ(-25deg) scale(1.4); filter: brightness(1.5) drop-shadow(0 0 30px rgba(255, 215, 0, 0.8)); }
   80% { transform: translate3d(-5px, -25px, 0) rotateX(1780deg) rotateY(1050deg) rotateZ(-10deg) scale(1.05); }
   100% { transform: translate3d(0, 0, 0) rotateX(1800deg) rotateY(1080deg) rotateZ(0deg) scale(1); filter: brightness(1); }
}

@keyframes jiao-physics-2 {
   0% { transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(180deg) rotateZ(0deg) scale(1); filter: brightness(1); }
   45% { transform: translate3d(20px, -200px, 80px) rotateX(1080deg) rotateY(900deg) rotateZ(30deg) scale(1.4); filter: brightness(1.5) drop-shadow(0 0 30px rgba(255, 215, 0, 0.8)); }
   85% { transform: translate3d(5px, -20px, 0) rotateX(1420deg) rotateY(1240deg) rotateZ(15deg) scale(1.02); }
   100% { transform: translate3d(0, 0, 0) rotateX(1440deg) rotateY(1620deg) rotateZ(0deg) scale(1); filter: brightness(1); }
}

/* [觸發旋轉類別] */
.is-tossing-1 { animation: jiao-physics-1 1.8s cubic-bezier(0.15, 0.85, 0.35, 1) forwards !important; }
.is-tossing-2 { animation: jiao-physics-2 1.8s cubic-bezier(0.15, 0.85, 0.35, 1) forwards !important; }

/* [結果鎖定類別] JS 判定後強制顯示正面或反面 */
.force-head { transform: rotateY(0deg) !important; animation: none !important; }
.force-tail { transform: rotateY(180deg) !important; animation: none !important; }

/* =========================================================================
 * 【十八、全域 RWD 響應式優化模組 (Consolidated Media Queries)】
 * 說明：已將所有散落的 RWD 規則收斂至三大斷點，確保效能與維護性。
 * ========================================================================= */

/* --- 斷點一：平板版優化 (含直立 iPad 等，最大寬度 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; }
   
   .lot-header { flex-direction: column; gap: 12px; text-align: center; justify-content: center; align-items: center; }
   .lot-title { font-size: 1.6rem; }
   .lot-story-detail-box { padding: 12px 15px; font-size: 1.0rem;line-height: 1.0; }
   
   .lot-master-box { padding: 15px 12px; }
   .master-label, .master-sub-label, .master-warning { font-size: 1.05rem; }
   .master-text { font-size: 1rem; }

   /* 操作按鈕群組併排 */
   #btn-draw-lot, #btn-toss-coin { padding: 10px 20px; font-size: 1.05rem; }
   .action-group { display: flex; justify-content: center; gap: 10px; }
   .action-group .cyber-btn { font-size: 0.95rem; padding: 10px 5px; margin: 0; flex: 1; white-space: nowrap; }

   /* 廣告區塊轉為單欄 */
   .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; border-radius: 8px; }
   
   /* 頁腳區域調整 */
   .cyber-footer-info { padding: 30px 10px; }
   .info-content-box { padding: 15px 12px; width: 100%; margin-bottom: 20px; }
   .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; }
   
   /* 流量計數器調整 */
   .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; }

   /* 天璣解盤手風琴摺疊 (Accordion) 邏輯生效 */
   .mobile-toggle-text { display: inline-block; font-size: 0.85em; color: rgba(var(--primary-rgb), 0.7); margin-left: 10px; font-weight: normal; }
   .toggle-content { display: none; }
   .toggle-content.expanded { display: block; margin-top: 10px; }
   .toggle-label { cursor: pointer; padding: 5px 0; display: block; }
}

/* --- 斷點二：平板直立與寬手機 (防貼頂與大標題縮小，最大寬度 992px) --- */
@media (max-width: 992px) {
   /* 縮小主標題並推開上方 25px 距離，解除貼頂壓迫感 */
   .site-main-title {
      font-size: 80% !important; 
      margin-top: 25px !important; 
   }
   
   .glow-title {
      font-size: 1.5rem;
      margin-top: 15px !important; 
      margin-bottom: 10px; 
      /* 拉開字距，增加莊嚴與大氣感 */
      letter-spacing: 2px;                  
   }
   
   .header-subtitle {
      font-size: 1.0rem;
      margin-bottom: 10px;  
   }
   
}

/* --- 斷點三：手機版終極響應式優化 (最大寬度 768px) --- */
@media (max-width: 768px) {
   /* 1. 傳統八宮格與六要訣網格，強制收摺為兩欄 */
   .lot-grid-dimensions,
   .lucky-elements-grid { 
      grid-template-columns: repeat(2, 1fr) !important; 
      gap: 10px; 
   }
   
   /* 2. 圖卡匯出區塊，神像與 QR 碼改為上下垂直排列 */
   .card-qr-wrapper {
      flex-direction: column;
      gap: 20px;
   }
   
   /* 3. 隱藏神明開場白 (吾乃...)，節省版面空間 */
   .mobile-hide-greeting {
      display: none !important;
   }
   
   /* 4. 籤名與喻意 (sign-title) 強制斷行且置中 */
   h3#lot-title {
      display: block !important;
      text-align: center;
      padding: 10px 0;
   }
   .sign-title {
      display: block;                  /* 由橫轉直，強制單獨佔用一行 */
      padding-left: 0;                 
      margin-top: 15px;
      letter-spacing: 2px;                  
      text-align: center;              
      font-size: 90%;                  /* 在手機上稍微調大提升閱讀率 */
   }
   .sign-title .rwd-break {
      display: none;                   
   }
   
   /* 5. 懸浮法訣 (Tooltip) 避開手指遮擋，浮更高並微調寬度 */
   .lucky-value.has-tooltip .tooltip-box {
      width: 240px;
      bottom: 140%; 
      font-size: 0.85rem;
   }
   
   /* 6. 縮小 3D 金幣拋擲軌跡，避免飛出手機螢幕 */
   .coin-grid-2 {
      gap: 50px;
      max-width: 260px;
   }
   @keyframes toss-physics-1 {
      0%   { transform: translateY(0) rotateY(0deg) scale(1); }
      50%  { transform: translateY(-80px) rotateY(1800deg) scale(1.15); } 
      100% { transform: translateY(0) rotateY(3600deg) scale(1); } 
   }
   @keyframes toss-physics-2 {
      0%   { transform: translateY(0) rotateX(0deg) rotateY(0deg) scale(1); }
      50%  { transform: translateY(-100px) rotateX(1080deg) rotateY(900deg) scale(1.2); } 
      100% { transform: translateY(0) rotateX(2160deg) rotateY(1800deg) scale(1); } 
   }
}

/* --- 斷點四：極窄螢幕手機最終防線 (最大寬度 480px) --- */
@media (max-width: 480px) {
   /* 確保極窄螢幕下，系統主標題字體與距離防線依然穩固 */
   .site-main-title {
      font-size: 80% !important;
      margin-top: 25px !important;
   }
   
   .glow-title {
      font-size: 1.5rem;
      margin-top: 15px !important; 
      margin-bottom: 10px; 
      /* 拉開字距，增加莊嚴與大氣感 */
      letter-spacing: 2px;                  
   }
   
   .header-subtitle {
      font-size: 0.92rem;
      margin-bottom: 10px;  
   }
   
   .lot-story-detail-box { padding: 12px 8px; font-size: 1.0rem;line-height: 1.1; }
   
   /* 單一網格項目 (如：求財、升遷) */
   .dim-item {border-left: 2px solid var(--primary);padding: 8px 10px;}
   
   /* 廣告圖專屬廣告說明 (位於左上角) */
   .ad-slide-title {display: none;}
   
   /* 廣告圖專屬點擊連結按鈕 (位於右下角) */
   .ad-slide-link {display: none;}

   .ad-slide-link:hover {
      background: var(--accent); 
      color: #000; 
   }

   /* 左右切換箭頭主體樣式 */
   .ad-arrow {
      position: absolute; 
      top: 50%;                  
      transform: translateY(-50%); 
      background: rgba(0, 0, 0, 0.6); 
      color: var(--primary); 
      border: none; 
      font-size: 1.2rem; 
      padding: 8px 8px; 
      cursor: pointer; 
      z-index: 10; /* 確保浮在圖片最上層 */              
   }

   /* 左右箭頭各自靠邊定位 */
   .ad-arrow-prev { left: 0; }
   .ad-arrow-next { right: 0; }

   /* 底部點點的外部容器 (強制置中) */
   .ad-dots-container {
      position: absolute;
      bottom: 10px;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: center;
      z-index: 10;
   }

   /* 單一小點點的樣式 */
   .ad-dot {
      width: 6px;
      height: 6px;
      margin: 0 3px;
      background-color: rgba(255, 255, 255, 0.5);
      border-radius: 50%;
      cursor: pointer;
      transition: background-color 0.3s ease;
   }

   /* 目前播放中 (Active) 的小點點，加上強調色與霓虹光暈 */
   .ad-dot.active {
      background-color: var(--accent, #00ffff);
      box-shadow: 0 0 8px var(--accent, #00ffff);
   }

}

/* 
 * =========================================================================
 * 🏮 祈福光明燈 - 左側懸浮選單陣法 (版本：V0.12)
 * 作者宣告：五元網站包租公-Tiger老師 (台灣老站神)
 * 系統說明：利用 fixed 定位與毛玻璃特效，打造科技宮廟風的懸浮入口
 * =========================================================================
 */

/* [懸浮容器定位] 將整個區塊釘死在畫面左側中間 */
.floating-light-menu {
   /* 絕對固定於視窗上，不隨卷軸移動 */
   position: fixed;
   /* 緊貼畫面最左側 */
   left: 0;
   /* 基準點設在畫面高度的 50% */
   top: 50%;
   /* 利用 Y 軸負 50% 的技巧，達成完美的垂直置中 */
   transform: translateY(-50%);
   /* 確保層級在最上方，不被其他解盤或廣告區塊遮擋 */
   z-index: 999;
   /* 與畫面邊緣保持一點呼吸空間 */
   padding: 10px 0 10px 0px;
}

/* [按鈕主體樣式] 結合玻璃擬態與霓虹科技感 */
.light-action-btn {
   /* 使用 Flexbox 讓圖標與文字上下排列並置中 */
   display: flex;
   /* 設定為垂直欄位方向 */
   flex-direction: column;
   /* 內部元素水平置中對齊 */
   align-items: center;
   /* 內部元素垂直置中對齊 */
   justify-content: center;
   /* 消除超連結預設的底線 */
   text-decoration: none;
   /* 使用主題的 rgba 半透明色作為背景，營造毛玻璃感 */
   background: rgba(var(--primary-rgb), 0.15);
   /* 外圍加上強調色 (金/紅) 的邊框 */
   border: 2px solid var(--accent);
   /* 移除左側圓角，保留右側圓角，讓按鈕像從螢幕邊緣「長」出來一樣 */
   border-radius: 0 8px 8px 0;
   /* 設定上下與左右的內距，拉出立體空間 */
   padding: 15px 8px;
   /* 初始的霓虹外發光陰影 */
   box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.4);
   /* 啟動背景模糊，實現頂級 Glassmorphism 質感 */
   backdrop-filter: blur(5px);
   /* 所有的變化加上 0.3 秒的平滑轉場，提升手感 */
   transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* [滑鼠懸浮互動] 移入時的凸出與高亮特效 */
.light-action-btn:hover {
   /* 背景透明度加深，視覺變重 */
   background: rgba(var(--accent-rgb), 0.20);
   /* 外發光增強，展現神明發威的感覺 */
   box-shadow: 0 0 25px var(--accent);
   /* 整個按鈕向右滑動 8px，產生被「拉出來」的物理互動感 */
   transform: translateX(8px);
}

/* [燈籠圖標樣式] 掛載呼吸燈動畫 */
.light-icon {
   /* 設定圖標的基礎大小 */
   font-size: 1.8rem;
   /* 與下方文字拉開距離 */
   margin-bottom: 8px;
   /* 呼叫自訂的 lanternGlow 動畫，2秒一次，平滑來回交替 (alternate) */
   animation: lanternGlow 2s infinite alternate ease-in-out;
   /* [V0.16 新增] 加上平滑轉場，讓文字收合時的間距變化也具有絲滑感 */
   transition: margin 0.5s ease;
}

/* [文字樣式] 傳統宮廟直書陣法 */
.light-text {
   /* 字體顏色套用強調色 (如：武財神金) */
   color: var(--accent);
   /* 字體加粗，提升辨識度 */
   font-weight: bold;
   /* 字體基礎大小 */
   font-size: 1.1rem;
   /* 核心陣眼：將文字改為直向排列 (從左到右) */
   writing-mode: vertical-lr;
   /* 拉開每個字之間的距離，營造莊嚴感 */
   letter-spacing: 5px;
   /* 文字加上自體發光效果，確保在暗色背景下清晰可見 */
   text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.8);
   
   /* --- [V0.19 返老還童破壁版：動畫基底] --- */
   display: block;
   max-height: 200px;
   opacity: 1;
   overflow: hidden;
   /* 針對所有變化設定 0.4 秒平滑過場 */
   transition: all 0.4s ease;
}

/* 
 * =========================================================================
 * 🏮 滾動隱藏觸發陣法：隨卷軸智能收縮 (V0.19 終極版)
 * =========================================================================
 */
.light-action-btn.is-scrolled .light-text {
   /* 物理高度雙重封殺 */
   max-height: 0 !important;
   height: 0 !important;
   /* 字體與字距全數歸零，拔除直書殘留的體積 */
   font-size: 0 !important;
   letter-spacing: 0 !important;
   line-height: 0 !important;
   /* 隱藏視覺與外距 */
   opacity: 0 !important;
   margin: 0 !important;
   padding: 0 !important;
   /* 移出渲染流，避免撐開按鈕 */
   visibility: hidden !important;
}

.light-action-btn {
   transition: all 0.4s ease;
}

.light-action-btn.is-scrolled {
   /* 收合後縮小按鈕本體，變成完美的方形燈籠 */
   padding: 10px !important;
}

.light-action-btn.is-scrolled .light-icon {
   /* 讓燈籠回到正中央 */
   margin-bottom: 0 !important;
}

/* 
 * --- 核心動畫關鍵影格：長明神燈光暈陣法 --- 
 */
@keyframes lanternGlow {
   /* [動畫起點] 光芒微弱，圖標維持原大小 */
   0% { 
      /* 利用 drop-shadow 為文字或 Emoji 加上發光濾鏡 */
      filter: drop-shadow(0 0 5px rgba(var(--accent-rgb), 0.5)); 
      /* 大小比例 1:1 */
      transform: scale(1); 
   }
   /* [動畫終點] 光芒爆發，圖標微幅放大 */
   100% { 
      /* 發光濾鏡範圍擴大，顏色變濃 */
      filter: drop-shadow(0 0 20px var(--accent)); 
      /* 圖標放大 1.15 倍，產生心跳呼吸感 */
      transform: scale(1.15); 
   }
}

/* 
 * --- 手機版 RWD 防禦陣法 ---
 * 避免手機螢幕過小時，按鈕太大擋住求籤主畫面
 */
@media (max-width: 768px) {
   
   .floating-light-menu {
      /* 基準點設在畫面高度的 50% */
      top: 87%;
      bottom: 5px;
      padding: 10px 0 10px 0px;
   }
   
   .light-action-btn {
      /* 手機版縮小內距 */
      padding: 8px 5px;
      /* 外圍加上強調色 (金/紅) 的邊框 */
      border: 1px solid var(--accent);
   }
   .light-icon {
      /* 手機版圖標縮小 */
      font-size: 1.4rem;
   }
   .light-text {
      /* 手機版字體縮小 */
      font-size: 0.95rem;
      /* 字距微調 */
      letter-spacing: 3px;
   }
}

/* 
 * =========================================================================
 * 👑 十大命理陣法選單：行動版/平板 兩段式展翼動畫引擎 (V0.15)
 * 作者宣告：五元網站包租公-Tiger老師 (台灣老站神)
 * 說明：利用 max-width 與 opacity 完美控制文字的滑出與收合
 * =========================================================================
 */
@media (max-width: 1024px) {
   /* 1. 預設狀態：將文字區塊的寬度與透明度歸零，完全隱藏，只留 ☰ 圖標 */
   .menu-text {
      max-width: 0;
      opacity: 0;
      /* 隱藏超出的文字，避免破版 */
      overflow: hidden;
      /* 設定平滑的過場動畫：寬度與透明度同時耗時 0.3 秒，展現絲滑感 */
      transition: max-width 0.6s ease, opacity 0.6s ease;
   }
   
   /* 2. 展開狀態：當按鈕被 JS 賦予 .menu-expanded 類別時，文字向右滑出 */
   .menu-toggle-btn.menu-expanded .menu-text {
      /* 在文字左側加上一條微弱的主題色分隔線 */
      border-left: 1px solid rgba(var(--primary-rgb), 0.4);
      /* 將文字往右推開，與分隔線保持距離 */
      padding-left: 6px;
      /* 稍微調小一點字體，讓整體比例更精緻 */
      font-size: 0.95rem;
      /* 給予足夠的寬度讓「十大命理陣法」六個字能完全顯示 */
      max-width: 160px; 
      /* 透明度恢復為 1，文字浮現 */
      opacity: 1;
   }
}

/* * =========================================================================
 * 🏮 光明燈獨立結界 (Modal iframe 陣法)
 * =========================================================================
 */
/* 1. 黑屏遮罩層 (依據老站神指示：精準的 0.6 透明度) */
.light-modal-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   /* 背景透明度 0.6，完美透出底層的求籤主畫面 */
   background: rgba(0, 0, 0, 0.8);
   /* 加上輕微毛玻璃，讓底層畫面更有景深感 */
   backdrop-filter: blur(1px);
   z-index: 1005;
   /* 使用 Flexbox 讓內部的視窗絕對置中 */
   display: flex;
   justify-content: center;
   align-items: center;
}

/* 2. 彈跳視窗內容容器 */
.light-modal-content {
   position: relative;
   width: 95%;
   /* 限制最大寬度，確保在大螢幕上也很優雅 */
   max-width: 1200px;
   /* 高度佔據畫面的 90%，內部 iframe 自動產生獨立捲軸 */
   height: 90vh;
   background: var(--bg-main);
   border: 2px solid var(--accent);
   border-radius: 12px;
   box-shadow: 0 0 30px rgba(var(--accent-rgb), 0.5);
   overflow: hidden;
   /* 彈出時的科技展翼動畫 */
   animation: modalPopUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 3. 關閉按鈕 (X) */
.light-modal-close {
   position: absolute;
   top: 15px;
   right: 25px;
   color: var(--accent);
   font-size: 2.8rem;
   font-weight: bold;
   cursor: pointer;
   z-index: 1010;
   text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.8);
   transition: all 0.3s ease;
   /* 給 X 按鈕一個微底色結界，避免被 iframe 內的圖片吃掉 */
   background: rgba(0, 0, 0, 0.6);
   border-radius: 50%;
   width: 45px;
   height: 45px;
   line-height: 40px;
   text-align: center;
   border: 1px solid rgba(var(--accent-rgb), 0.3);
}

.light-modal-close:hover {
   color: #fff;
   background: var(--accent);
   /* 滑鼠移入時旋轉 90 度，增添互動感 */
   transform: rotate(90deg);
   box-shadow: 0 0 15px var(--accent);
}

/* 4. iframe 獨立時空裂縫 */
.light-modal-iframe {
   width: 100%;
   height: 100%;
   border: none;
   display: block;
   /* 允許內部獨立滾動 */
   overflow-y: auto;
}

/* 彈出動畫關鍵影格 */
@keyframes modalPopUp {
   0% { transform: scale(0.9); opacity: 0; }
   100% { transform: scale(1); opacity: 1; }
}