@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap');

* { box-sizing: border-box; }

/* 修改 BODY：維持亮色系 */
body { 
    background-color: #E3EEFF; 
    margin: 0; 
    overflow: hidden; 
    font-family: 'Inter', sans-serif; 
    user-select: none; 
    cursor: default; 
    transition: none; 
}

/* --- 動態光暈背景特效 (鮮艷通透・色彩回歸版) --- */

.ambient-glow-container {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: -1; 
    overflow: hidden;
    background: radial-gradient(circle at center, #d6e7ff 50%, #d6e7ff 80%);
}

/* 直接加在最外層背景容器，產生穩定的中心擴散白光 */
.ambient-glow-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    /* 確保在正中心 */
    transform: translate(-50%, -50%);
    border-radius: 50%;
    /* 白色 10% 擴散效果 */
    background: radial-gradient(
        circle at center, 
        rgba(255, 255, 255, 0.6) 100%,   /* 中心白色 */
        rgba(255, 255, 255, 0.05) 150%, 
        transparent 200%                /* 向外擴散至透明 */
    );
    /* 額外加上濾鏡讓邊緣更柔和，不干擾上方的色彩 blob */
    filter: blur(50px);
    z-index: 0; 
    pointer-events: none;
}

.glow-spinner {
    position: absolute;
    top: 50%; left: 50%;
    width: 120vmax;
    height: 120vmax;
    transform: translate3d(-50%, -50%, 0);
    animation: rotate-gradient 20s linear infinite; 
    z-index: 1;
    filter: blur(60px); /* 稍微降低模糊，讓顏色更紮實一點點 */
    will-change: transform;
    filter: blur(90px);
}

.glow-blob {
    position: absolute;
    top: 50%; left: 50%;
    border-radius: 50%;
    opacity: 0.6; /* 稍微提高基礎透明度 */
    /* [新增]：這是質感的關鍵，讓顏色與底色融合產生亮部 */
    mix-blend-mode: color-dodge; 
    filter: blur(40px); /* 保持適度模糊 */
}

/* --- 修改後的動態光暈背景 (披薩分佈版) --- */

/* 1. 藍色：移向左側 */
.blob-blue {
    width: 80%; height: 80%; /* 統一調大，增加重疊層次感 */
    transform: translate3d(-80%, -40%, 0); 
    background: radial-gradient(
        circle at center, 
        #AECBFA 20%,          
        rgba(174, 203, 250, 0.4) 50%, 
        transparent 90%       
    );
    opacity: 0.5;
}

/* 2. 紅色：移向右上方 */
.blob-red {
    width: 80%; 
    height: 80%;
    /* 往右上方偏移，與藍色、黃色拉開距離 */
    transform: translate3d(0%, -70%, 0); 
    background: radial-gradient(
        circle at center, 
        #F28B82 20%,           
        rgba(242, 139, 130, 0.4) 50%, 
        transparent 85%
    );
    opacity: 0.35;             
    z-index: 2;                
}

/* 3. 黃色：移向右下方 */
.blob-yellow {
    width: 80%; 
    height: 80%;
    /* 往右下方偏移，形成三角鼎立 */
    transform: translate3d(0%, -15%, 0); 
    background: radial-gradient(
        circle at center, 
        #FDD663 20%, 
        rgba(253, 214, 99, 0.4) 50%, 
        transparent 85%
    );
    opacity: 0.35;             
    z-index: 3;                
}

@keyframes rotate-gradient {
    0% { transform: translate3d(-50%, -50%, 0) rotate(0deg); }
    100% { transform: translate3d(-50%, -50%, 0) rotate(360deg); }
}

/* --- 動態光暈背景特效 End --- */

nav, footer { position: absolute; left: 0; width: 100%; padding: 2em 3em; display: flex; justify-content: space-between; align-items: center; z-index: 10; pointer-events: none; }
nav a, nav p, footer p { color: rgba(31, 31, 31, 0.7); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; pointer-events: auto; text-decoration: none; }
nav { top: 0; } 

footer { bottom: 0; justify-content: center; padding-bottom: 20px; }
footer p { font-size: 14px; opacity: 0.4; font-weight: 400; text-transform: none; }

.container { position: relative; width: 100vw; height: 100vh; overflow: hidden; perspective: 5000px; }

.gallery-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; transform-style: preserve-3d; pointer-events: none; }
.gallery { position: relative; width: 0; height: 0; transform-style: preserve-3d; }

/* CARD STYLES */
.card { 
    position: absolute; top: -30px; left: -22px; width: 45px; height: 60px; 
    background: transparent; overflow: visible; cursor: pointer; backface-visibility: visible; 
    transform-style: preserve-3d; pointer-events: auto; transition: width 0.3s, height 0.3s, top 0.3s, left 0.3s; z-index: 200; 
}

.card-inner {
    position: relative; width: 100%; height: 100%; background: transparent; border-radius: 4px; overflow: hidden;   
    border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    transition: box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.5s ease, transform 0.2s ease; /*transform: translateZ(0); will-change: transform; */
}

.card-inner.style-super-lucky { border-color: #FFD700 !important; background: rgba(255, 215, 0, 0.1); }
.card-inner.style-good-vibes { border-color: #FF9EAA !important; background: rgba(255, 158, 170, 0.1); }
.card-inner.style-gentle-reminder { border-color: #A0C4FF !important; filter: grayscale(0.5); }
.card-inner.style-shaky-chaos { border-color: #33FF00 !important; }

.card img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    opacity: 1; 

    /* 【修正 1】這裡加回 0.85，讓它一開始變暗 */
    filter: brightness(0.85); 

    transition: opacity 0.3s, filter 0.4s ease; 
    pointer-events: none; 
    
    /* 保持 visible 以獲得最佳畫質 */
    backface-visibility: visible !important; 
    image-rendering: auto; 
    
    /* --- 超級採樣設定 --- */
    
    /* 放大 10 倍 */
    width: 1000% !important;
    height: 1000% !important;
    
    /* 【修正 2】合併 transform，縮小回 0.1 並強制 GPU 運算 */
    transform: scale(0.1) translateZ(0); 
    
    /* 設定縮放基準點 */
    transform-origin: top left;
}
.card:hover .card-inner img { filter: brightness(1.0); }
.card:hover .card-inner { box-shadow: 0 8px 25px rgba(0,0,0,0.30); border-color: rgba(255, 255, 255, 0.8); }
.card.is-active .card-inner img { filter: brightness(0.85) !important; }

.card.card-selected .card-inner img { filter: brightness(0.85) !important; 
    transition: filter 0.3s ease !important; }
.card.card-selected:hover .card-inner img { filter: brightness(1.05) saturate(1.1) !important; }
.card.card-selected:hover .card-inner { border-color: rgba(255, 255, 255, 1.0) !important; }
.card.card-selected:active .card-inner { transform: scale(0.96) !important; transition: transform 0.05s ease-out !important; }
.card.card-selected:active .card-inner img { filter: brightness(1.05) saturate(1.1) !important; transition: none !important; }

.card.card-selected.is-revealed .card-inner { border-color: rgba(255, 255, 255, 1.0) !important; transform: scale(1.0) !important; background: transparent !important; }
.card.card-selected.is-revealed .card-inner img { filter: brightness(1.05) saturate(1.1) !important; }

.card.card-selected .card-inner::before {
    content: ''; position: absolute; top: 0; left: -150%; width: 100%; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-30deg); z-index: 10; pointer-events: none; animation: sharpFlash 2.5s infinite; 
}

.card-badge {
    position: absolute; bottom: -5px; right: -5px; font-size: 8px; z-index: 300;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2)); opacity: 0; transform: scale(0); pointer-events: none;
    background: rgba(255,255,255,0.95); backdrop-filter: blur(2px); width: 14px; height: 14px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.6); 
    
    display: flex; 
    justify-content: center; 
    align-items: center; 
    
    /* 【修正】增加底部內距，把 Emoji 往上頂 */
    padding: 2px 0 0 0; 
    
    /* 確保行高歸零，避免字型預設高度干擾 */
    line-height: 0; 
}

.card-inner.style-gentle-reminder { filter: saturate(0.8) brightness(0.85) !important; }
.card.card-selected:hover .card-inner.style-gentle-reminder,
.card.card-selected.is-revealed .card-inner.style-gentle-reminder { filter: saturate(0.8) brightness(1.0) !important; }

@keyframes sharpFlash {
    0% { left: -150%; opacity: 0; } 30% { opacity: 0.9; } 60% { left: 200%; opacity: 0; } 100% { left: 200%; opacity: 0; }
}

/* UI STYLES */
.intro-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 50; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding: 0 20px; }
.main-title { font-family: 'Playfair Display', serif; font-size: 3.5vw; font-weight: 400; font-style: italic; color: #1f1f1f; margin: 0; line-height: 1.2; letter-spacing: -0.02em; opacity: 0; text-shadow: 0 10px 30px rgba(0,0,0,0.1); max-width: 100%; min-height: 1.2em; pointer-events: none; }

.start-btn {
    margin-top: 2rem; padding: 10px 36px; background: rgba(255, 255, 255, 0.4); border: 1px solid rgba(31, 31, 31, 0.3); 
    color: #1f1f1f; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; text-transform: uppercase; 
    letter-spacing: 0.15em; cursor: pointer; opacity: 0; position: relative; overflow: hidden; border-radius: 50px; 
     pointer-events: auto; /*box-shadow: 0 4px 0 rgba(31, 31, 31, 0.1);*/ transition: all 0.25s ease; backdrop-filter: blur(5px); 
}
.start-btn:hover { background: #1f1f1f; color: #fff; transform: translateY(-2px); box-shadow: 0 6px 10px rgba(0, 0, 0, 0.288); }
/* 修改這段：讓按鈕按下去時「發光變白」，回饋感更強 */
.start-btn:active, .start-btn.active { 
    transform: translateY(2px) scale(0.95); /* 稍微下沉縮小 */
    background: #cfcfcf !important;         /* 背景變全白 */
    color: #000000 !important;              /* 文字變全黑 */
    border-color: #ffffff !important;       /* 邊框變白 */
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8); /* 強烈發光 */
    transition: all 0.1s ease-out;         /* 極快反應 */
}

.menu-area { position: relative; width: 100%; height: 220px; margin-top: 2rem; display: none; justify-content: center; pointer-events: none; }
.options-container { position: absolute; top: 0; width: 100%; display: flex; flex-direction: column; gap: 15px; align-items: center; opacity: 0; display: none; pointer-events: none; }
.split-container { position: absolute; top: 0; width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 40px; opacity: 0; display: none; pointer-events: none; }
.active-category-label { font-family: 'Playfair Display', serif; font-size: 2.2rem; font-style: italic; color: #1f1f1f; border-right: 1px solid rgba(31, 31, 31, 0.2); padding-right: 40px; text-transform: uppercase; letter-spacing: 0.05em; text-align: right; min-width: 150px; }
.sub-options-list { display: flex; flex-direction: column; gap: 15px; align-items: flex-start; }

.option-btn { padding: 12px 0; width: 180px; border-radius: 50px; border: 1.5px solid transparent; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; color: #1f1f1f; pointer-events: auto; text-align: center; position: relative; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08); transition: all 0.2s; }
.option-btn:hover { transform: translateY(-3px); box-shadow: 0 6px 10px rgba(0, 0, 0, 0.12); filter: brightness(1.02); }
.option-btn.active { transform: scale(0.96); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15); pointer-events: none; color: #ffffff !important; border-color: transparent !important; }

.btn-luck, .btn-luck-sub { background-color: #FFF5BA; border-color: #cec071; color: #5d5035; }
.btn-love { background-color: #FFCCD5; border-color: #e8b3bc; color: #6d3b45; }
.btn-career { background-color: #C4E3FF; border-color: #abc9e3; color: #3b506d; }
.btn-luck.active, .btn-luck-sub.active { background-color: #d4bf4e !important; color: #ffffff !important; }
.btn-love.active { background-color: #d18c9a !important; color: #ffffff !important; }
.btn-career.active { background-color: #7a9cb8 !important; color: #ffffff !important; }

.instruction-text { position: absolute; bottom: 33%; left: 50%; transform: translateX(-50%); font-family: 'Inter', sans-serif; font-size: 1.2rem; font-weight: 700; color: #a56bd8; opacity: 0; pointer-events: none; letter-spacing: 0.1em; text-transform: uppercase; z-index: 15; text-align: center; width: 100%; }

.result-layout { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; padding: 5vh 0; pointer-events: none; z-index: 100; opacity: 0; visibility: hidden; }
.res-header { margin-bottom: 2vh; text-align: center; }
.res-main-title { font-family: 'Playfair Display', serif; font-size: 3.5rem; font-weight: 400; font-style: italic; color: #1f1f1f; margin: 0; pointer-events: auto; cursor: pointer; transition: opacity 0.3s ease; transition: text-shadow 0.3s ease, opacity 0.3s ease; cursor: pointer; /* 確保滑鼠游標是手指 */}
/* LOGO 基礎設定 (確保有過渡動畫) */
.res-main-title {
    /* 加入 transition 讓發光效果是慢慢浮現，而不是閃爍 */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.res-main-title:hover {
    opacity: 1; 
    
    text-shadow: 
        /* 第一層：模擬「白邊」 (用四個方向的白色硬陰影描邊) */
        2px 2px 0px rgba(255, 255, 255, 0.5), 
        -2px -2px 0px rgba(255, 255, 255, 0.5), 
        2px -2px 0px rgba(255, 255, 255, 0.5), 
        -2px 2px 0px rgba(255, 255, 255, 0.5),
        
        /* 第二層：核心光暈 (白色柔光) */
        0 0 10px rgba(255, 255, 255, 0.7),
        
        /* 第三層：擴散光暈 (用 Google 白色，讓它在淺底上也看得到發光) */
        0 0 50px rgba(255, 255, 255, 0.8);
}
.res-nav-row { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 2vh; width: 100%; }
.nav-arrow { background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(31, 31, 31, 0.1); border-radius: 50%; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; font-family: 'Playfair Display', serif; font-size: 1.2rem; cursor: pointer; color: #1f1f1f; padding: 0; opacity: 0.7; transition: all 0.2s; pointer-events: auto; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.nav-arrow:hover { opacity: 1; transform: translateY(-2px) scale(1.1); background: #ffffff; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.nav-arrow:active { transform: translateY(0) scale(0.9); background: #f0f0f0; }
.res-category { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 600; font-style: italic; color: #1f1f1f; letter-spacing: 0.05em; }
#res-category-label::after {
    content: " ｜ ";  /* 這裡就是那條線 */
    opacity: 0.6;    /* 可選：稍微淡一點比較好看，跟原本風格一致 */
}
.res-btn-group { display: flex; gap: 15px; pointer-events: auto; } 
.res-btn-group .option-btn { width: 140px !important; padding: 8px 0 !important; font-size: 11px !important; }
.res-card-placeholder { width: 250px; height: 250px; border-radius: 50%; margin: 2vh auto; display: flex; justify-content: center; align-items: center; pointer-events: none; }
.res-text-container { width: 600px; height: auto; min-height: 150px; display: flex; align-items: center; justify-content: center; text-align: center; margin-top: 100px; opacity: 0; pointer-events: none; } 
.res-text { font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.6; color: #333; width: 100%; }
.title-container { display: none; } .word { display: inline-block; }
/* --- Fix Menu: 寬度、字體與大寫修正 --- */

/* --- Menu Fix: 去除粗體 + 文字折行 --- */

/* 1. 外框容器設定-因為menu區塊和文字跑掉 */
.menu {
    /* 定位：保持固定 */
    position: fixed !important; 
    top: 60px !important;
    right: 40px !important; 
    left: auto !important; 
    /* 建議設為固定值 (如 180px)，這樣太長就會自動換行 */
    width: 115px !important; 
    /* 恢復原本的計算方式 */
    box-sizing: content-box !important; 
    z-index: 10000 !important;
    font-family: Arial, sans-serif !important;
    /* [修正] 確保容器內的文字規則允許換行 */
    white-space: normal !important;
}
/* 2. 內部連結與文字設定 */
.menu ul li a, .menu a {
    /* [修正 1] 去除粗體：改回正常粗細 */
    font-weight: normal !important; 
    /* [修正 2] 讓文字折行 */
    /* 允許文字換行，並增加一點行高讓折行後不擁擠 */
    white-space: normal !important; 
    line-height: 1.1 !important;
    display: block !important; /* 確保它是區塊元素，換行才會生效 */
    /* 其他還原設定 (去除大寫、還原字體) */
    text-transform: none !important; 
    font-family: Arial, sans-serif !important; 
    font-size: 16px !important; 
}

@media (max-width: 768px) {
    .start-btn {
        padding: 14px 36px !important;
        font-size: 14px !important;
    }
    .main-title { font-size: 6.5vw; }
    .menu-area { height: auto; min-height: 250px; }
    /* 1. 將 .options-container (主選單) 與 .split-container (子選單) 的設定分開 */
    
    /* 主選單 (Luck/Love/Career) 維持直向堆疊 */
    .options-container { 
        position: relative; 
        flex-direction: column; 
        gap: 20px; 
    }

    /* [關鍵修改] 子選單容器：改成 "row" (左右排列)，跟 PC 一樣 */
    .split-container { 
        position: relative; 
        flex-direction: row;       /* <--- 改回 row */
        gap: 20px; 
        align-items: center;       /* 垂直置中 */
        justify-content: center;   /* 水平置中 */
        top: -40px;
    }

    /* [關鍵修改] 左邊的分類標籤 (例如 LUCK | ) */
    /* 改回 PC 樣式：右邊有線、下方無線、文字靠右 */
    .active-category-label { 
        border-right: 1px solid rgba(31, 31, 31, 0.2); /* 加回右邊分隔線 */
        border-bottom: none;                           /* 移除下方分隔線 */
        padding-right: 25px;                           /* 右邊留白 */
        padding-bottom: 0;                             /* 移除下方留白 */
        text-align: right;                             /* 文字靠右對齊分隔線 */
        min-width: auto; 
    }

    /* 右邊的按鈕群組：靠左對齊分隔線 */
    .sub-options-list { 
        align-items: flex-start; /* 改回靠左 */
    }
    .res-nav-row { 
        display: flex !important;
        flex-direction: row !important; /* 水平排列 */
        flex-wrap: nowrap !important;   /* 強制不換行 (一條線) */
        align-items: center !important; /* 垂直置中 */
        justify-content: center !important; /* 整體居中 (跟電腦版一樣) */
        width: 100%;
        padding: 0 5px;       /* 左右留一點點邊距 */
        margin-bottom: 15px;
        gap: 6px;             /* 電腦版 Gap 很大，手機版改小 */
    }

    /* 1. 左右箭頭：重置順序，跟隨 HTML 原始流 */
    .nav-arrow { 
        order: unset !important;  /* [關鍵] 拿掉手機版的順序重排 */
        width: 28px !important;   /* 尺寸縮小 */
        height: 28px !important;
        font-size: 14px !important;
        flex-shrink: 0 !important; /* 禁止被壓縮 */
        margin: 0 10px !important;
    }

    /* 確保箭頭沒有被之前的設定影響位置 */
    #prev-cat-btn, #next-cat-btn {
        position: static !important; /* 拿掉 relative/absolute */
    }

    /* 2. 中間標題 (LUCK | )：跟在左箭頭後面 */
    .res-category { 
        order: unset !important; /* [關鍵] 拿掉順序重排 */
        width: auto !important;  /* 自動寬度 */
        font-size: 18px !important; 
        white-space: nowrap; 
        margin: 0 !important;    /* 緊貼前後元件 */
        flex-shrink: 0;          /* 不要被壓扁 */
        text-align: right;       /* 文字靠右 (靠近分隔線) */
        padding-right: 4px;      /* 與按鈕保持距離 */
    } 

    /* 3. 按鈕群組：跟在標題後面 */
    .res-btn-group { 
        order: unset !important; /* [關鍵] 拿掉順序重排 */
        display: flex;
        flex-wrap: nowrap !important;
        gap: 8px;                /* 按鈕之間的間距 */
        flex: 0 1 auto;          /* 允許縮小，但盡量保持內容寬度 */
        justify-content: center;
        margin: 0 !important;
        min-width: 0;            /* 關鍵：防止內容溢出 */
    }

    /* 4. 按鈕本體：縮小版 (為了塞進同一行) */
    .res-btn-group .option-btn {
        width: auto !important;        /* [關鍵] 覆蓋電腦版的固定寬度 */
        padding: 4px 20px !important;   /* 內距縮小 */
        font-size: 11px !important;    /* 字體縮小 */
        height: 28px !important;       /* 高度跟箭頭一致 */
        line-height: 1 !important;
        
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        
        flex: 0 0 auto !important;     /* 不要自動變寬，依照文字長度 */
        white-space: nowrap !important;
        margin: 0 !important;
    }

    /* 調整下方文字容器，避免被按鈕擋住 */
    .res-text-container { 
        width: 100%; 
        padding: 20px; 
        margin-top: 85px !important; /* 確保與按鈕有距離 */
    } 

    .res-card-placeholder { 
        width: 180px; 
        height: 180px; 
    }
}
@media (max-width: 430px) {
    /* 1. 基礎容器設定 */
    .container { height: 90vh; }
    nav, footer { padding: 1.5em; } 
    .main-title { font-size: 2.5rem; } 
    .card { width: 30px; height: 40px; top: -20px; left: -15px; } 
    .res-main-title { font-size: 2.5rem; }
    
    /* 2. UI 元件位置調整 */
    .intro-overlay { 
        width: 100%; 
        height: auto;
        top: 58%;
    }
    .start-btn { 
        margin-top: 1.5rem;
        margin-bottom: 120px;
        margin-left: auto; margin-right: auto;
        display: block;
    }
    .menu-area { 
        width: 100%; height: 180px; margin-top: 1rem; 
    }
    .options-container { gap: 10px; }
    .split-container { top: -75px; gap: 10px; }
    .active-category-label { font-size: 1.1rem; padding-right: 10px; }
    .sub-options-list { gap: 6px; }
    .option-btn { width: 130px; height: 34px !important; padding: 8px 0; font-size: 10px; }
    .instruction-text { font-size: 0.8rem; top: auto !important; bottom: 38% !important; }

    /* 3. 結果頁導航列 (雙層佈局) */
    .res-nav-row { 
        display: flex !important;
        flex-wrap: wrap !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100%;
        gap: 0 !important;
        margin-bottom: 15px !important; /* [修改] 這裡也統一改成 15px (原本 20px) */
        flex-shrink: 0 !important;
        scale: 0.95;
    }
    .nav-arrow { 
        order: 1 !important; width: 32px !important; height: 32px !important; font-size: 16px !important; margin: 0 !important; flex-shrink: 0 !important;
    }
    .nav-arrow:last-of-type { order: 3 !important; }
    .res-category { 
        order: 2 !important; width: auto !important; font-size: 20px !important; border: none !important; padding: 0 15px !important; margin: 0 !important;
    } 
    #res-category-label::after {
        content: "";     /* 清空內容 */
        display: none;   /* 不顯示 */
    }
    .res-btn-group { 
        order: 4 !important; flex-basis: 100% !important; width: 100% !important; display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 8px !important; margin-top: 5px !important;
    }
    .res-btn-group .option-btn {
        width: auto !important; min-width: 80px; padding: 6px 10px !important; font-size: 12px !important; height: auto !important; margin: 0 !important;
    }

    /* 4. 結果頁佈局優化 */
    .result-layout {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        padding-top: 10px !important;
        padding-bottom: 20px !important;
        height: 100vh !important;
    }
    .res-header {
        flex-shrink: 0 !important; margin-bottom: 0 !important;
    }

    /* 圓形圖案 (彈性大小) */
    .res-card-placeholder {
        width: 180px !important; height: 180px !important;
        max-height: 25vh !important; max-width: 25vh !important;
        margin: 5px auto !important;
        flex-shrink: 1 !important;
    }

    /* [關鍵] 文字區域與間距設定 */
    .res-text-container {
        flex-grow: 1 !important;
        height: auto !important;
        margin-top: 0 !important;
        width: 97%;
        
        /* [調整] 上方 Padding 減少 (62px -> 40px)，避免看起來空太久 */
        padding: 10px 10px 40px 10px !important; 
        
        overflow-y: auto !important;
        display: flex !important;
        align-items: flex-start !important;
        flex-direction: column !important; /* 確保文字垂直排列 */
    }
    
        /* 2. 強制調低「文字與文字間」的高度 */
        /* 使用更強的選擇器，針對該容器底下的 "所有" p 標籤與 .res-text */
        .res-text-container > *, 
        .res-text-container p, 
        .res-text,
        div.res-text {
            /* 強制覆蓋 JS 的 25px 設定 */
            margin-top: 0 !important;
            line-height: 0.6 !important;
        }

        /* 確保最後一段不要有留白 */
        .res-text-container > :last-child,
        .res-text-container p:last-child {
            margin-bottom: 0 !important;
        }
        .res-level-stars {
        /* 原本 JS 寫死 20px，這裡用 !important 強制覆蓋為 10px 0 10px */
        margin: 10px 0 10px !important; 
        }
        .card-badge {
        padding: 0 2px !important; /* 上下 0 (不壓)，左右 2px */
        padding-top: 0 !important; /* 強制歸零上方的推擠 */
    }
}
@media (max-width: 360px) {
    .container { height: 95vh !important; }
    .intro-overlay { 
        width: 100%; 
        height: auto;
        top: 59% !important;
    }
    .instruction-text { bottom: 37% !important; }
    .option-btn { width: 110px !important; height: 32px !important; }
}
/* --- Desktop Restore: 還原舊版電腦尺寸 --- */
@media (min-width: 1024px) {
    
    /* 1. 還原標題大小 (舊檔案第 172 行: 3.5vw) */
    .main-title { 
        font-size: 5vw !important; 
    }

    /* 2. 還原按鈕大小 (舊檔案第 190 行: 寬180px, 字13px) */
    .option-btn {
        width: 180px !important;
        font-size: 13px !important;
        padding: 12px 0 !important;
    }

    /* 3. 還原開始按鈕 (舊檔案第 175 行) */
    .start-btn {
        padding: 14px 36px !important;
        font-size: 14px !important;
    }

    /* 4. 還原紙牌大小 (舊檔案第 48 行: 45x60) */
    /* 如果您覺得這個還是太小，可以把 45改70, 60改100 */
    .card {
        width: 54px !important;
        height: 70px !important;
        
        /* 【關鍵】修正中心點：數值是寬高的一半 (負數) */
        top: -35px !important;    /* 70的一半 */
        left: -27px !important; /* 54的一半 */
    }
}
@media (min-width: 1280px) {
    .main-title { 
        font-size: 3.5vw !important; 
    }
}
/* 僅針對 1024px 到 1699px 寬度的螢幕進行微調 */
@media (min-width: 1024px) and (max-width: 1699px) {
    /* 1. 強制將答案文字容器往上拉 */
    .res-text-container {
        margin-top: 15px !important;  /* 原本是 100px，縮小間距讓文字上提 */
        padding-top: 0 !important;
        min-height: 120px !important; /* 稍微縮小最小高度限制 */
    }

    /* 2. 稍微縮小文字內容的間距，讓整體更緊湊 */
    .res-text div[style*="margin-bottom: 20px"] {
        margin-bottom: 10px !important; /* 縮小星星與標題間的距離 */
    }
    
    .res-text div[style*="margin-bottom: 15px"] {
        margin-bottom: 8px !important;  /* 縮小內文與底部標籤間的距離 */
    }

    /* 3. 確保底部 Emoji 標籤不會太佔空間 */
    .res-text div[style*="padding-top: 20px"] {
        padding-top: 10px !important;
    }
}
/* --- 針對提示文字 "CHOOSE A MODE TO START!" 的位置優化 --- */

/* 1. 針對 1920px (及 1700px 以上) 大螢幕：將文字往下移 */
@media (min-width: 1700px) {
    /* 強制覆蓋 JS 寫死的 100px，增加間距讓它往下走 */
    .res-text div[style*="margin-top:100px"] {
        margin-top: 150px !important; 
    }
}

/* 2. 針對 430px 以下手機螢幕：將文字往上提 */
@media (max-width: 430px) {
    /* 縮小間距，避免文字被推到螢幕底部 */
    .res-text div[style*="margin-top:100px"] {
        margin-top: 0 !important; 
    }
    
    /* 確保容器本身沒有額外的頂部間距 */
    .res-text-container {
        margin-top: 0 !important;
    }
}

/* 3. 針對您上次提到的 1024~1600 中型螢幕 (保持之前的修正) */
@media (min-width: 1024px) and (max-width: 1699px) {
    .res-text div[style*="margin-top:100px"] {
        margin-top: 40px !important; 
    }
}