/*
Theme Name: 一番賞客製化主題
Template: twentytwentyfour
Description: 一番賞專用子主題 (V60 - CSS分離與日曆修復版)
*/

/* ==========================================================================
   1. 基礎設定
   ========================================================================== */
   @import url('https://fonts.googleapis.com/css2?family=DotGothic16&family=Noto+Sans+TC:wght@500;700;900&display=swap');

   :root {
       --hype-red: #e60012; --hype-black: #222; --hype-white: #fff; --hype-blue: #0055ff; --hype-yellow: #ffcc00;
       --btn-shadow: #8b0000; --border-thick: 3px solid var(--hype-black);
   }
   
   body {
       font-family: 'Noto Sans TC', sans-serif !important;
       background-color: #f5f5f5 !important;
       color: #333 !important;
       letter-spacing: 0.5px;
       padding-bottom: 180px !important;
       overflow-x: hidden;
       background-image: radial-gradient(var(--hype-black) 0.5px, transparent 0.5px);
       background-size: 10px 10px;
   }
   
   h1, h2, h3, h4, h5, h6 { font-family: 'DotGothic16', sans-serif !important; color: #000 ; font-weight: 900 !important; text-transform: uppercase; margin-bottom: 15px !important; }
   a { color: var(--hype-blue); text-decoration: none; font-weight: 900; }
   

   
   /* =========================================
      2. 📺 跑馬燈
      ========================================= */
   .ticker-wrap {
       display: block !important; width: 100%; height: 40px; line-height: 40px; overflow: hidden;
       background: #222 !important; border-bottom: 3px solid #000 !important; white-space: nowrap; position: relative; z-index: 10; margin-top: 0 !important;
   }
   .ticker { display: inline-block; padding-left: 100%; animation: ticker-scroll 45s linear infinite; }
   .ticker-item { display: inline-block; padding: 0 30px; font-size: 14px; color: #fff; font-family: 'DotGothic16'; vertical-align: middle; }
   .ticker-item .highlight { color: #f1c40f; font-weight: bold; }
   @keyframes ticker-scroll { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-100%, 0, 0); } }
   
   /* =========================================
      3. 📦 一番賞介面
      ========================================= */
   .kuji-wrapper, .prize-stats-table, .fairness-box {
       background: #fff !important; border: 2px solid #ddd !important; border-radius: 10px !important;
       box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important; margin-bottom: 20px !important; padding: 15px !important;
       width: 100% !important; box-sizing: border-box;
   }
   
   .kuji-wrapper { background: #2b2b2b !important; border-color: #000 !important; color: #fff; }
   
   .kuji-header-enhanced { background: #222; border: 1px solid #444; padding: 15px; border-radius: 8px; margin-bottom: 20px; }
   .kuji-info-row { display:flex; justify-content:space-between; font-weight:bold; margin-bottom:5px; color: #fff; font-size: 14px; }
   .kuji-progress-bg { background: #444 !important; height: 8px; border-radius: 10px; overflow: hidden; border: none; }
   .kuji-progress-fill { height: 100%; background: linear-gradient(90deg, #ffd700, #f1c40f); }
   
   /* 配率表 */
   .prize-stats-table { display: flex; flex-wrap: wrap; gap: 0 !important; padding: 0 !important; border: 1px solid #ddd !important; overflow: hidden; }
   .prize-stat-item { border-bottom: 1px solid #eee !important; padding: 8px 12px !important; font-size: 13px; color: #555 !important; flex: 1 1 100%; display: flex; justify-content: space-between; background: #fff; }
   @media (min-width: 768px) { .prize-stat-item { flex: 1 1 48%; border-right: 1px solid #eee; } }
   
   /* 最後賞 */
   .last-one-box {
       background-color: var(--hype-yellow) !important; border: 3px solid #000 !important; border-radius: 0 !important;
       padding: 20px !important; margin-bottom: 30px !important;
       background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0,0,0,0.05) 10px, rgba(0,0,0,0.05) 20px) !important;
       box-shadow: 4px 4px 0px #fff, 8px 8px 0px rgba(0,0,0,0.2) !important;
       display: flex; align-items: ㄅ; position: relative; 
       /* transform: translateY(-2px);*/
   }
   .last-one-img { width: 70px; height: 70px; object-fit: cover; border: 3px solid #000 !important; margin-right: 15px; background: #fff; }
   .last-one-title { font-size: 1.4rem; font-weight: 900; color: #000; border-bottom: 3px solid #000; margin-bottom: 5px; display: inline-block; text-shadow: 2px 2px 0px #fff; }
   
   /* =========================================
      4. 🔴 選號盤
      ========================================= */
   .kuji-grid { display: grid !important; width: 100% !important; gap: 8px !important; padding: 5px !important; justify-content: center !important; box-sizing: border-box; }
   @media (min-width: 769px) { .kuji-grid { grid-template-columns: repeat(10, 1fr); } .kuji-wrapper { max-width: 800px; margin: 0 auto; } }
   @media (max-width: 768px) { .kuji-grid { grid-template-columns: repeat(8, 1fr) !important; gap: 6px !important; } .kuji-wrapper { margin-left: -15px; margin-right: -15px; border-radius: 0; padding-bottom: 100px !important; width: 100vw !important; overflow-x: hidden; } }
   
   .kuji-btn {
       width: 100%; aspect-ratio: 1 / 1; border-radius: 50%;
       background: linear-gradient(145deg, #ff5f5f, #d32f2f); border: 1px solid #b71c1c;
       color: #fff; font-family: 'DotGothic16'; font-size: 12px; font-weight: bold;
       box-shadow: 0 3px 0 #8b0000, 0 4px 5px rgba(0,0,0,0.3);
       display: flex; justify-content: center; align-items: center; cursor: pointer;
   }
   .kuji-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #8b0000; }
   .kuji-btn.selected { background: #ffca28; border-color: #ff6f00; color: #000; box-shadow: 0 0 10px #ffca28; transform: scale(1.1); z-index: 5; }
   .kuji-btn.sold { background: #444; border-color: #222; opacity: 0.6; cursor: not-allowed; }
   .kuji-btn.sold::after { content: '✕'; font-size: 20px; color: rgba(255,255,255,0.2); position: absolute; }
   
   @media (max-width: 768px) { 
    .kuji-grid { 
        grid-template-columns: repeat(8, 1fr) !important; 
        gap: 6px !important; 
    } 
    
    .kuji-wrapper { 
        /* ★ 關鍵修正：使用絕對置中法，解決靠右偏移問題 ★ */
        width: 100vw !important;
        max-width: 100vw !important;
        
        position: relative !important;
        left: 50% !important;
        right: 50% !important;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
        
        border-radius: 0; 
        padding: 15px !important; /* 增加內部留白，讓內容不要貼邊 */
        padding-bottom: 100px !important; 
        box-sizing: border-box !important;
        overflow-x: hidden; 
    } 
}
   /* =========================================
      5. 🎛️ 底部控制面板
      ========================================= */
   .kuji-command-center {
       position: fixed !important; bottom: 0 !important; left: 0 !important; width: 100% !important;
       background: #fff !important; border-top: 1px solid #ddd !important; padding: 10px 15px 20px 15px !important;
       z-index: 99999 !important; box-shadow: 0 -5px 20px rgba(0,0,0,0.1) !important; box-sizing: border-box;
       display: flex; flex-direction: column; gap: 8px;
   }
   /* =========================================
   底部餘額條優化 (深色模式)
   ========================================= */
    .balance-display-bar {
        text-align: center;
        background: #222 !important; /* 深色背景 */
        padding: 8px;
        border-radius: 6px;
        border: 1px solid #444 !important; /* 深色邊框 */
        font-size: 14px;
        font-weight: bold;
        color: #ffd700 !important; /* 金色文字 */
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: inset 0 2px 5px rgba(0,0,0,0.5); /* 內陰影更有質感 */
    }

    /* 數字樣式 */
    .balance-amount {
        color: #f7ee48 !important; /* 數字改白色，對比更清楚 */
        font-family: 'DotGothic16';
        font-size: 1.3em;
        margin-left: 5px;
        text-shadow: 0 0 5px rgba(255,255,255,0.5);
    }
   .balance-amount { color: #e60012; font-family: 'DotGothic16'; font-size: 1.2em; margin-left: 5px; }
   .selection-panel { display: none; justify-content: space-between; align-items: center; margin-bottom: 5px; font-size: 14px; }
   .selection-panel.active { display: flex !important; }
   .confirm-btn { width: 100%; background: var(--hype-red); color: #fff; border: none; padding: 10px; border-radius: 50px; font-weight: bold; font-size: 16px; }
   .batch-panel > div { display: flex; gap: 8px; width: 100%; }
   .batch-btn { flex: 1; background: #fff; color: #333; border: 1px solid #ccc; padding: 10px 0; border-radius: 8px; font-weight: bold; font-size: 13px; box-shadow: 0 2px 0 #eee; }
   .batch-btn.full-set { background: var(--hype-yellow); border-color: #fbc02d; color: #000; }
   
   /* =========================================
      6. 🚑 彈窗系統
      ========================================= */
   #kuji-result-modal, #tear-ticket-modal, #daily-bonus-modal {
       display: none; position: fixed !important; top: 0; left: 0; width: 100vw; height: 100vh;
       z-index: 2147483647 !important; background: rgba(0, 0, 0, 0.9) !important; backdrop-filter: blur(5px);
       flex-direction: column !important; justify-content: center !important; align-items: center !important;
   }
   #kuji-result-modal.active, #tear-ticket-modal.active, #daily-bonus-modal.active { display: flex !important; }
   
   .modal-content, .modal-content-visual {
       position: relative; width: 90%; max-width: 400px; max-height: 85vh; overflow-y: auto;
       background: #fff; border: 4px solid #ffd700; border-radius: 12px;
       box-shadow: 0 20px 50px rgba(0,0,0,0.8); padding: 30px 20px; text-align: center;
   }
   .modal-content-visual { background: #1a1a1a; color: #fff; }
   
   .close-modal-btn { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; background: #333; color: #fff; border: 2px solid #fff; border-radius: 50%; font-size: 20px; font-weight: bold; display: flex; justify-content: center; align-items: center; cursor: pointer; z-index: 20; }
   
/* =========================================
   9. 🎫 撕籤互動樣式 (修復露餡問題版)
   ========================================= */
   .ticket-container {
    position: relative; width: 320px; height: 160px; background: #fff; border-radius: 8px; overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8); transform: scale(0.5); opacity: 0; transition: all 0.3s;
    /* 確保子元素絕對不會超出圓角 */
    -webkit-mask-image: -webkit-radial-gradient(white, black); 
}
#tear-ticket-modal.active .ticket-container { transform: scale(1); opacity: 1; }

/* 瞇牌底層 (保持不變) */
.ticket-content-layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    z-index: 1; color: #fff; background: #222; 
    font-size: 5rem; font-weight: 900; font-family: 'DotGothic16';
    text-shadow: 2px 2px 0 rgba(0,0,0,0.5);
}

/* 封面層 (★ 修改重點 ★) */
.ticket-cover-layer {
    position: absolute; 
    /* 稍微放大 1px 並往回拉，確保完美覆蓋圓角邊緣，防止溢光 */
    top: -1px; left: -1px; 
    width: calc(100% + 2px); 
    height: calc(100% + 2px);
    
    background: linear-gradient(90deg, #2d3436, #000);
    color: #fff; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center;
    z-index: 2; 
    cursor: grab; 
    
    /* ★ 關鍵：移除這裡的 border-right，因為虛線縫隙會透光 */
    border-right: none !important; 

    will-change: transform; /* ★ 新增：開啟 GPU 硬體加速 */
    transform: translate3d(0, 0, 0); /* ★ 新增：強制啟用 3D 模式 */
}

/* ★ 新增：用偽元素畫虛線，這樣虛線底下依然是黑色背景 ★ */
.ticket-cover-layer::after {
    content: '';
    position: absolute;
    top: 0;
    right: 2px; /* 調整虛線位置 */
    width: 0;
    height: 100%;
    border-right: 3px dashed #555; /* 虛線移到這裡 */
    z-index: 3;
    pointer-events: none; /* 讓點擊穿透，不影響拖曳 */
}

/* 提示文字動畫 (保持不變) */
.tear-hint { font-size: 1.4rem; font-weight: 900; letter-spacing: 2px; animation: slideHint 1.5s infinite; pointer-events: none; font-family: 'DotGothic16'; }
.tear-arrow { 
    font-size: 2rem; 
    transform: rotate(90deg) !important; /* ★ 改成 90度，箭頭就會指向左邊 */
    display: inline-block; 
    margin-top: 5px; 
    color: #ffd700; /* 建議：加個金色讓箭頭更明顯 */
}
@keyframes slideHint { 0%, 100% { transform: translateX(0); opacity: 0.5; } 50% { transform: translateX(-10px); opacity: 1; } }

/* 撕開動畫 (保持不變) */
.ticket-container.ripped .ticket-cover-layer { transition: transform 0.4s ease-out; transform: translateX(-150%); }   
   /* =========================================
      10. 🔴 列表按鈕優化 (滿版紅色)
      ========================================= */
   .kuji-red-btn, 
   .add_to_cart_button.kuji-red-btn { 
       background-color: #e60012 !important; /* 紅色背景 */
       color: #ffffff !important; /* 白色文字 */
       border-radius: 50px !important; /* 圓角設定 */
       border: none !important; /* 移除邊框 */
       font-weight: bold !important; /* 粗體 */
       transition: background-color 0.3s !important;
       
       /* 滿版設定 */
       width: 100% !important;       /* 寬度佔滿 */
       display: block !important;    /* 區塊顯示 */
       text-align: center !important;/* 文字置中 */
       padding: 10px 0 !important;   /* 上下撐開高度 */
       margin-top: 5px !important;   /* 上方留白 */
       box-sizing: border-box !important;
   }
   
   .kuji-red-btn:hover,
   .add_to_cart_button.kuji-red-btn:hover {
       background-color: #c7000f !important; /* 深紅色 */
       color: #ffffff !important;
       text-decoration: none !important;
   }

   /* =========================================
      11. 📅 簽到日曆樣式 (網格修復)
      ========================================= */
    .kuji-calendar-box {
        background: #ffffff;
        padding: 15px;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        margin: 20px auto;
        max-width: 100%;
        border: 1px solid #f0f0f0;
    }

    .calendar-title {
        text-align: center;
        font-weight: 900;
        margin-bottom: 15px;
        font-size: 1.1rem;
        color: #333;
        border-bottom: 2px solid #ffd700;
        display: inline-block;
        padding-bottom: 5px;
    }

    /* ★ 關鍵：讓它變橫向網格的設定 ★ */
    .calendar-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr); /* 強制切成 7 等份 */
        gap: 6px; /* 格子之間的距離 */
        text-align: center;
    }

    .cal-head {
        font-size: 0.85rem;
        color: #888;
        margin-bottom: 5px;
        font-weight: bold;
    }

    .cal-day {
        aspect-ratio: 1 / 1; /* 保持正方形 */
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f8f9fa;
        border-radius: 8px; /* 圓角方塊 */
        font-size: 0.9rem;
        color: #ccc;
        transition: all 0.2s;
    }

    .cal-empty { aspect-ratio: 1 / 1; }

    /* 已簽到 (打勾) */
    .cal-day.checked {
        background: #ffd700; /* 金色背景 */
        color: #2d3436;
        font-weight: bold;
        box-shadow: 0 2px 5px rgba(255, 215, 0, 0.3);
        transform: scale(1.05);
    }

    /* 今天的日期 */
    .cal-day.today {
        border: 2px solid #e60012; /* 紅色外框 */
        color: #e60012;
    }

    .calendar-footer {
        text-align: right;
        margin-top: 15px;
        font-size: 0.9rem;
        color: #666;
        border-top: 1px dashed #eee;
        padding-top: 10px;
    }

   /* =========================================
      雜項
      ========================================= */
   .fairness-box { margin-top: 30px; position: relative; z-index: 1; word-wrap: break-word; color: #aaa; }
   .hash-code, .seed-code { width: 100%; word-break: break-all; background: #000; color: #0f0; padding: 8px; border-radius: 4px; }
   #sticky-cta-bar, #kuji-bottom-nav, .selection-info, .single_add_to_cart_button, .related.products { display: none !important; }
   .woocommerce ul.products li.product { background: #fff !important; border: 1px solid #eee !important; border-radius: 8px !important; box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important; padding: 10px !important; }
   .price { color: #e60012 !important; font-weight: 900; font-size: 1.1em !important; background: none; border: none; }
   button { background-color: #e60012 !important; border-radius: 50px !important; border: none !important; box-shadow: 0 4px 10px rgba(230,0,18,0.3) !important; }

   /* =========================================
   12. 🎒 戰利品區 (收藏) 樣式優化
   ========================================= */
/* 戰利品網格排列 */
.collection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); /* 自動調整欄數 */
    gap: 15px;
    padding: 10px;
}

/* 單個戰利品卡片 */
.collection-item {
    /* PHP 中已有定義 background:#fff 和 border */
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* 滑鼠移過去的效果 */
.collection-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    border-color: var(--hype-red) !important;
}

/* 選中時的效果 */
.item-checkbox:checked + .item-ticket::before {
    content: '✅';
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 1.2rem;
}

/* ★ 關鍵修改：票號顏色 (#36) ★ */
.item-ticket {
    font-family: 'DotGothic16', sans-serif;
    color: #555555 !important; /* 改為深灰色，清楚易讀 */
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 5px;
    text-align: left;
}

/* 賞別字母 (A, B, C...) - 維持原本 PHP 輸出的彩色設定，但增加陰影提升對比 */
.item-rank {
    text-shadow: 1px 1px 0px #000; /* 增加一點黑色邊框感 */
    margin: 10px 0;
}

/* 下方資訊區塊 */
.item-info {
    border-top: 2px solid #eee !important; /* 改淡分隔線顏色 */
    padding-top: 10px !important;
}

/* ★ 關鍵修改：獎品名稱顏色 (C賞 獎品名稱) ★ */
.item-name {
    color: #000000 !important; /* 改為純黑色 */
    font-weight: 900; /* 加粗 */
    font-size: 1.1rem;
    line-height: 1.4;
}

/* 出貨按鈕列優化 */
.ship-bar {
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(5px);
}



/* =========================================
   14. 🔥 剩餘張數告急樣式 (視覺焦慮優化 - 字體加強版)
   ========================================= */

/* 列表頁的小型進度條容器 */
.loop-progress-box {
    margin: 8px 0 12px 0; /* 加大上下間距，不要跟價格擠在一起 */
    width: 100%;
}

/* 進度文字與數字 */
.loop-progress-text {
    font-size: 13px !important; /* ★ 放大字體 (原本11px) */
    display: flex;
    justify-content: space-between;
    align-items: center; /* 垂直置中 */
    margin-bottom: 5px;
    font-weight: bold;
    font-family: 'Noto Sans TC', sans-serif;
    line-height: 1.2;
}

/* 左邊的「進度」標籤 */
.loop-progress-text span:first-child {
    font-size: 11px;
    color: #888;
    background: #f0f0f0;
    padding: 2px 6px;
    border-radius: 4px;
}

/* 右邊的數字與告急文字 */
.loop-progress-text span:last-child {
    font-size: 14px; /* ★ 數字再大一點 */
    letter-spacing: 0.5px;
}

/* 進度條背景 */
.loop-progress-bg {
    background: #e0e0e0; /* 背景深一點，對比比較好 */
    height: 10px !important; /* ★ 加粗進度條 (原本6px) */
    border-radius: 6px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); /* 加一點內陰影更有質感 */
}

/* 進度條本體 */
.loop-progress-fill {
    height: 100%;
    background: #ffd700;
    border-radius: 6px;
    transition: width 0.5s ease;
}

/* 狀態 1: 警戒 (剩餘 < 50%) - 橘色 */
.loop-progress-fill.warning {
    background: linear-gradient(90deg, #f39c12, #e67e22) !important;
}

/* 狀態 2: 告急 (剩餘 < 20%) - 紅色 + 呼吸燈特效 */
.loop-progress-fill.critical {
    background: linear-gradient(90deg, #ff4d4d, #c0392b) !important; 
    background-size: 200% 200%;
    animation: gradientMove 1.5s ease infinite; /* 加快流動速度 */
    box-shadow: 0 0 8px rgba(231, 76, 60, 0.6); /* 發光效果 */
}

/* 告急文字的動畫定義 (讓文字真的會閃) */
@keyframes flashText {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0.7; transform: scale(0.95); }
}


/* 戰利品按鈕群組優化 */
@media (max-width: 480px) {
    .ship-bar {
        flex-direction: column;
        gap: 10px;
        align-items: stretch !important;
    }
    .ship-bar > div:last-child {
        justify-content: space-between;
    }
    .ship-btn {
        flex: 1; /* 按鈕平均分配寬度 */
        text-align: center;
        padding: 10px 0 !important;
    }
    #select-all-btn {
        width: 60px; /* 全選按鈕小一點 */
    }
}

/* =========================================
   15. 🚫 完售與缺貨視覺優化
   ========================================= */

/* --- A. 配率表 (Prize Stats) --- */
.prize-stat-item.sold-out {
    position: relative;
    background-color: #f5f5f5 !important; /* 背景變灰 */
    overflow: hidden; /* 防止印章超出 */
}

/* 文字變灰 + 刪除線 */
.prize-stat-item.sold-out span {
    color: #bbb !important;
    text-decoration: line-through;
    font-weight: normal !important;
}

/* 蓋上紅色的 SOLD OUT 印章 */
.prize-stat-item.sold-out::after {
    content: 'SOLD OUT';
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%) rotate(-10deg); /* 稍微傾斜 */
    
    border: 3px double #e60012; /* 雙線邊框更有印章感 */
    color: #e60012;
    background: rgba(255, 255, 255, 0.8);
    font-family: 'DotGothic16', sans-serif;
    font-size: 16px;
    font-weight: 900;
    padding: 2px 10px;
    border-radius: 4px;
    opacity: 0.9;
    z-index: 2;
    pointer-events: none; /* 讓滑鼠可以穿透 */
    white-space: nowrap;
    text-shadow: none !important;
    text-decoration: none !important; /* 印章文字本身不要刪除線 */
}

/* --- B. 選號格 (Grid) --- */
.kuji-btn.sold {
    background: #2d2d2d !important; /* 深灰色背景 */
    border: 1px solid #444 !important;
    color: #ff4d4d !important; /* 紅色的叉叉 */
    font-size: 18px !important;
    opacity: 0.8 !important;
    cursor: not-allowed;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5) !important; /* 凹陷感 */
    transform: scale(0.95); /* 稍微縮小一點 */
}

/* 移除原本 CSS 可能有的 ::after 偽元素干擾 */
.kuji-btn.sold::after {
    display: none !important; 
}

/* =========================================
   16. 🌑 完售視覺特效 (純印章版 - 不變灰)
   ========================================= */

/* 1. 完售卡片容器設定 */
.kuji-item-sold-out {
    position: relative !important;
    overflow: visible !important;
    z-index: 1;
}

/* 2. 紅色完售印章 */
.kuji-item-sold-out::after {
    content: "\5B8C  \552E"; /* 完 售 */
    position: absolute;
    
    /* 印章位置：距離頂部 15%，水平置中 */
    top: 30%; 
    left: 50%;
    transform: translate(-50%, 0) rotate(-15deg) !important;
    
    z-index: 999 !important; /* 確保蓋在圖片上面 */
    
    /* 印章外觀 */
    border: 3px solid #fff;
    background-color: #e60012; /* 紅色 */
    color: #fff;
    font-size: 22px;
    font-weight: 900;
    font-family: sans-serif;
    padding: 8px 25px;
    letter-spacing: 5px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5); /* 陰影讓它浮起來 */
    pointer-events: none; /* 讓滑鼠穿透 */
    white-space: nowrap;
    text-align: center;
}

/* 3. 防止印章跑到相關商品上 (雙重保險) */
.related.products .product::after,
.upsells.products .product::after,
section.related .product::after {
    display: none !important;
    content: none !important;
}

/* 4. 讓按鈕和進度條變淡 (但圖片保持彩色) */
.kuji-item-sold-out > .button,
.kuji-item-sold-out > .loop-progress-box,
.kuji-item-sold-out .summary .cart .button { 
    opacity: 0.3; /* 變淡 */
    filter: grayscale(100%); /* 按鈕可以變灰，比較不會想點 */
    pointer-events: none; /* 禁止點擊 */
}


/* =========================================
   18. 🕹️ 首頁教學區塊美化 (標題置中放大版)
   ========================================= */

/* 1. 外層容器 */
.arcade-screen-container {
    max-width: 900px;
    margin: 40px auto; /* 增加一點上方留白 */
    padding: 15px;     /* 邊框厚度增加 */
    background: #111;
    border: 4px solid #333;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    position: relative;
}

/* 2. 標題列 (修改重點) */
.arcade-header {
    display: flex;
    justify-content: center; /* ★ 改為置中對齊 */
    align-items: center;
    padding-bottom: 15px;    /* 增加標題與圖片的距離 */
    margin-bottom: 15px;
    border-bottom: 2px dashed #444;
}

.arcade-title {
    font-family: 'DotGothic16', sans-serif;
    color: #ffd700;
    
    /* ★ 字體放大設定 ★ */
    font-size: 28px;  /* 電腦版字體變大 */
    font-weight: 900;
    letter-spacing: 3px; /* 增加字距 */
    
    text-shadow: 3px 3px 0 #e60012; /* 陰影也加深一點 */
    text-align: center;
}

/* 3. 螢幕區域 */
.arcade-screen {
    position: relative;
    border: 2px solid #222;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
}

.tutorial-img {
    width: 100%;
    height: auto;
    display: block;
    filter: contrast(1.1) brightness(1.1);
}

/* 4. CRT 掃描線特效 */
.scanlines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0),
        rgba(255,255,255,0) 50%,
        rgba(0,0,0,0.1) 50%,
        rgba(0,0,0,0.1)
    );
    background-size: 100% 4px;
    pointer-events: none;
    z-index: 2;
    opacity: 0.6;
}

/* 手機版微調 */
@media (max-width: 768px) {
    .arcade-screen-container {
        margin: 20px 15px;
    }
    .arcade-title {
        font-size: 20px !important; /* 手機版字體大小 */
    }
}
/* =========================================
   18. 🪙 首頁快速儲值機 (3D 升級版)
   ========================================= */

/* 外殼：增加金屬漸層與多層陰影 */
.arcade-deposit-machine {
    background: linear-gradient(180deg, #3a3a3a 0%, #1a1a1a 100%); /* 金屬漸層 */
    border: none;
    border-top: 2px solid #555;
    border-bottom: 6px solid #111; /* 底部加厚像底座 */
    border-radius: 16px;
    padding: 25px;
    margin: 30px auto;
    max-width: 900px;
    box-shadow: 
        0 10px 30px rgba(0,0,0,0.6), /* 外部投影 */
        inset 0 2px 3px rgba(255,255,255,0.1), /* 頂部高光 */
        inset 0 -5px 10px rgba(0,0,0,0.5); /* 內部陰影 */
    position: relative;
    overflow: hidden;
}

/* 標題列 */
.deposit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #000;
    box-shadow: 0 1px 0 #444; /* 凹槽效果 */
    padding-bottom: 15px;
    margin-bottom: 25px;
}

.deposit-title {
    color: #ffd700;
    font-family: 'DotGothic16', sans-serif;
    font-size: 22px;
    font-weight: 900;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.4), 2px 2px 0 #000;
    letter-spacing: 1px;
}

.deposit-led {
    background: #00ff00;
    color: #000;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: bold;
    font-family: monospace;
    border-radius: 4px;
    box-shadow: 0 0 10px #00ff00, inset 0 0 5px rgba(255,255,255,0.8); /* 發光與玻璃質感 */
    animation: blink 1.5s infinite alternate;
}

@keyframes blink { 0% { opacity: 0.7; } 100% { opacity: 1; box-shadow: 0 0 15px #00ff00; } }

/* 選項網格 */
.deposit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 20px; /* 增加間距 */
}

/* 單一插槽：做成凹槽效果 */
.deposit-slot {
    background: #2b2b2b;
    border: 1px solid #000;
    border-bottom: 1px solid #444; /* 反向光影產生凹陷感 */
    border-radius: 12px;
    padding: 20px 10px;
    text-align: center;
    position: relative;
    box-shadow: inset 0 5px 10px rgba(0,0,0,0.8); /* 強烈內陰影 */
    transition: transform 0.2s;
}

.deposit-slot:hover {
    transform: translateY(-2px);
}

/* 優惠標籤：懸浮效果 */
.deposit-bonus-tag {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #f1c40f, #f39c12);
    color: #000;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 3px 5px rgba(0,0,0,0.4);
    z-index: 2;
    white-space: nowrap;
    border: 1px solid #fff;
}

/* 首儲爆擊樣式 */
.deposit-slot.critical {
    border: 1px solid #e60012;
    box-shadow: inset 0 0 15px rgba(230, 0, 18, 0.2), 0 0 10px rgba(230, 0, 18, 0.2);
}

.deposit-slot.critical .deposit-bonus-tag {
    background: linear-gradient(135deg, #ff3333, #c0392b);
    color: #fff;
    border-color: #ffd700;
    animation: pulse-tag 1s infinite alternate;
}

@keyframes pulse-tag {
    0% { transform: translateX(-50%) scale(1); }
    100% { transform: translateX(-50%) scale(1.1); }
}

/* 金額文字 */
.deposit-amount {
    color: #fff;
    font-family: 'DotGothic16', sans-serif;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 5px;
    text-shadow: 0 0 5px rgba(255,255,255,0.3);
}

.deposit-price {
    color: #888;
    font-size: 12px;
    margin-bottom: 15px;
}

/* 實體按鈕效果 */
.deposit-btn {
    display: block;
    background: linear-gradient(to bottom, #e60012, #c0392b); /* 紅色漸層 */
    color: #fff !important;
    text-decoration: none;
    padding: 10px 0;
    border-radius: 8px;
    font-weight: bold;
    font-family: 'DotGothic16';
    position: relative;
    top: 0;
    /* 3D 按鈕陰影 */
    box-shadow: 
        0 4px 0 #8b0000, 
        0 5px 10px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.3); 
    transition: all 0.1s;
}

.deposit-btn:active {
    top: 4px; /* 按下時位移 */
    box-shadow: 
        0 0 0 #8b0000, 
        inset 0 2px 5px rgba(0,0,0,0.6); /* 內部變暗 */
}
/* =========================================
   20. 🧹 結帳頁面極簡化 (隱藏多餘文字與標題)
   ===============================@media (max-width: 768px)========== */

/* 1. 隱藏「Your personal data...」那段隱私權聲明文字 */
.woocommerce-privacy-policy-text,
.woocommerce-terms-and-conditions-wrapper p {
    display: none !important;
}

/* 2. 隱藏「額外資訊」標題 (因為我們已經移除了備註欄位，這標題留著很怪) */
.woocommerce-additional-fields h3 {
    display: none !important;
}

/* 3. (選用) 確保按鈕文字是乾淨的，避免被原本的 value 干擾 */
/* 這是針對綠界按鈕文字修改不生效的備用方案 */
#place_order {
    font-size: 0 !important; /* 先把舊文字縮到不見 */
}

/* 重新寫上新的文字 */
#place_order::after {
    content: '確認付款'; /* 您想顯示的文字 */
    font-size: 18px !important;
    visibility: visible !important;
    display: block;
}
/* =========================================
   21. 💎 訂單完成頁餘額看板 (按鈕置中版)
   ========================================= */
   .kuji-thankyou-balance {
    background: #fff;
    border: 3px solid #ffd700;
    border-radius: 12px;
    padding: 30px 20px; /* 增加內距 */
    margin-bottom: 30px;
    box-shadow: 0 10px 25px rgba(255, 215, 0, 0.15);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.kuji-ty-icon {
    font-size: 40px;
    margin-bottom: 10px;
    animation: floatBadge 2s infinite ease-in-out;
}

.kuji-ty-title {
    font-size: 20px;
    font-weight: 900;
    color: #333;
    margin-bottom: 15px;
    border-bottom: 2px dashed #eee;
    padding-bottom: 15px;
}

/* ★ 新增：本次入帳金額樣式 ★ */
.kuji-ty-added {
    font-size: 18px;
    color: #2ecc71; /* 綠色代表進帳 */
    font-weight: bold;
    margin-bottom: 15px;
    background: #f0fff4;
    display: inline-block;
    padding: 5px 15px;
    border-radius: 50px;
}

.kuji-ty-label {
    font-size: 14px;
    color: #888;
    margin-bottom: 5px;
}

.kuji-ty-amount {
    font-family: 'DotGothic16', sans-serif;
    font-size: 42px;
    font-weight: 900;
    color: #e60012;
    line-height: 1;
    margin-bottom: 20px;
    text-shadow: 2px 2px 0px rgba(0,0,0,0.1);
}

.kuji-ty-amount .unit {
    font-size: 20px;
    color: #333;
    margin-left: 5px;
}

/* ★ 修改：按鈕強制置中 ★ */
.kuji-go-shop-btn {
    width: 100%;
    max-width: 300px;
    display: block !important; /* 區塊顯示 */
    margin: 20px auto 0 auto !important; /* 上右下左，左右 auto 達成置中 */
    padding: 12px 0 !important;
    font-size: 16px !important;
    box-shadow: 0 5px 15px rgba(230, 0, 18, 0.4) !important;
}

/* =========================================
   22. 結帳頁面 G 幣預覽樣式 (紅底白字刺激版)
   ========================================= */

/* 表格行標題 (左邊的字) */
.kuji-preview-row th {
    color: #e60012 !important; /* 標題改成紅色 */
    font-weight: 900;
    vertical-align: middle;
    font-size: 16px; /* 字體放大 */
}

/* 金額樣式 (右邊的數字 - 紅底白字) */
.kuji-preview-amount {
    font-family: 'DotGothic16', sans-serif;
    font-size: 20px; /* 數字超大 */
    font-weight: 900;
    
    color: #ffffff !important; /* 白色文字 */
    background: linear-gradient(135deg, #ff0000, #d00000) !important; /* 鮮紅漸層底 */
    
    padding: 8px 20px; /* 加厚 */
    border-radius: 50px; /* 圓潤膠囊狀 */
    display: inline-block;
    
    /* 增加發光陰影，更吸睛 */
    box-shadow: 0 4px 15px rgba(255, 0, 0, 0.5); 
    letter-spacing: 1px;
}

/* =========================================
   G幣圖案專用樣式
   ========================================= */

/* 通用小圖示 (用於文字旁) */
.g-coin-icon {
    width: 22px;
    height: auto;
    vertical-align: -5px; /* 微調垂直對齊，讓它跟文字置中 */
    margin-right: 4px;
    display: inline-block;
}

/* 感謝頁的大圖示 */
.kuji-ty-icon img {
    width: 80px; /* 感謝頁要大一點才霸氣 */
    height: auto;
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.6)); /* 加點金光 */
    animation: floatBadge 3s infinite ease-in-out;
}

/* 頂部選單/Shortcode 內的微調 */
span.my-balance-pill .g-coin-icon {
    width: 16px;
    vertical-align: -3px;
}

/* =========================================
   23. 📱 手機版結帳頁面優化
   ========================================= */

   @media (max-width: 480px) {
    
    /* 針對「將獲得 G 幣」這一行做特殊處理 */
    .kuji-preview-row th,
    .kuji-preview-row td {
        display: block !important; /* 強制分行顯示 */
        width: 100% !important;
        text-align: center !important; /* 置中對齊 */
        padding: 10px 0 !important;    /* 增加上下間距 */
        border-bottom: none !important; /* 移除中間的分隔線，讓它看起來像同一組 */
    }

    /* 標題微調 */
    .kuji-preview-row th {
        font-size: 14px !important;
        padding-bottom: 5px !important; /* 與下方數字拉近距離 */
    }

    /* 數字膠囊微調 */
    .kuji-preview-amount {
        font-size: 20px !important; /* 稍微縮小字體 */
        padding: 6px 15px !important; /* 縮小內距 */
        width: 90%; /* 寬度設為 90%，避免撐爆螢幕 */
        max-width: 280px; /* 設定最大寬度 */
        margin: 0 auto; /* 置中 */
        
        /* 確保內容垂直置中 */
        display: flex !important; 
        justify-content: center;
        align-items: center;
    }
    
    
    /* 調整圖標與文字的距離 */
    .kuji-preview-amount img.g-coin-icon {
        margin-right: 8px !important;
        width: 24px !important; /* 圖標稍微縮小 */
    }
}
/* =========================================
   25. 📱 手機/平板 Header 版面優化 (全尺寸並排版)
   ========================================= */

/* 將範圍擴大到 1024px (包含平板橫向) */
@media (max-width: 1024px) {

    /* 1. Header 容器：強制單行橫向排列 */
    .wp-block-group.alignfull.has-background, 
    header#masthead,
    .site-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important; 
        padding: 10px 15px !important; /* 縮小邊距以容納更多內容 */
        width: 100% !important;
        box-sizing: border-box !important;
        height: auto !important; /* 平板高度自適應，手機則限制 */
        min-height: 60px;
        flex-wrap: nowrap !important; /* ★ 關鍵：禁止換行 */
    }

    /* 2. Logo 區域 */
    .wp-block-site-logo, 
    .site-branding {
        flex: 0 1 auto !important; /* 允許縮小但不過度 */
        display: flex !important;
        align-items: center !important;
        margin-right: auto !important; 
        max-width: 60%; /* 限制 Logo 寬度，留 40% 給按鈕 */
    }
    
    /* 確保 Logo 圖片不會太大撐開 */
    .wp-block-site-logo img, 
    .custom-logo {
        max-height: 40px !important; /* 限制圖片高度 */
        width: auto !important;
    }

    /* 3. 右側按鈕群組 */
    .wp-block-navigation,
    .primary-navigation-wrap,
    nav {
        flex: 0 0 auto !important; 
        display: flex !important;
        align-items: center !important;
        gap: 10px !important; /* 縮小按鈕間距 */
    }

    /* 4. 隱藏 Header 外層的會員圖示 (保留漢堡內的) */
    header > div a[href*="my-account"], 
    header .wp-block-buttons a[href*="my-account"],
    .header-account-icon {
        display: none !important;
    }

    /* 5. 強制顯示漢堡選單內的會員連結 */
    .wp-block-navigation__responsive-container a[href*="my-account"] {
        display: block !important; 
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* 6. 統一圖示大小 */
    .header-cart-icon, 
    .wp-block-navigation button svg {
        width: 22px !important; /* 稍微縮小一點 */
        height: 22px !important;
    }
}

/* =========================================
   29 & 30. 包牌試算與歐氣榜樣式
   ========================================= */

/* --- 包牌試算 (列表頁) --- */
.kuji-full-set-calc {
    background: #f8f9fa;
    border: 1px dashed #bbb;
    border-radius: 4px;
    padding: 4px 8px;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 12px;
    text-align: center;
    color: #555;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.kuji-full-set-calc .calc-label {
    font-weight: bold;
    margin-right: 5px;
}

.kuji-full-set-calc .calc-price {
    color: #e60012;
    font-family: 'DotGothic16', sans-serif;
    font-weight: 900;
    font-size: 14px;
}

/* --- 歐氣排行榜 (Shortcode) --- */
.kuji-luck-rank-box {
    background: #222;
    border: 2px solid #ffd700;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.luck-header {
    background: #ffd700;
    color: #000;
    font-family: 'DotGothic16', sans-serif;
    font-weight: 900;
    text-align: center;
    padding: 10px;
    font-size: 18px;
    letter-spacing: 1px;
}

.luck-list {
    max-height: 300px;
    overflow-y: auto; /* 超過高度可捲動 */
}

.luck-row {
    padding: 10px 15px;
    border-bottom: 1px solid #333;
    font-size: 13px;
    color: #ccc;
    display: flex;
    align-items: center;
    transition: background 0.2s;
}

.luck-row:last-child { border-bottom: none; }
.luck-row:hover { background: #333; }

/* 區分顏色 */
.luck-row.rank-s .luck-prize { color: #e60012; font-weight: bold; } /* S賞 紅色 */
.luck-row.rank-a .luck-prize { color: #3498db; font-weight: bold; } /* A賞 藍色 */
.luck-row.rank-last .luck-prize { color: #ffd700; font-weight: 900; text-shadow: 0 0 5px rgba(255, 215, 0, 0.5); } /* Last 黃色發光 */

.luck-time {
    color: #666;
    font-size: 11px;
    margin-right: 10px;
    white-space: nowrap;
}

.luck-user {
    color: #fff;
    font-weight: bold;
}

.luck-info {
    line-height: 1.4;
}


/* =========================================
   34. 互動式彈幕 & 聊天室樣式 (全新互動版)
   ========================================= */

/* 1. 彈幕顯示層 (全螢幕穿透) - 預留底部空間給操作區 */
#kuji-danmaku-layer {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 85%; /* 避免彈幕飄到底部擋住輸入框 */
    pointer-events: none; 
    z-index: 9999; 
    overflow: hidden;
}

/* 2. 彈幕通用設定 */
.kuji-dm-item {
    position: absolute; 
    left: 100%; /* 起點在螢幕右外側 */
    white-space: nowrap;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: bold;
    padding: 6px 16px;
    border-radius: 50px;
    display: flex; 
    align-items: center; 
    gap: 8px;
    
    /* 動畫設定 */
    animation: kujiSlide 10s linear forwards;
    will-change: transform;
    
    font-size: 15px;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

/* 動畫路徑：從右到左 */
@keyframes kujiSlide {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-100vw - 100%)); }
}

/* 3. 樣式區分 */

/* [玩家聊天] - 像氣泡一樣，半透明黑底 */
.dm-user-msg {
    background: rgba(0, 0, 0, 0.6); 
    border: 1px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(2px);
}
/* 玩家名字顏色 */
.dm-user-msg .dm-user { color: #81ecec; text-shadow: 1px 1px 0 #000; }
.dm-user-msg .dm-content { color: #fff; }

/* [系統通知 - 普通中獎] - 金屬灰風格 */
.dm-sys-normal {
    background: linear-gradient(90deg, #2c3e50, #4ca1af);
    border: 1px solid #7f8c8d;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
    z-index: 50;
}
.dm-sys-normal .dm-badge { 
    background: #34495e; 
    color: #fff; 
    font-size:10px; 
    padding:2px 6px; 
    border-radius:4px; 
    border: 1px solid #aaa;
}
.dm-sys-normal .dm-user { color: #fff; font-weight:bold; }
.dm-sys-normal .dm-content { color: #ecf0f1; }

/* [系統通知 - 大獎 S/A] - 紅色高亮發光 */
.dm-sys-high {
    background: linear-gradient(90deg, #c0392b, #e74c3c);
    border: 2px solid #ffd700;
    box-shadow: 0 0 15px rgba(230, 0, 18, 0.8);
    font-size: 18px; /* 大字 */
    z-index: 100; /* 蓋在普通聊天上面 */
}
.dm-sys-high .dm-user { color: #fff; text-decoration: underline; }
.dm-sys-high .dm-content { color: #ffd700; font-weight:900; }

/* [系統通知 - 最後賞] - 金色尊爵版 */
.dm-sys-last {
    background: linear-gradient(90deg, #f1c40f, #f39c12);
    border: 2px solid #fff;
    color: #000;
    text-shadow: none;
    box-shadow: 0 0 20px #ffd700;
    font-size: 20px;
    z-index: 110; /* 最高層級 */
}
.dm-sys-last .dm-user { color: #000; font-weight:bold; }
.dm-sys-last .dm-content { color: #000; font-weight:900; }


/* 4. 發言控制台 (Dock) - 懸浮在左下角 */
#kuji-chat-dock {
    position: fixed;
    bottom: 80px; /* 位於底部選單上方 */
    left: 20px;   /* 靠左 */
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Noto Sans TC', sans-serif;
}

/* 輸入區塊 (展開動畫容器) */
.chat-input-area {
    background: rgba(0, 0, 0, 0.85);
    padding: 8px 12px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    border: 1px solid #ffd700;
    box-shadow: 0 4px 15px rgba(0,0,0,0.6);
    
    /* 展開動畫 */
    width: 280px; 
    opacity: 1;
    transform: scale(1);
    transform-origin: left center;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 縮小狀態：隱藏輸入區 */
#kuji-chat-dock.minimized .chat-input-area {
    width: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    border: none;
}

/* 輸入框 */
#kuji-chat-input {
    background: transparent;
    border: none;
    color: #fff;
    padding: 5px 10px;
    width: 100%;
    outline: none;
    font-size: 14px;
}
#kuji-chat-input::placeholder { color: #888; }

/* 發送按鈕 */
#kuji-chat-send {
    background: #e60012 !important; /* 強制紅色 */
    color: #fff !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 6px 15px !important;
    font-size: 13px !important;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: none !important;
    margin: 0 !important;
}
#kuji-chat-send:disabled { 
    background: #555 !important; 
    cursor: not-allowed; 
    opacity: 0.7;
}
#kuji-chat-send:hover { background: #c0392b !important; }

/* 切換開關 (圓形按鈕) */
#kuji-chat-toggle {
    width: 50px; height: 50px;
    border-radius: 50% !important;
    background: #222 !important;
    border: 2px solid #ffd700 !important;
    color: #fff !important;
    display: flex !important; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5) !important;
    transition: transform 0.2s;
    padding: 0 !important;
    margin: 0 !important;
}
#kuji-chat-toggle:active { transform: scale(0.9); }

.toggle-icon { font-size: 20px; line-height: 1; margin-bottom: 2px; }
.toggle-text { font-size: 10px; font-weight: bold; }

/* 手機版適配 */
@media (max-width: 480px) {
    #kuji-chat-dock { left: 10px; bottom: 90px; } /* 避開手機底部導航 */
    .chat-input-area { width: 200px; } /* 縮短寬度以免超出螢幕 */
    .kuji-dm-item { font-size: 13px; padding: 4px 10px; }
    .dm-sys-high { font-size: 15px; }
    .dm-sys-last { font-size: 16px; }
}



/* =========================================
   36. 會員中心成就儀表板樣式
   ========================================= */

   .kuji-dashboard-container {
    max-width: 800px;
    margin: 0 auto;
    font-family: 'Noto Sans TC', sans-serif;
}

/* --- 1. 玩家卡片 (Player Card) --- */
.kuji-player-card {
    background: linear-gradient(145deg, #2b2b2b, #1a1a1a);
    border-radius: 16px;
    padding: 25px;
    color: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    border: 1px solid #444;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

/* 階級專屬特效 (邊框與光暈) */
.kuji-player-card.vip-bronze { border: 1px solid #cd7f32; box-shadow: 0 0 15px rgba(205, 127, 50, 0.2); }
.kuji-player-card.vip-gold { border: 1px solid #ffd700; box-shadow: 0 0 20px rgba(255, 215, 0, 0.3); }
.kuji-player-card.vip-supreme { border: 1px solid #ff00cc; box-shadow: 0 0 25px rgba(255, 0, 204, 0.4); }

.card-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

.player-avatar img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

.player-info { flex: 1; }
.player-name { font-size: 1.5rem; font-weight: 900; line-height: 1.2; }
.player-rank-badge {
    display: inline-block;
    background: rgba(255,255,255,0.1);
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.9rem;
    color: #aaa;
    margin-top: 5px;
}
/* 高級稱號顏色 */
.vip-gold .player-rank-badge { color: #ffd700; background: rgba(255,215,0,0.1); border: 1px solid #ffd700; }
.vip-supreme .player-rank-badge { color: #ff00cc; background: rgba(255,0,204,0.1); border: 1px solid #ff00cc; font-weight:bold; }

.player-balance-box {
    text-align: right;
}
.player-balance-box .label { font-size: 0.8rem; color: #888; }
.player-balance-box .value { 
    font-family: 'DotGothic16', sans-serif; 
    font-size: 1.8rem; 
    color: #ffd700; 
    text-shadow: 0 0 10px rgba(255,215,0,0.3);
}

/* --- 2. 進度條區塊 --- */
.vip-progress-section {
    background: rgba(0,0,0,0.3);
    padding: 15px;
    border-radius: 12px;
}

.progress-info {
    font-size: 0.9rem;
    color: #ccc;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
}
.gap-amount { color: #e60012; font-weight: bold; }

.progress-bar-bg {
    width: 100%;
    height: 12px;
    background: #444;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #e60012, #ff5f5f);
    border-radius: 6px;
    position: relative;
    transition: width 1s ease-out;
}
/* 根據階級換進度條顏色 */
.vip-gold .progress-bar-fill { background: linear-gradient(90deg, #f1c40f, #ffd700); }
.vip-supreme .progress-bar-fill { background: linear-gradient(90deg, #ff00cc, #3333ff); }

.progress-glare {
    position: absolute; top:0; left:0; width:100%; height:100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: progressShine 2s infinite;
}
@keyframes progressShine { from {transform: translateX(-100%);} to {transform: translateX(100%);} }

.progress-stats {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #666;
    margin-top: 5px;
}

/* --- 3. 數據網格 --- */
.kuji-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}
@media (min-width: 600px) { .kuji-stats-grid { grid-template-columns: repeat(4, 1fr); } }

.stat-box {
    background: #fff;
    border: 1px solid #eee;
    padding: 15px;
    border-radius: 12px;
    text-align: center;
    transition: transform 0.2s;
}
.stat-box:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }

.stat-icon { font-size: 1.5rem; margin-bottom: 5px; }
.stat-label { font-size: 0.85rem; color: #888; font-weight: bold; }
.stat-value { font-size: 1.2rem; font-weight: 900; color: #333; font-family: 'DotGothic16'; }
.stat-value .unit { font-size: 0.8rem; font-weight: normal; }

/* 針對手機版微調 */
@media (max-width: 480px) {
    .card-header { flex-direction: column; text-align: center; }
    .player-balance-box { text-align: center; margin-top: 10px; }
}
/* =========================================
   隱藏商品頁多餘的數量選擇器
   ========================================= */

/* 針對所有商品頁面隱藏數量框 */
.woocommerce div.product form.cart .quantity {
    display: none !important;
}
/*
「非一番賞」的一般商品需要顯示數量，
*/
.single-product .kuji-wrapper ~ form.cart .quantity,
.post-type-archive-product .quantity {
    display: none !important;
} 

/* 強制隱藏「請前往...選擇產品選項」的錯誤訊息 */
.woocommerce-error li[data-id*="82"], /* 如果有 data-id */
.woocommerce-error li:contains("選擇產品選項"),
.woocommerce-error li:contains("Please choose product options") {
    display: none !important;
}
/* 注意：:contains 選擇器不是標準 CSS，但在部分 WP 主題的 JS 中可能有效。
   如果無效，請改用以下通殺法 (但會隱藏所有錯誤，需小心使用) */
   
/* 針對儲值頁面的錯誤訊息隱藏 */
.single-product.postid-82 .woocommerce-error {
    display: none !important;
}

/* 強制隱藏國家欄位 (但讓它存在於 DOM 中) */
.kuji-hidden-country {
    position: absolute !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    z-index: -1;
}

/* 社群登入按鈕美化 */
.digits-social-btn {
    border-radius: 8px !important;
    border: 2px solid #000 !important;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.5) !important;
    transition: transform 0.1s !important;
}
.digits-social-btn:active {
    transform: translate(2px, 2px) !important;
    box-shadow: 1px 1px 0 rgba(0,0,0,0.5) !important;
}

/* =========================================
   最後賞設定 (燈箱版 - 最終修正)
   ========================================= */

/* 1. 父容器修正：確保層級正確 */
.last-one-box {
    transform: none !important; 
    z-index: 10 !important;
    position: relative;
}

/* 2. 圖片基礎設定 */
.last-one-img {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: zoom-in; /* 提示可點擊 */
    position: relative;
    z-index: 1;
    transform-origin: center center;
    /* 確保圖片在手機上不會被預設樣式干擾 */
    -webkit-tap-highlight-color: transparent; 
}

/* 3. 電腦版滑鼠懸停特效 (僅限電腦，手機不觸發) */
@media (min-width: 769px) {
    .last-one-img:hover {
        transform: scale(5); 
        z-index: 999; 
        box-shadow: 0 20px 50px rgba(0,0,0,0.8);
        border-color: #ffd700 !important;
        border-width: 2px !important;
    }
}

/* 4. 手機版強制重置 (防止點擊瞬間卡住或閃爍) */
@media (max-width: 768px) {
    .last-one-img:active,
    .last-one-img:hover,
    .last-one-img:focus {
        transform: none !important;  /* 禁止原地放大 */
        position: static !important; /* 禁止脫離位置 */
        z-index: 1 !important;
        box-shadow: none !important;
        width: 70px !important;      /* 維持原尺寸 */
        height: 70px !important;
    }
}

/* =========================================
   最後賞全螢幕燈箱樣式 (配合 PHP 燈箱結構)
   ========================================= */

/* 黑色全螢幕遮罩 */
#last-one-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9); /* 深黑背景 */
    z-index: 2147483647; /* 確保在最上層 */
    
    /* 彈性佈局讓圖片絕對置中 */
    display: none; /* 預設隱藏，由 JS 控制顯示 */
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* 中間的大圖 */
#last-one-big-img {
    width: auto;
    height: auto;
    max-width: 90vw;  /* 寬度最多佔螢幕 90% */
    max-height: 80vh; /* 高度最多佔螢幕 80% */
    object-fit: contain;
    
    border: 3px solid #ffd700; /* 金色邊框 */
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5); /* 發光效果 */
    background: #fff;
    
    /* 確保圖片點擊不會穿透 */
    pointer-events: auto;
}

/* 右上角的 X 關閉按鈕 */
#last-one-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #000 !important;
    border: 2px solid #000 !important;
    
    font-size: 30px !important;
    line-height: 1 !important;
    font-weight: bold !important;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(255,255,255,0.5) !important;
    
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 !important;
    z-index: 2147483648;
}

#last-one-close-btn:active {
    transform: scale(0.9);
    background: #eee !important;
}

/* =========================================
   配率表小圖樣式
   ========================================= */
   .kuji-stat-thumb {
    width: 40px !important;
    height: 40px !important;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 10px;
    border: 1px solid #eee;
    background: #fff;
}

/* 確保列表垂直置中 */
.prize-stat-item {
    display: flex;
    align-items: center; /* 垂直置中 */
    padding: 8px 12px !important;
}

/* 戰利品卡片中的商品名稱 */
.item-product-name {
    font-size: 11px;
    color: #888;
    margin-top: 5px;
    /* 強制單行顯示，超過省略 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-top: 1px dashed #eee;
    padding-top: 3px;
}

/* 戰利品卡片圖片樣式 */
.item-prize-img {
    width: 100%;
    height: 140px; /* 固定高度，避免卡片長短不一 */
    object-fit: contain; /* 保持圖片比例，完整顯示 */
    background-color: #f9f9f9; /* 圖片背景色 */
    border-radius: 4px;
    margin-bottom: 5px;
    border: 1px solid #eee;
}

/* =========================================
   22. 🏆 虛擬公仔展示櫃 (Cabinet View)
   ========================================= */

/* 櫃子外框 */
.kuji-cabinet-view {
    background: #1a1a1a; /* 深色內裝 */
    border: 4px solid #444; /* 櫃子外殼 */
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 80px; /* 留給底部出貨條空間 */
    box-shadow: inset 0 0 50px rgba(0,0,0,0.8); /* 內部陰影 */
}

/* 頂部資訊列 */
.cabinet-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #333;
    color: #ffd700;
    font-family: 'DotGothic16', sans-serif;
}
.cabinet-title { font-size: 20px; font-weight: bold; }
.cabinet-count { font-size: 14px; color: #aaa; }

/* 格子佈局 */
.cabinet-shelves {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 20px;
}

/* 空櫃子訊息 */
.empty-cabinet-msg {
    grid-column: 1 / -1;
    text-align: center;
    padding: 50px;
    color: #666;
    font-size: 16px;
    border: 2px dashed #333;
    border-radius: 8px;
}

/* --- 單一展品卡片 --- */
.cabinet-item {
    position: relative;
    background: transparent;
    cursor: pointer;
    transition: transform 0.2s;
}

/* 隱藏原本的 checkbox，改用卡片樣式呈現選中狀態 */
.cabinet-item input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* 圖片展示區 (盒子) */
.item-figure-box {
    position: relative;
    background: #2b2b2b;
    border: 2px solid #444;
    border-radius: 8px 8px 0 0; /* 上圓下直 */
    padding: 10px;
    height: 140px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
}

/* 頂部聚光燈特效 */
.item-spotlight {
    position: absolute;
    top: -20px; left: 0; right: 0; margin: auto;
    width: 80%; height: 10px;
    background: rgba(255,255,255,0.1);
    filter: blur(10px);
    z-index: 1;
}

/* 獎品圖片 */
.item-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 2;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.5));
}

/* 賞別標籤 (右上角懸浮) */
.item-rank-badge {
    position: absolute;
    top: 5px; right: 5px;
    color: #fff;
    font-weight: 900;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
    z-index: 3;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
}

/* 資訊底座 */
.item-base {
    background: #333;
    border: 2px solid #444;
    border-top: none;
    border-radius: 0 0 8px 8px; /* 上直下圓 */
    padding: 8px;
    text-align: center;
    position: relative;
}

.item-name {
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.item-series {
    color: #888;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-ticket-id {
    position: absolute;
    top: -10px; left: 50%; transform: translateX(-50%);
    background: #000;
    color: #ffd700;
    font-family: monospace;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 10px;
    border: 1px solid #444;
}

/* --- 互動特效 --- */

/* 懸停時浮起 */
.cabinet-item:hover .item-figure-box {
    border-color: #666;
    background: #333;
}

/* ★ 選中狀態 (Checked) ★ */
.cabinet-item.active .item-figure-box {
    border-color: #e60012; /* 紅框 */
    box-shadow: 0 0 15px rgba(230, 0, 18, 0.3), inset 0 0 20px rgba(230, 0, 18, 0.1);
}

.cabinet-item.active .item-base {
    background: #e60012;
    border-color: #e60012;
}
/* 資訊底座文字顏色修正 */
.item-name {
    color: #ffffff !important; /* ★ 改為純白 */
    font-size: 13px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8); /* 加陰影讓字更浮凸 */
}

.item-series {
    color: #cccccc !important; /* ★ 改為淺灰 (次要資訊) */
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 如果有其他深色文字看不清楚，也可以加這行通殺 */
.cabinet-item {
    color: #fff;
}

.cabinet-item.active .item-name { color: #fff; }
.cabinet-item.active .item-series { color: #ffcccc; }
.cabinet-item.active .item-ticket-id { color: #fff; border-color: #fff; }

/* 42. 材積限制提醒 - 文字顏色修正 */
.shipping-volume-notice td div,
.shipping-volume-notice td strong,
.shipping-volume-notice td b,
.shipping-volume-notice td {
    color: #555555 !important; /* 改為深灰色 */
}

/* 標題特別加強紅色 */
.shipping-volume-notice td strong {
    color: #e60012 !important; 
}
/* =========================================
   43. 盲盒專區：強制恢復購物介面 (通用修正版)
   ========================================= */

/* 1. 強制顯示「數量輸入框」 */
body.single-product form.cart .quantity,
body.single-product .quantity {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 80px !important;
    margin-right: 10px !important;
}

/* (注意：如果這影響到一番賞頁面，請在 functions.php 第 6 區塊再次確認已排除盲盒) */

/* 2. 強制顯示「加入購物車按鈕」 */
body.single-product .single_add_to_cart_button {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background-color: #e60012 !important;
    color: #fff !important;
    border-radius: 50px !important;
    border: none !important;
    padding: 12px 30px !important;
    font-weight: bold !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    box-shadow: 0 4px 10px rgba(230,0,18,0.3) !important;
}

/* 3. 排版調整 */
body.single-product form.cart {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

/* =========================================
   24. 🛠️ 結帳欄位強制並排修正 (Flexbox)
   ========================================= */

/* 強制讓欄位容器變成 Flex 佈局 */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* 修正所有欄位的預設寬度 */
.form-row {
    width: 100%; /* 預設全寬 */
    box-sizing: border-box;
    margin-bottom: 15px;
}

/* 針對左半邊欄位 (縣/市) */
.form-row-first {
    width: 48% !important;
    margin-right: 4% !important;
    float: left; /* 兼容舊版 */
}

/* 針對右半邊欄位 (鄉鎮市區) */
.form-row-last {
    width: 48% !important;
    margin-right: 0 !important;
    float: right; /* 兼容舊版 */
}

/* 手機版強制變回單欄 */
@media (max-width: 480px) {
    .form-row-first, .form-row-last {
        width: 100% !important;
        margin-right: 0 !important;
        float: none !important;
    }
}
/* =========================================
   結帳頁面運送方式優化
   ========================================= */

/* 1. 運送方式文字變白 (針對深色背景優化) */
#shipping_method li label {
    color: #0f0f0f !important;
    font-weight: bold;
}

/* 2. 選中的項目加強顯示 (選用) */
#shipping_method li input:checked + label {
    color: #000000 !important; /* 選中變金色 */
}

/* 3. 價格文字也變白 */
#shipping_method li label .amount {
    color: #ffd700 !important;
}

/* 修正「選擇超商門市」按鈕文字顏色 */
button.ry-choose-cvs,
.ry-choose-cvs {
    color: #ffffff !important; /* 強制白色文字 */
    background-color: #e60012 !important; /* (選用) 確保背景是紅色，維持風格 */
    border: none !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* 滑鼠移過去的效果 */
button.ry-choose-cvs:hover,
.ry-choose-cvs:hover {
    color: #ffffff !important;
    background-color: #c7000f !important; /* 深紅色 */
    transform: translateY(-1px);
}

/* =========================================
   26. 商品標題顏色修正 (區塊編輯器專用版)
   ========================================= */

/* 1. 針對您提供的特定 HTML 屬性 (最精準鎖定) */
a[data-wp-on--click="woocommerce/product-collection::actions.viewProduct"] {
    color: #000000 !important; /* 強制純黑 */
    text-decoration: none !important; /* 移除底線 */
    font-weight: 900 !important; /* 加粗 */
}

/* 2. 針對 WooCommerce 區塊標題的通用 Class (補強) */
.wc-block-components-product-title a,
.wc-block-grid__product-title a,
.wp-block-post-title a {
    color: #000000 !important;
    text-decoration: none !important;
}

/* 3. 滑鼠移過去的顏色 (深灰) */
a[data-wp-on--click="woocommerce/product-collection::actions.viewProduct"]:hover,
.wc-block-components-product-title a:hover {
    color: #333333 !important;
}
/* =========================================
   27. 💰 價格文字特效優化 (像素街機金幣風)
   ========================================= */

/* 1. 價格文字主體 */
.price, 
.amount, 
.woocommerce-Price-amount {
    /* 亮金色 */
    color: #ffd700 !important; 
    
    /* 像素字體 */
    font-family: 'DotGothic16', sans-serif !important;
    font-weight: 900 !important;
    font-size: 1.4em !important; /* 稍微放大 */
    letter-spacing: 1px;
    
    /* ★ 關鍵特效：黑色立體邊框 + 發光暈 */
    text-shadow: 
        2px 2px 0 #000, 
        -1px -1px 0 #000,  
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000,
        0 0 10px rgba(255, 215, 0, 0.6) !important;
        
    /* 讓它跟周圍有點距離 */
    display: inline-block;
    margin: 5px 0;
    line-height: 1.2;
}

/* 2. 針對「原價」 (被劃掉的價格) 做弱化處理 */
del .amount,
del .woocommerce-Price-amount {
    color: #888 !important; /* 灰色 */
    text-shadow: none !important; /* 移除特效 */
    font-size: 0.8em !important; /* 縮小 */
    text-decoration: line-through !important; /* 刪除線 */
    font-weight: normal !important;
    opacity: 0.7;
}

/* =========================================
   28. 💰 價格顯示順序修正 (強制 G 幣在後)
   ========================================= */

/* 針對所有價格容器，如果裡面包含 G 幣符號 */
.price:has(.kuji-currency-g),
.amount:has(.kuji-currency-g),
.woocommerce-Price-amount:has(.kuji-currency-g) {
    display: inline-flex !important;
    flex-direction: row-reverse !important; /* ★ 關鍵：反轉排列 (符號<->數字) */
    align-items: center;
    justify-content: flex-end;
    gap: 4px; /* 數字跟 G 之間的距離 */
}

/* 確保 G 幣符號樣式正確 */
.kuji-currency-g {
    font-family: 'DotGothic16', sans-serif;
    font-weight: 900;
    text-decoration: none !important;
    display: inline-block;
}

/* 修正手機版可能的對齊問題 */
@media (max-width: 768px) {
    .price:has(.kuji-currency-g) {
        justify-content: flex-start; /* 手機版通常靠左對齊 */
    }
}
/* =========================================
   43. 購物介面顯示控制 (一番賞隱藏 / 盲盒顯示)
   ========================================= */

/* 1. 【全站預設】隱藏標準購物介面 (針對一番賞) */
body.single-product form.cart,
body.single-product .single_add_to_cart_button,
body.single-product .quantity,
body.single-product .woocommerce-variation-add-to-cart {
    display: none !important;
}

/* 2. 【盲盒專區】強制恢復顯示 (白名單機制) */
/* 針對 blind-box 分類 */
body.single-product .product.product_cat-blind-box form.cart,
body.single-product .product.product_cat-blind-box .single_add_to_cart_button,
body.single-product .product.product_cat-blind-box .quantity,
body.single-product .product.product_cat-blind-box .woocommerce-variation-add-to-cart,
/* 針對 uncategorized 分類 (兼容您的設定) */
body.single-product .product.product_cat-uncategorized form.cart,
body.single-product .product.product_cat-uncategorized .single_add_to_cart_button,
body.single-product .product.product_cat-uncategorized .quantity,
body.single-product .product.product_cat-uncategorized .woocommerce-variation-add-to-cart {
    display: flex !important; /* 恢復 Flex 排版 */
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    width: auto !important;
    pointer-events: auto !important;
}

/* 3. 盲盒按鈕樣式優化 (豆沙紅) */
.product_cat-blind-box .single_add_to_cart_button,
.product_cat-uncategorized .single_add_to_cart_button {
    background-color: rgb(190, 110, 103) !important;
    color: #fff !important;
    border-radius: 50px !important;
    border: none !important;
    padding: 12px 30px !important;
    font-weight: bold !important;
    font-size: 16px !important;
    box-shadow: 0 4px 10px rgba(190, 110, 103, 0.3) !important;
    cursor: pointer !important;
    margin-top: 0 !important; /* 對齊數量框 */
}

.product_cat-blind-box .single_add_to_cart_button:hover,
.product_cat-uncategorized .single_add_to_cart_button:hover {
    background-color: rgb(160, 90, 85) !important;
    transform: translateY(-2px);
}

/* 4. 盲盒數量框樣式 */
.product_cat-blind-box .quantity input,
.product_cat-uncategorized .quantity input {
    width: 60px !important;
    height: 45px !important; /* 配合按鈕高度 */
    text-align: center;
    border: 1px solid #ccc !important;
    border-radius: 4px;
    margin-right: 10px !important;
    display: block !important;
}

/* 5. 盲盒排版微調 */
.product_cat-blind-box form.cart,
.product_cat-uncategorized form.cart {
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}



/* =========================================
   44. 🎨 盲盒專區按鈕顏色調整 
   ========================================= */

/* 1. 針對列表頁 (Loop) 的按鈕 */
/* 同時指定 blind-box 和 uncategorized 分類，確保一定抓得到 */
.product_cat-blind-box .kuji-red-btn,
.product_cat-uncategorized .kuji-red-btn {
    background-color: rgb(191, 109, 103) !important; /* 您指定的顏色 */
    border-color: rgb(191, 109, 103) !important;
    color: #fff !important;
}

/* 列表頁按鈕 - 滑鼠懸停效果 */
.product_cat-blind-box .kuji-red-btn:hover,
.product_cat-uncategorized .kuji-red-btn:hover {
    background-color: rgb(160, 90, 85) !important; /* 稍微變深 */
    transform: translateY(-2px);
}

/* 2. 針對內頁 (Single Product) 的加入購物車按鈕 */
/* 覆蓋原本第 43 區塊的紅色設定 */
body.single-product .product.product_cat-blind-box .single_add_to_cart_button,
body.single-product .product.product_cat-uncategorized .single_add_to_cart_button {
    background-color: rgb(190, 110, 103) !important;
}

/* 內頁按鈕 - 滑鼠懸停效果 */
body.single-product .product.product_cat-blind-box .single_add_to_cart_button:hover,
body.single-product .product.product_cat-uncategorized .single_add_to_cart_button:hover {
    background-color: rgb(160, 90, 85) !important;
}



/* =========================================
   49. 盲盒條漫教學 - 手機版寬度與字體優化 (置中修正版)
   ========================================= */
   @media (max-width: 768px) {
    /* 1. 容器寬度調整 */
    .tax-product_cat .arcade-screen-container {
         width: 100% !important;     /* 佔滿父容器寬度 */
         max-width: 100% !important;
         box-sizing: border-box !important;
         
         /* ★ 修正：使用 auto 確保置中，並增加上下留白 */
         margin: 20px auto 30px auto !important; 
         
         border-radius: 0 !important;
         padding: 10px !important;
    }

    /* 2. 縮小螢幕邊框，讓圖片更大 */
    .tax-product_cat .arcade-screen {
        padding: 5px !important;
    }

    /* 3. 加大標題字體 */
    .tax-product_cat .arcade-header {
        padding: 12px 15px !important;
    }
    .tax-product_cat .arcade-title {
        font-size: 20px !important;
        font-weight: 900 !important;
    }
}

/* 隱藏 WooCommerce 商品列表的「顯示第 X 至 Y 項結果」文字 */
.woocommerce-result-count {
    display: none !important;
}

/* 隱藏商店頁面的「排序下拉選單」 */
.woocommerce-ordering, 
.orderby {
    display: none !important;
}


/* =========================================
   修正版：Header 選單樣式分離 (手機垂直 / 電腦橫向)
   ========================================= */

/* --- Part 1: 手機與平板 (漢堡選單展開時) --- */
/* 只在螢幕寬度小於 1024px 時生效 */
@media (max-width: 1024px) {
    
    /* 確保容器內容垂直水平置中 */
    .wp-block-navigation__responsive-container {
        text-align: center !important;
    }

    /* 強制列表項目垂直排列 */
    .wp-block-navigation__responsive-container .wp-block-navigation__container {
        flex-direction: column !important; /* ★ 關鍵：垂直排列 */
        align-items: center !important;
        justify-content: center !important;
        gap: 25px !important; /* 拉大間距 */
    }

    /* 讓每個選項佔滿寬度以便置中 */
    .wp-block-navigation__responsive-container .wp-block-navigation-item {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin-bottom: 0 !important;
    }

    /* 手機版字體放大 */
    .wp-block-navigation__responsive-container .wp-block-navigation-item__content {
        font-size: 24px !important;    /* 字體放大 */
        font-weight: 900 !important;   /* 最粗體 */
        font-family: 'DotGothic16', sans-serif !important;
        padding: 5px 0 !important;
        color: #000 !important;
    }
}

/* --- Part 2: 電腦版 (正常橫向顯示) --- */
/* 只在螢幕寬度大於 1025px 時生效 */
@media (min-width: 1025px) {
    
    .wp-block-navigation__responsive-container .wp-block-navigation__container {
        flex-direction: row !important;    /* ★ 關鍵：強制橫向 */
        align-items: center !important;
        justify-content: flex-end !important; /* 靠右對齊，若想置中請改 center */
        gap: 20px !important;              /* 電腦版按鈕間距 */
        width: auto !important;
    }

    .wp-block-navigation__responsive-container .wp-block-navigation-item {
        width: auto !important;            /* 自動寬度，不要佔滿一行 */
        display: inline-block !important;
    }

    /* 電腦版字體維持正常大小 */
    .wp-block-navigation__responsive-container .wp-block-navigation-item__content {
        font-size: 16px !important; 
        font-weight: 700 !important;
    }
}

/* =========================================
   手機版選單：G 幣餘額顯示區塊
   ========================================= */
   .mobile-menu-balance-box {
    background: #1a1a1a;        /*深黑背景*/
    border: 2px solid #ffd700;  /*金框*/
    border-radius: 12px;        /*圓角*/
    padding: 15px;
    margin: 20px auto 20px auto;/*上下留白，左右置中*/
    text-align: center;
    width: 85%;                 /*寬度*/
    box-shadow: 0 5px 15px rgba(0,0,0,0.5); /*陰影*/
    font-family: 'DotGothic16', sans-serif; /*維持像素風格*/
}

.mobile-balance-label {
    color: #aaa;
    font-size: 12px;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.mobile-balance-amount {
    color: #ffd700;             /*金色數字*/
    font-size: 24px;            /*大字體*/
    font-weight: 900;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.mobile-balance-icon {
    width: 20px;
    vertical-align: -2px;
    margin-right: 5px;
}

/* 僅在手機/平板版顯示 (配合您之前的 1024px 設定) */
@media (min-width: 1025px) {
    .mobile-menu-balance-box {
        display: none !important;
    }
}

/* =========================================
   即時動態牆 (Live Feed) 樣式
   ========================================= */
   .kuji-live-feed-container {
    background: #111; /* 深黑背景 */
    border: 1px solid #333;
    border-radius: 8px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    overflow: hidden;
    font-family: 'Noto Sans TC', sans-serif;
}

.feed-header {
    background: #222;
    color: #fff;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: bold;
    border-bottom: 1px solid #444;
    display: flex;
    align-items: center;
}

/* 綠色呼吸燈 */
.feed-dot {
    width: 8px; height: 8px;
    background: #2ecc71;
    border-radius: 50%;
    margin-right: 8px;
    box-shadow: 0 0 5px #2ecc71;
    animation: feedPulse 1.5s infinite;
}
@keyframes feedPulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }

.feed-window {
    height: 200px; /* 設定顯示高度 */
    overflow: hidden;
    position: relative;
    background: #1a1a1a;
}

.feed-scroll-track {
    animation: scrollVertical 20s linear infinite; /* 垂直滾動動畫 */
}
/* 滑鼠移上去暫停滾動，方便查看 */
.feed-window:hover .feed-scroll-track {
    animation-play-state: paused;
}

@keyframes scrollVertical {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

.feed-row {
    padding: 8px 15px;
    border-bottom: 1px dashed #333;
    color: #ccc;
    font-size: 13px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
}

.feed-row:nth-child(even) { background: rgba(255,255,255,0.02); }

.feed-time { color: #666; width: 60px; font-size: 11px; }
.feed-user { color: #fff; font-weight: bold; margin-right: 5px; min-width: 50px; }
.feed-action { color: #888; margin-right: 5px; }
.feed-target { font-weight: bold; margin-right: 5px; }

/* 配色區分 */
.feed-row.feed-kuji .feed-target { color: #f1c40f; } /* 一番賞金字 */
.feed-row.feed-box .feed-target { color: #9b59b6; }  /* 盲盒紫字 */

.feed-prod { color: #aaa; overflow: hidden; text-overflow: ellipsis; }

/* 排行榜 B賞 (綠色) */
.luck-row.rank-b .luck-prize { color: #2ecc71; font-weight: bold; }

/* 排行榜 C賞 (紫色) */
.luck-row.rank-c .luck-prize { color: #9b59b6; font-weight: bold; }

/* =========================================
   即時動態牆 (Live Feed) - 手機優化修正版
   ========================================= */
   .kuji-live-feed-container {
    background: #111;
    border: 1px solid #333;
    border-radius: 8px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    overflow: hidden;
    font-family: 'Noto Sans TC', sans-serif;
    /* 避免手機選取文字時干擾滾動 */
    user-select: none; 
    -webkit-user-select: none; 
}

.feed-header {
    background: #222;
    color: #fff;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: bold;
    border-bottom: 1px solid #444;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2; /* 確保標題蓋在內容上 */
}

/* 綠色呼吸燈 */
.feed-dot {
    width: 8px; height: 8px;
    background: #2ecc71;
    border-radius: 50%;
    margin-right: 8px;
    box-shadow: 0 0 5px #2ecc71;
    animation: feedPulse 1.5s infinite;
}
@keyframes feedPulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }

.feed-window {
    height: 200px;
    overflow: hidden;
    position: relative;
    background: #1a1a1a;
    /* 修正 iOS 圓角溢出問題 */
    mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
}

.feed-scroll-track {
    /* 啟動 GPU 硬體加速，解決手機卡頓 */
    will-change: transform;
    transform: translateZ(0); 
    animation: scrollVertical 20s linear infinite;
}

/* ★ 關鍵修正：只在支援滑鼠懸停的裝置上才暫停 ★ */
@media (hover: hover) {
    .feed-window:hover .feed-scroll-track {
        animation-play-state: paused;
    }
}

@keyframes scrollVertical {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

.feed-row {
    padding: 8px 15px;
    border-bottom: 1px dashed #333;
    color: #ccc;
    font-size: 13px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
}

.feed-row:nth-child(even) { background: rgba(255,255,255,0.02); }

.feed-time { color: #666; width: 60px; font-size: 11px; flex-shrink: 0; }
.feed-user { color: #fff; font-weight: bold; margin-right: 5px; min-width: 50px; flex-shrink: 0; }
.feed-action { color: #888; margin-right: 5px; flex-shrink: 0; }
.feed-target { font-weight: bold; margin-right: 5px; flex-shrink: 0; }
.feed-prod { color: #aaa; overflow: hidden; text-overflow: ellipsis; }

/* 配色區分 */
.feed-row.feed-kuji .feed-target { color: #f1c40f; }
.feed-row.feed-box .feed-target { color: #9b59b6; }

/* =========================================
   UI 優化：選單按鈕與購物車改為「紅底白字」
   ========================================= */

/* 1. 漢堡選單按鈕 (開啟 - 三條線) */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-open button {
    background-color: #e60012 !important; /* 紅底 */
    color: #ffffff !important;            /* 白圖示 */
}

/* 2. 選單關閉按鈕 (關閉 - 叉叉) */
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-close button {
    background-color: #e60012 !important; /* 紅底 */
    color: #ffffff !important;            /* 白圖示 */
}

/* 3. 購物車按鈕 */
.header-cart-icon,
.wc-block-mini-cart__button {
    background-color: #e60012 !important; /* 紅底 */
    color: #ffffff !important;            /* 白圖示 */
}

/* ★ 關鍵修正：強制將內部 SVG 圖示變為白色 ★ */
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg,
.header-cart-icon svg,
.wc-block-mini-cart__button svg {
    fill: #ffffff !important;   /* 填充變白 */
    color: #ffffff !important;  /* 文字變白 */
}

/* 針對線條型的圖示 (有些是用 stroke 畫的) */
.wp-block-navigation__responsive-container-open svg path,
.wp-block-navigation__responsive-container-close svg path,
.header-cart-icon svg path,
.wc-block-mini-cart__button svg path {
    fill: #ffffff !important;
}


/* =========================================
   熱銷一番賞輪播 (Hot Carousel) - 手機適中優化版
   ========================================= */
   .kuji-hot-carousel-section {
    max-width: 900px;
    margin: 0 auto 40px auto;
    background: #111;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    position: relative;
    font-family: 'Noto Sans TC', sans-serif;
}

.hot-header {
    color: #fff;
    font-size: 22px;
    font-weight: 900;
    margin-bottom: 20px;
    border-bottom: 3px solid #e60012; 
    padding-bottom: 10px;
    display: inline-block;
    letter-spacing: 1px;
}

.hot-icon { margin-right: 8px; animation: hotPulse 1.5s infinite; display: inline-block; }
@keyframes hotPulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }

.hot-carousel-container {
    position: relative;
    display: flex;
    align-items: center;
}

.hot-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 15px;
    scrollbar-width: none; 
    -ms-overflow-style: none;
    width: 100%;
    scroll-snap-type: x mandatory; 
}
.hot-track::-webkit-scrollbar { display: none; }

/* --- 單一商品卡片 --- */
.hot-item {
    /* 電腦版維持霸氣尺寸 */
    min-width: 260px;
    max-width: 260px;
    
    background: #222;
    border: 1px solid #444;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    flex-shrink: 0;
    scroll-snap-align: start; 
}

.hot-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(230, 0, 18, 0.3);
    border-color: #e60012;
}

.hot-rank-badge {
    position: absolute; top: 0; left: 0;
    background: linear-gradient(135deg, #e60012, #c0392b);
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    padding: 4px 12px;
    border-bottom-right-radius: 10px;
    z-index: 2;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.5);
}

.hot-img-box {
    width: 100%; 
    height: 260px; /* 電腦版高度 */
    position: relative;
    background: #000;
}
.hot-img-box img {
    width: 100%; height: 100%;
    object-fit: cover;
}

.hot-info { padding: 15px; }

.hot-title {
    color: #fff; 
    font-size: 18px;
    font-weight: 900;
    line-height: 1.4;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 8px;
}

.hot-meta {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 14px;
    margin-bottom: 10px;
    font-family: 'DotGothic16';
    font-weight: bold;
}

.hot-bar-bg { width: 100%; height: 8px; background: #444; border-radius: 4px; overflow: hidden; }
.hot-bar-fill { height: 100%; border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3); }

.hot-nav-btn {
    background: rgba(0,0,0,0.8) !important;
    color: #fff !important;
    border: 2px solid #666 !important;
    width: 45px !important; height: 45px !important;
    border-radius: 50% !important;
    font-size: 24px !important;
    display: flex !important; justify-content: center; align-items: center;
    cursor: pointer;
    position: absolute; z-index: 10;
    top: 50%; transform: translateY(-50%);
    box-shadow: 0 5px 15px rgba(0,0,0,0.8);
    transition: all 0.2s;
    padding: 0 !important;
}
.hot-nav-btn:hover { background: #e60012 !important; border-color: #fff !important; transform: translateY(-50%) scale(1.1); }
.hot-nav-btn.prev { left: -20px; }
.hot-nav-btn.next { right: -20px; }

/* --- 手機版優化 (關鍵修正) --- */
@media (max-width: 768px) {
    .kuji-hot-carousel-section { 
        margin: 0 0 40px 0; 
        border-radius: 0; 
        border-left: none; border-right: none;
        padding: 20px 10px;
    }
    
    .hot-nav-btn { display: none !important; }
    
    .hot-item {
        /* ★ 手機版改為 220px (約 60%)，這樣不會太大，且看得到下一張 */
        min-width: 220px; 
        max-width: 220px;
    }
    
    .hot-img-box {
        height: 220px; /* 配合寬度調整高度 */
    }

    /* 字體稍微縮小一點點，避免爆版 */
    .hot-title { font-size: 16px; }
    .hot-meta { font-size: 13px; }

    .hot-track {
        padding-left: 10px;
        padding-right: 10px;
        /* 讓第一張卡片可以稍微露出來一點 */
        scroll-padding-left: 10px; 
    }
}


/* =========================================
   盲盒輪播專屬配色 (紫色主題)
   ========================================= */

/* 1. 標題底線改紫色 */
.kuji-hot-carousel-section.blind-theme .hot-header {
    border-bottom-color: #9b59b6 !important;
}

/* 2. 排名標籤改紫色漸層 */
.kuji-hot-carousel-section.blind-theme .hot-rank-badge {
    background: linear-gradient(135deg, #8e44ad, #9b59b6) !important;
}

/* 3. 滑鼠移過去的邊框光暈改紫色 */
.kuji-hot-carousel-section.blind-theme .hot-item:hover {
    border-color: #9b59b6 !important;
    box-shadow: 0 10px 25px rgba(155, 89, 182, 0.3) !important;
}

/* 4. 左右按鈕 hover 改紫色 */
.kuji-hot-carousel-section.blind-theme .hot-nav-btn:hover {
    background: #9b59b6 !important;
}

/* 5. 進度條背景微調 (選用) */
.kuji-hot-carousel-section.blind-theme .hot-bar-fill {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}

/* =========================================
   手機版專用：極致寬版圓角 (Ultra Wide Bubble)
   ========================================= */
   @media (max-width: 768px) {
    .kuji-hot-carousel-section {
        /* 1. 左右留白極小化 (只留 5px)，視覺上接近滿版 */
        width: auto !important; /* 讓寬度自動填滿剩下的空間 */

        /* 2. 設定圓角 (消除直角) */
        border-radius: 16px !important;

        /* 3. 確保圓角生效 (內容不溢出) */
        overflow: hidden !important;

        /* 4. 恢復四周邊框 */
        border: 1px solid #333 !important;
        
        /* 5. (選用) 稍微減少內部留白，讓圖片更大 */
        padding: 15px 8px !important; 
    }
    
    /* 修正盲盒紫色主題的陰影，讓它在寬版下依然好看 */
    .kuji-hot-carousel-section.blind-theme {
        box-shadow: 0 5px 20px rgba(155, 89, 182, 0.2) !important;
    }
}

/* =========================================
   30. 價格顯示強制修正 (NT$ vs G)
   ========================================= */

/* 針對我們剛加入的 kuji-ntd-fix (NT$ 商品) */
.kuji-ntd-fix,
.amount.kuji-ntd-fix {
    display: inline-block !important;
    flex-direction: row !important; /* 強制由左至右 (NT$ 100) */
}

.kuji-ntd-fix .woocommerce-Price-currencySymbol {
    margin-right: 2px !important;
    font-size: 0.9em;
}

/* 確保 G 幣商品依然保持原樣 (如果之前有設反轉) */
.price:has(.kuji-currency-g),
.amount:has(.kuji-currency-g) {
    flex-direction: row-reverse !important; /* 數字在前，G在後 */
}

/* =========================================
   彈幕 VIP 稱謂：全等級同步儀表板風格 (V4 最終版)
   ========================================= */

/* 1. 通用設定：優化字體與間距 */
.dm-vip-tag {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 11px;
    font-weight: 800; /* 極粗體 */
    padding: 3px 8px; /* 稍微增加高度讓質感更好 */
    border-radius: 4px;
    line-height: 1.2;
    margin-right: 5px;
    vertical-align: middle;
    display: inline-block;
    border: 1px solid rgba(255,255,255,0.2);
    /* 讓所有標籤都有基本的立體感 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.3); 
    text-shadow: none !important; /* 清除文字陰影，確保配色乾淨 */
    position: relative; /* 為了動畫定位 */
    transform: translateY(-1px); /* 微調垂直對齊 */
}

/* ----------------------------------
   Lv.3 頂峰 (Legend) - 低調奢華 (黑曜石 + 香檳金)
   ---------------------------------- */
.dm-vip-tag.vip-legend,
.dm-vip-tag.vip-supreme {
    /* 背景：極深色霧面漸層 (像高級信用卡的黑卡) */
    background: linear-gradient(145deg, #000000 0%, #2c3e50 100%) !important;
    
    /* 文字：淡香檳金 (不是土豪金，是淡淡的米金色) */
    color: #F3E5AB !important; 
    
    /* 邊框：極細微的香檳金光澤 */
    border: 1px solid rgba(243, 229, 171, 0.4) !important;
    
    /* 陰影：不發光，而是加深陰影讓它看起來更「厚實」 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.8), inset 0 1px 1px rgba(255,255,255,0.1) !important;
    
    /* 字體細節：稍微拉開間距 */
    letter-spacing: 1px !important;
    font-weight: 600 !important; /* 稍微細一點比較優雅 */
    
    /* ★ 重要：強制關閉任何動畫，保持穩重 ★ */
    animation: none !important;
}

/* 徹底移除舊版頂峰的「流光掃過」特效 */
.dm-vip-tag.vip-legend::after,
.dm-vip-tag.vip-supreme::after {
    display: none !important;
    content: none !important;
    animation: none !important;
}

/* ----------------------------------
   Lv.2 傳奇藏家 (Master/Diamond) - 霸氣紅 + 呼吸燈
   ---------------------------------- */
.dm-vip-tag.vip-master,
.dm-vip-tag.vip-diamond {
    background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.5) !important;
    box-shadow: 0 0 10px rgba(235, 51, 73, 0.7) !important;
    
    /* 加入呼吸燈動畫，彰顯霸氣 */
    animation: dmBadgePulse 2s infinite alternate;
}

/* ----------------------------------
   Lv.1 頭號玩家 (Gold) - 奢華黑金 (金牌感)
   ---------------------------------- */
.dm-vip-tag.vip-gold,
.dm-vip-tag.vip-player {
    background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%) !important;
    color: #4a3b00 !important; /* 深褐色文字，在金色背景上最清晰 */
    border: 1px solid #ffd700 !important;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.6) !important;
    text-shadow: none !important;
}

/* ----------------------------------
   Lv.0 撕籤生 (Silver/Bronze) - 科技亮藍
   ---------------------------------- */
.dm-vip-tag.vip-silver,
.dm-vip-tag.vip-bronze {
    background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%) !important;
    color: #fff !important;
    border: 1px solid #00c6ff !important;
    box-shadow: 0 0 6px rgba(0, 198, 255, 0.5) !important;
}

/* ----------------------------------
   Lv.-1 新進學徒 (Normal) - 質感灰
   ---------------------------------- */
.dm-vip-tag.vip-normal {
    background: linear-gradient(135deg, #7f8c8d 0%, #bdc3c7 100%) !important;
    color: #fff !important;
    border: 1px solid #bdc3c7 !important;
}

/* ----------------------------------
   動畫定義 (呼吸燈)
   ---------------------------------- */
@keyframes dmBadgePulse {
    0% { transform: scale(1) translateY(-1px); box-shadow: 0 0 5px rgba(235, 51, 73, 0.5); }
    100% { transform: scale(1.05) translateY(-1px); box-shadow: 0 0 12px rgba(235, 51, 73, 0.9); }
}

/* 手機版微調：稍微縮小避免擋住畫面 */
@media (max-width: 480px) {
    .dm-vip-tag {
        font-size: 10px !important;
        padding: 2px 6px !important;
        margin-right: 3px !important;
    }
}


/* Block 35 儀表板樣式 */
.kuji-dashboard-container {
    max-width: 800px;
    margin: 0 auto;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* 玩家卡片 */
.kuji-player-card {
    background: linear-gradient(135deg, #2b2b2b 0%, #1a1a1a 100%);
    color: #fff;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    position: relative;
    overflow: hidden;
}

/* 不同等級的背景色 (可選) */
.kuji-player-card.vip-normal { border-left: 5px solid #ccc; }
.kuji-player-card.vip-silver { border-left: 5px solid #00d2ff; } /* 撕籤生 */
.kuji-player-card.vip-gold   { border-left: 5px solid #ffd700; } /* 頭號玩家 */
.kuji-player-card.vip-diamond{ border-left: 5px solid #e60012; } /* 傳奇藏家 */

.card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.player-avatar img {
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.2);
}

.player-info {
    flex-grow: 1;
}

.player-name {
    font-size: 1.2rem;
    font-weight: bold;
}

.player-rank-badge {
    display: inline-block;
    background: rgba(255,255,255,0.15);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    margin-top: 5px;
}

.player-balance-box {
    text-align: right;
}

.player-balance-box .value {
    font-size: 1.4rem;
    font-weight: bold;
    color: #ffd700; /* 金幣色 */
}

/* 進度條 */
.vip-progress-section {
    background: rgba(0,0,0,0.2);
    padding: 15px;
    border-radius: 10px;
}

.progress-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: #aaa;
}

.progress-bar-bg {
    height: 12px;
    background: #444;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    margin-bottom: 8px;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #00c6ff, #0072ff);
    border-radius: 6px;
    position: relative;
    transition: width 0.5s ease-in-out;
}

.progress-stats {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #666;
}

/* 數據網格 */
.kuji-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4欄佈局 */
    gap: 15px;
    margin-bottom: 30px;
}

@media (max-width: 768px) {
    .kuji-stats-grid {
        grid-template-columns: repeat(2, 1fr); /* 手機版變2欄 */
    }
}

.stat-box {
    background: #fff;
    border: 1px solid #eee;
    padding: 15px;
    border-radius: 12px;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.stat-box.action-box {
    cursor: pointer;
}

.stat-box.action-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.stat-box.cta-box {
    background: #e60012;
    border-color: #e60012;
    color: #fff;
}

.stat-icon {
    font-size: 1.5rem;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 5px;
}

.stat-box.cta-box .stat-label { color: rgba(255,255,255,0.8); }

.stat-value {
    font-weight: bold;
    font-size: 1.1rem;
}

.unit {
    font-size: 0.8rem;
    font-weight: normal;
}

/* =========================================
   LV0 與 LV1 稱謂樣式定義
   ========================================= */

/* LV0: 隱藏 (雙重保險) */
.dm-vip-tag.vip-none {
    display: none !important;
}

/* LV1: 撕籤生 (灰色/新手風格) */
.dm-vip-tag.vip-normal {
    background: #5f6c7b;          /* 質感灰 */
    color: #fff;
    border: 1px solid #7f8c8d;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    font-weight: bold;
}

/* 手機版微調 */
@media (max-width: 480px) {
    .dm-vip-tag.vip-normal {
        font-size: 9px;
        padding: 1px 4px;
    }
}

/* =========================================
   彈幕與提示文字放大修正 (Block 35 Add-on)
   ========================================= */

/* 1. 針對跑馬燈/簽到名單 (假設是在 Calendar 區塊內) */
/* 這會把捲動的文字變大、變粗 */
.kuji-calendar-wrapper marquee,
.kuji-calendar-wrapper .marquee-content, 
.kuji-checkin-list li,
.scroll-text {
    font-size: 18px !important; /* 預設通常是 14px，這裡加大到 18px */
    font-weight: bold !important;
    line-height: 1.6;
    letter-spacing: 0.5px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* 加一點陰影讓字在深色背景更清楚 */
}

/* 2. 針對「距離下一級還差 xxx」的提示文字 */
/* 讓玩家更清楚看到目標 */
.vip-progress-section .progress-info {
    font-size: 16px !important; /* 稍微加大 */
    font-weight: bold;
    margin-bottom: 10px; /* 增加一點下方留白 */
}

/* 3. (選用) 加大「下一級稱號」的強調色字體 */
.vip-progress-section .progress-info strong {
    font-size: 18px !important;
    color: #00d2ff !important; /* 確保亮藍色 */
}

/* =========================================
   稱謂徽章 (Rank Badge) 美化修正版 (兼容所有舊名稱)
   ========================================= */

   .player-rank-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.2);
    margin-top: 8px;
    transition: all 0.3s ease;
}

/* ----------------------------------
   1. 等級：新進學徒 (Normal)
   ---------------------------------- */
.kuji-player-card.vip-normal .player-rank-badge {
    background: linear-gradient(135deg, #7f8c8d 0%, #bdc3c7 100%) !important;
    color: #fff !important;
}

/* ----------------------------------
   2. 等級：撕籤生 (Silver / Bronze)
   ---------------------------------- */
/* 兼容 vip-silver 和 vip-bronze 兩種名稱 */
.kuji-player-card.vip-silver .player-rank-badge,
.kuji-player-card.vip-bronze .player-rank-badge {
    background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%) !important;
    box-shadow: 0 0 10px rgba(0, 198, 255, 0.5) !important;
    color: #fff !important;
}

/* ----------------------------------
   3. 等級：頭號玩家 (Gold)
   ---------------------------------- */
.kuji-player-card.vip-gold .player-rank-badge {
    background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%) !important;
    box-shadow: 0 0 12px rgba(255, 210, 0, 0.6) !important;
    color: #4a3b00 !important; /* 深色字配金色底 */
    text-shadow: none !important;
    border-color: #ffd700 !important;
}

/* ----------------------------------
   4. 等級：傳奇藏家 (Master) - 霸氣紅
   ---------------------------------- */
   .kuji-player-card.vip-diamond .player-rank-badge,
   .kuji-player-card.vip-master .player-rank-badge {
       background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%) !important;
       box-shadow: 0 0 15px rgba(235, 51, 73, 0.7) !important;
       color: #fff !important;
       border: 1px solid rgba(255,255,255,0.5) !important;
       animation: badgePulse 3s infinite alternate;
   }
   
   
   /* ----------------------------------
      4. 等級：傳奇藏家 (Master) - 霸氣紅 (維持不變)
      ---------------------------------- */
   .kuji-player-card.vip-diamond .player-rank-badge,
   .kuji-player-card.vip-master .player-rank-badge {
       background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%) !important;
       box-shadow: 0 0 15px rgba(235, 51, 73, 0.7) !important;
       color: #fff !important;
       border: 1px solid rgba(255,255,255,0.5) !important;
   }
   
   /* ----------------------------------
      5. 等級：頂峰 (Legend) - 低調奢華 (黑曜石香檳金)
      ---------------------------------- */
   .kuji-player-card.vip-legend .player-rank-badge,
   .kuji-player-card.vip-supreme .player-rank-badge {
       /* 背景：極深色霧面漸層 (像高級信用卡的黑卡) */
       background: linear-gradient(145deg, #000000 0%, #2c3e50 100%) !important;
       
       /* 文字：淡香檳金 (不是土豪金，是淡淡的米金色) */
       color: #F3E5AB !important; 
       
       /* 邊框：極細微的金屬光澤 */
       border: 1px solid rgba(243, 229, 171, 0.3) !important;
       
       /* 陰影：不發光，而是加深陰影讓它看起來更「厚實、立體」 */
       box-shadow: 0 4px 8px rgba(0,0,0,0.6), inset 0 1px 1px rgba(255,255,255,0.1) !important;
       
       /* 字體：稍微拉開間距，增加高級感 */
       letter-spacing: 2px !important;
       font-weight: 500 !important; /* 稍微細一點的字體比較優雅 */
       font-family: sans-serif; /* 用乾淨的無襯線體 */
   }
   
   /* 移除頂峰的呼吸燈動畫 (低調就不需要一直閃) */
   .kuji-player-card.vip-legend .player-rank-badge {
       animation: none !important;
   }
   
   
   /* 頂峰專屬動畫 */
   @keyframes badgePulseLegend {
       0% { transform: scale(1); box-shadow: 0 0 10px rgba(138, 43, 226, 0.6); }
       100% { transform: scale(1.1); box-shadow: 0 0 25px rgba(255, 215, 0, 0.8); } /*最後會閃金光*/
   }

@keyframes badgePulse {
    0% { transform: scale(1); box-shadow: 0 0 10px rgba(235, 51, 73, 0.5); }
    100% { transform: scale(1.05); box-shadow: 0 0 20px rgba(235, 51, 73, 0.9); }
}

/* 滑鼠懸停特效 */
.player-rank-badge:hover {
    transform: scale(1.1) !important;
    filter: brightness(1.2);
}


/* =========================================
   彈幕 VIP 稱謂：低調奢華風格 (Matte Black & Champagne)
   ========================================= */

/* 覆蓋掉原本的 .vip-legend 設定 */
.dm-vip-tag.vip-legend {
    /* 1. 背景：極深色霧面漸層 (黑曜石質感) */
    background: linear-gradient(145deg, #000000 0%, #2c3e50 100%) !important;
    
    /* 2. 文字：淡香檳金 */
    color: #F3E5AB !important; 
    
    /* 3. 邊框：極細微的香檳金光澤 */
    border: 1px solid rgba(243, 229, 171, 0.4) !important;
    
    /* 4. 陰影：不發光，改用深邃陰影增加厚度感 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.8), inset 0 1px 1px rgba(255,255,255,0.1) !important;
    
    /* 5. 字體細節：稍微加寬字距，去除文字陰影保持乾淨 */
    letter-spacing: 1px !important;
    font-weight: 600 !important;
    text-shadow: none !important;
    
    /* 確保沒有多餘的動畫干擾 */
    position: relative;
    overflow: hidden;
}

/* ★ 重要：強制關閉之前的「流光掃過」動畫 */ */
/* 低調奢華不需要在那邊閃來閃去 */
.dm-vip-tag.vip-legend::after {
    display: none !important;
    content: none !important;
    animation: none !important;
}


/* =========================================
   彈幕按鈕智慧定位 (完全貼地版)
   ========================================= */

/* 1. 全站預設狀態：電腦版貼底 */
#kuji-chat-dock {
    z-index: 2147483647 !important;
    bottom: 20px !important; /* 電腦版留一點呼吸空間 */
    left: 20px !important;
    transition: bottom 0.3s ease-in-out !important;
}

/* 2. 電腦版商品頁：稍微抬高 */
body.single-product #kuji-chat-dock {
    bottom: 120px !important; 
}

/* --- 手機版特別調整 (關鍵修改) --- */
@media (max-width: 768px) {
    #kuji-chat-dock {
        /* ★ 這裡改成 10px，讓它幾乎貼齊手機底部，不再飄浮 */
        bottom: 10px !important; 
        left: 10px !important;
    }

    /* 手機版商品頁：遇到購買列時，必須彈很高 */
    /* 您的購買列+餘額條大約佔 180px~200px，所以這裡設 220px */
    body.single-product #kuji-chat-dock {
        bottom: 135px !important; 
    }
}

/* --- 針對 IG/FB 內建瀏覽器的視窗高度修正 --- */

/* 1. 修正全螢幕彈窗 (撕籤、中獎畫面) */
#kuji-result-modal, 
#tear-ticket-modal, 
#daily-bonus-modal,
#ssr-overlay, 
#last-one-lightbox {
    /* 舊版瀏覽器備案 */
    height: 100vh; 
    /* 現代瀏覽器 (解決 IG 網址列伸縮問題) */
    height: 100dvh !important; 
    
    /* 確保不會被手機頂部劉海擋住 */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

/* 2. 修正底部控制面板 (Command Center) 被 Home Bar 遮擋的問題 */
.kuji-command-center {
    /* 增加底部內距，讓按鈕往上浮，避開 iPhone 的黑線 */
    padding-bottom: calc(15px + env(safe-area-inset-bottom)) !important;
}

/* 3. 修正手機版懸浮發言按鈕 (Chat Dock) */
#kuji-chat-dock {
    /* 讓發言按鈕也避開底部安全區，避免太靠近邊緣難點 */
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
}

/* =========================================
   戰利品頁面 UI 修正：避開底部出貨列
   ========================================= */

/* 使用 :has() 偵測：當 body 內含有 .ship-bar (出貨控制列) 時
   強制將 #kuji-chat-dock (發言按鈕) 往上抬
*/

/* 電腦版調整 */
body:has(.ship-bar) #kuji-chat-dock {
    bottom: 90px !important; /* 預留空間給出貨列 */
    transition: bottom 0.3s ease;
}

/* 手機版調整 (因為手機版按鈕比較大，且出貨列可能變兩行) */
@media (max-width: 768px) {
    body:has(.ship-bar) #kuji-chat-dock {
        /* 原本手機版是 bottom: 10px
           出貨列大約佔 60~70px，加上安全距離，設定 110px 
        */
        bottom: 110px !important; 
    }
}

/* =========================================
   戰利品頁面 UI 修正：避開底部出貨列
   ========================================= */

/* 使用 :has() 偵測：當 body 內含有 .ship-bar (出貨控制列) 時
   強制將 #kuji-chat-dock (發言按鈕) 往上抬
*/

/* 電腦版調整 */
body:has(.ship-bar) #kuji-chat-dock {
    bottom: 90px !important; /* 預留空間給出貨列 */
    transition: bottom 0.3s ease;
}

/* 手機版調整 (因為手機版按鈕比較大，且出貨列可能變兩行) */
@media (max-width: 768px) {
    body:has(.ship-bar) #kuji-chat-dock {
        /* 原本手機版是 bottom: 10px
           出貨列大約佔 60~70px，加上安全距離，設定 110px 
        */
        bottom: 110px !important; 
    }
}

/* ==========================================================================
   84. 我的羈絆名單樣式 (前端)
   ========================================================================== */
   .kuji-referral-box {
    background: #1a1a1a;
    border: 2px solid #444;
    border-radius: 12px;
    padding: 20px;
    margin-top: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    font-family: 'Noto Sans TC', sans-serif;
}

.referral-header {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 900;
    border-bottom: 2px solid #e60012; /* 紅色底線呼應羈絆 */
    padding-bottom: 10px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.referral-icon { margin-right: 8px; font-size: 1.2rem; }

/* 列表容器 */
.referral-list-container {
    max-height: 300px;
    overflow-y: auto;
    padding-right: 5px;
    /* 自訂捲軸樣式 */
    scrollbar-width: thin;
    scrollbar-color: #444 #1a1a1a;
}

.referral-list-container::-webkit-scrollbar { width: 6px; }
.referral-list-container::-webkit-scrollbar-track { background: #1a1a1a; }
.referral-list-container::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }

/* 單一項目 */
.referral-item {
    display: flex;
    align-items: center;
    background: #2b2b2b;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 8px;
    transition: transform 0.2s;
}

.referral-item:hover {
    transform: translateX(5px);
    border-color: #666;
    background: #333;
}

/* 頭像 */
.ref-avatar img {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    border: 2px solid #555;
    margin-right: 12px;
    display: block;
}

/* 中間資訊 */
.ref-info { flex: 1; }

.ref-name {
    color: #fff;
    font-weight: bold;
    font-size: 0.95rem;
}

.ref-id {
    color: #666;
    font-size: 0.8rem;
    margin-left: 5px;
    font-weight: normal;
}

.ref-date {
    color: #888;
    font-size: 0.8rem;
    margin-top: 2px;
}

/* 右側徽章 */
.ref-badge { text-align: right; }

/* 空狀態 */
.referral-empty {
    text-align: center;
    color: #666;
    padding: 30px;
    border: 2px dashed #333;
    border-radius: 8px;
}
/* ==========================================================================
   84. 我的羈絆名單樣式 (含紅包牆)
   ========================================================================== */
   .kuji-referral-box {
    background: #1a1a1a;
    border: 2px solid #444;
    border-radius: 12px;
    padding: 0; /* 移除內距，讓頁籤貼邊 */
    margin-top: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    font-family: 'Noto Sans TC', sans-serif;
    overflow: hidden;
}

/* 頁籤容器 */
.ref-tabs {
    display: flex;
    background: #2b2b2b;
    border-bottom: 1px solid #444;
}

/* 頁籤按鈕 */
.ref-tab {
    flex: 1;
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    padding: 15px 0 !important;
    color: #888 !important;
    font-weight: bold !important;
    font-size: 14px !important;
    cursor: pointer;
    box-shadow: none !important;
}

/* 激活狀態 */
.ref-tab.active {
    color: #fff !important;
    background: #222 !important;
    border-bottom-color: #e60012 !important; /* 紅色底線 */
}

/* 內容區塊 */
.ref-content {
    padding: 20px;
    animation: fadeIn 0.3s ease;
}

/* 紅包項目樣式 */
.bonus-item {
    display: flex;
    align-items: center;
    background: rgba(230, 0, 18, 0.1); /* 淡紅背景 */
    border: 1px solid rgba(230, 0, 18, 0.3);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 8px;
}

.bonus-icon { font-size: 24px; margin-right: 12px; }

.bonus-info { flex: 1; }
.bonus-desc { color: #fff; font-size: 13px; font-weight: bold; line-height: 1.4; }
.bonus-time { color: #aaa; font-size: 11px; margin-top: 2px; }

.bonus-amount {
    color: #ffd700;
    font-family: 'DotGothic16', sans-serif;
    font-size: 18px;
    font-weight: 900;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
}

/* 其他樣式 (保留之前的) */
.referral-list-container { max-height: 300px; overflow-y: auto; padding-right: 5px; }
.referral-item { display: flex; align-items: center; background: #2b2b2b; border: 1px solid #333; border-radius: 8px; padding: 10px; margin-bottom: 8px; }
.ref-avatar img { border-radius: 50%; width: 40px; height: 40px; border: 2px solid #555; margin-right: 12px; }
.ref-info { flex: 1; }
.ref-name { color: #fff; font-weight: bold; font-size: 0.95rem; }
.ref-date { color: #888; font-size: 0.8rem; margin-top: 2px; }
.referral-empty { text-align: center; color: #666; padding: 30px; border: 2px dashed #333; border-radius: 8px; }


/* ==========================================================================
   85. 歐氣紅包彈窗樣式
   ========================================================================== */
   .bonus-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    z-index: 100000; /* 最高層級 */
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(8px);
    animation: fadeInBonus 0.5s ease-out;
}

.bonus-card {
    background: linear-gradient(135deg, #d32f2f, #b71c1c); /* 紅包紅 */
    width: 90%;
    max-width: 360px;
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
    color: #fff;
    border: 4px solid #ffd700;
    box-shadow: 0 0 50px rgba(255, 215, 0, 0.3);
    position: relative;
    overflow: hidden;
    transform: scale(0.8);
    animation: popInBonus 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* 旋轉的光芒背景 */
.bonus-light-bg {
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: repeating-conic-gradient(from 0deg, rgba(255,255,255,0.1) 0deg 10deg, transparent 10deg 20deg);
    animation: rotateBonusBg 10s linear infinite;
    z-index: 0;
    pointer-events: none;
}

.bonus-icon-wrapper {
    font-size: 80px;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
    animation: floatBonus 2s infinite ease-in-out;
}

.bonus-title {
    font-family: 'DotGothic16', sans-serif !important;
    font-size: 24px !important;
    color: #ffd700 !important;
    margin-bottom: 10px !important;
    text-shadow: 0 2px 0 #8b0000;
    position: relative; z-index: 1;
}

.bonus-desc {
    font-size: 14px;
    color: #ffcccc;
    margin-bottom: 20px;
    line-height: 1.5;
    position: relative; z-index: 1;
}
.bonus-desc b { color: #fff; font-weight: 900; }

.bonus-amount-box {
    background: rgba(0, 0, 0, 0.3);
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 25px;
    font-family: 'DotGothic16', sans-serif;
    font-size: 32px;
    font-weight: 900;
    color: #ffd700;
    border: 2px dashed rgba(255, 215, 0, 0.5);
    position: relative; z-index: 1;
}
.bonus-amount-box .plus { color: #fff; margin-right: 5px; }
.bonus-amount-box .unit { font-size: 16px; color: #fff; }

.bonus-btn {
    background: linear-gradient(to bottom, #ffd700, #ffca28) !important;
    color: #b71c1c !important;
    font-weight: 900 !important;
    font-size: 18px !important;
    padding: 12px 40px !important;
    border-radius: 50px !important;
    border: 2px solid #fff !important;
    box-shadow: 0 5px 0 #e65100 !important;
    cursor: pointer;
    transition: transform 0.1s;
    position: relative; z-index: 1;
    width: 100%;
}
.bonus-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #e65100 !important; }

/* 動畫定義 */
@keyframes fadeInBonus { from { opacity: 0; } to { opacity: 1; } }
@keyframes popInBonus { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes rotateBonusBg { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes floatBonus { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ==========================================================================
   110. 首頁滿版立體橫幅 (Hero Banner - 修復與手機加大版)
   ========================================================================== */
   
   /* 1. 外層容器 */
   .kuji-hero-section {
    width: 100%;
    margin-bottom: 20px; 
    padding: 0;          
    overflow: hidden;
    position: relative;
    background: transparent;
    z-index: 10;
}

/* 2. Swiper 本體 */
.kuji-hero-swiper {
    width: 100%;
    padding-bottom: 30px !important; 
    overflow: visible !important;
}

/* 3. 單張卡片 (Slide) - 電腦版預設 */
.kuji-hero-swiper .swiper-slide {
    width: 70%; 
    transition: all 0.5s ease;
    border-radius: 12px;
    position: relative;
    opacity: 0.5; /* 未激活時變淡 */
    filter: blur(2px) grayscale(50%); 
    transform: scale(0.9); 
}

/* 4. 激活狀態 (Slide Active) - 電腦版 */
.kuji-hero-swiper .swiper-slide-active {
    opacity: 1;
    filter: blur(0) grayscale(0);
    transform: scale(1);
    z-index: 20;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* 增加立體陰影 */
}

/* 5. 圖片本體 (★ 關鍵修復：這裡控制圖片不爆版) */
.hero-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: 12px;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
    -webkit-tap-highlight-color: transparent;
}

/* 6. 導航按鈕 (電腦版顯示，手機版會被下方 media query 隱藏或調整) */
.kuji-hero-swiper .swiper-button-next,
.kuji-hero-swiper .swiper-button-prev {
    color: #fff !important;
    width: 60px !important;
    height: 100% !important;
    top: 0 !important;
    margin-top: 0 !important;
    background: transparent;
    transition: all 0.3s;
    opacity: 0; /* 滑鼠沒移過去時隱藏 */
}

.kuji-hero-swiper:hover .swiper-button-next,
.kuji-hero-swiper:hover .swiper-button-prev {
    opacity: 1; /* 滑鼠移入顯示 */
}

/* 按鈕陰影增強文字可讀性 */
.kuji-hero-swiper .swiper-button-next:after,
.kuji-hero-swiper .swiper-button-prev:after {
    font-size: 30px !important;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(0,0,0,0.8);
}

.kuji-hero-swiper .swiper-button-prev { left: 0; background: linear-gradient(to right, rgba(0,0,0,0.5), transparent); }
.kuji-hero-swiper .swiper-button-next { right: 0; background: linear-gradient(to left, rgba(0,0,0,0.5), transparent); }

/* 7. 分頁圓點 */
.kuji-hero-swiper .swiper-pagination-bullet {
    background: #aaa !important; 
    opacity: 0.5;
    width: 6px; height: 6px; 
    margin: 0 4px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.kuji-hero-swiper .swiper-pagination-bullet-active {
    opacity: 1;
    background: #e60012 !important; 
    width: 20px; /* 激活時變長條 */
    border-radius: 10px;
}
.kuji-hero-swiper .swiper-pagination {
    bottom: 0px !important; /* 貼底 */
}

/* =========================================
   📱 手機版專用調整 (加大 + 貼近下方)
   ========================================= */
@media (max-width: 768px) {
    
    /* 1. 容器調整：消除與下方的距離 */
    .kuji-hero-section {
        margin-bottom: 0px !important; 
        margin-top: 5px !important; 
        /* 負邊距：讓下方的內容(如跑馬燈或儲值機)往上吸一點 */
    }

    /* 2. Swiper 內縮 */
    .kuji-hero-swiper {
        padding-bottom: 25px !important; /* 留一點點空間給圓點就好 */
    }

    /* 3. 卡片寬度：加大至 95% (幾乎滿版) */
    .kuji-hero-swiper .swiper-slide {
        width: 95% !important; 
        transform: scale(0.96) !important; /* 旁邊的稍微縮小 */
        opacity: 1 !important; /* 手機版不變淡，保持清晰 */
        filter: none !important;
    }
    
    .kuji-hero-swiper .swiper-slide-active {
        transform: scale(1) !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important;
    }

    /* 4. 圖片比例：變高變大 (4:3) */
    .hero-img {
        height: auto !important;
        border-radius: 8px !important;
    }

    /* 5. 強制拉近下一個區塊 (快速儲值機/教學) */
    /* 透過負 margin 把下方元素往上拉，消除視覺空隙 */
    .arcade-deposit-machine, 
    .arcade-screen-container {
        margin-top: -10px !important; 
        position: relative;
        z-index: 5; 
    }
}

/* =========================================
   104. LINE 登入按鈕美化 (Dopamine Style)
   ========================================= */

/* 分隔線 */
.kuji-social-login-separator {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0 15px 0;
    color: #888;
    font-size: 12px;
}
.kuji-social-login-separator::before,
.kuji-social-login-separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px dashed #ccc;
}
.kuji-social-login-separator span {
    padding: 0 10px;
    font-weight: bold;
}

/* LINE 按鈕本體 - 仿照您的 .kuji-red-btn 風格但改為 LINE 綠 */
.kuji-line-login-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: #06c755 !important; /* LINE 官方綠 */
    color: #fff !important;
    font-family: 'DotGothic16', sans-serif; /* 配合您的像素風 */
    font-size: 16px;
    font-weight: 900;
    padding: 12px 0;
    border-radius: 50px; /* 圓潤風格 */
    text-decoration: none;
    box-shadow: 0 4px 0 #009840, 0 5px 10px rgba(0,0,0,0.2); /* 3D 按鈕效果 */
    transition: all 0.1s;
    border: 2px solid #fff; /* 加個白邊增加層次 */
}

.kuji-line-login-btn:hover {
    background-color: #05b34c !important;
    transform: translateY(-2px);
    color: #fff !important;
}

.kuji-line-login-btn:active {
    transform: translateY(4px); /* 按下效果 */
    box-shadow: 0 0 0 #009840, inset 0 2px 5px rgba(0,0,0,0.3);
}

/* 確保圖片垂直置中 */
.kuji-line-login-btn img {
    vertical-align: middle;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}


/* ==========================================================================
   105. Hash 驗證區修正 (V14 - Grid 加厚防護罩版 - 針對 400+ 抽優化)
   ========================================================================== */

/* 1. 購買按鈕 (Sticky Footer)：維持最上層無敵狀態 */
.kuji-buying-sticky {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 2147483647 !important;
}

/* 2. ★ 網格容器：加厚防護罩 ★ */
#kuji-grid-container,
.kuji-grid {
    /* A. 網格佈局 (保持按鈕是小方塊) */
    display: grid !important;
    gap: 6px !important;
    width: 100% !important;
    
    /* B. ★ 關鍵修正：加倍緩衝區 (針對 463 抽以上) */
    /* 這裡加到 160px，相當於多留了 3-4 排按鈕的空氣牆，絕對夠用 */
    padding-bottom: 160px !important; 
    
    /* C. 外部推擠：把 Hash 區再往下踹 */
    margin-bottom: 60px !important;
}

/* 3. 手機版專用欄位設定 (確保是 8 欄) */
@media (max-width: 768px) {
    #kuji-grid-container,
    .kuji-grid {
        grid-template-columns: repeat(8, 1fr) !important; 
    }
}

/* 4. Hash 驗證區 (.fairness-box) */
.fairness-box {
    /* 確保它是獨立區塊 */
    display: block !important;
    position: relative !important;
    clear: both !important;
    
    /* 樣式優化 */
    width: 94% !important;
    /* 上方再加 40px 的距離，雙重保險 */
    margin: 40px auto 0 auto !important; 
    
    background-color: #ffffff !important;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px !important;
    text-align: center;
    z-index: 5 !important;
}

/* 5. 最外層容器：底部空間 */
.kuji-wrapper {
    display: block !important;
    /* 這裡維持 450px，給紅色按鈕住 */
    padding-bottom: 450px !important; 
    overflow: visible !important;
}

/* 6. 按鈕樣式保險 */
.kuji-btn {
    width: 100% !important; 
    aspect-ratio: 1 / 1 !important; 
    height: auto !important;
}

/* =========================================
   修正：顯示並美化訂單備註欄位
   ========================================= */

/* 1. 確保備註區塊顯示 (修正之前的隱藏設定) */
.woocommerce-additional-fields {
    display: block !important;
    margin-top: 20px;
    background: #fff;
    padding: 15px;
    border-radius: 12px;
    border: 2px solid #eee;
}

/* 2. 自定義標題樣式 (取代原本被隱藏的 H3) */
.woocommerce-additional-fields h3 {
    display: block !important; /* 恢復顯示 */
    font-family: 'DotGothic16', sans-serif !important;
    font-size: 18px !important;
    color: #e60012 !important; /* 多巴胺紅 */
    border-bottom: 2px dashed #ccc;
    padding-bottom: 10px;
    margin-bottom: 15px !important;
}

/* 3. 輸入框美化 */
#order_comments {
    border: 2px solid #333 !important;
    border-radius: 12px !important;
    background-color: #f9f9f9;
    padding: 12px !important;
    font-size: 14px;
    min-height: 80px; /* 高度適中 */
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
    transition: all 0.3s;
}

#order_comments:focus {
    background-color: #fff;
    border-color: #e60012 !important; /* 聚焦時變紅 */
    outline: none;
    box-shadow: 0 0 10px rgba(230, 0, 18, 0.2);
}

/* 手機版微調 */
@media (max-width: 480px) {
    .woocommerce-additional-fields {
        margin-top: 15px;
        padding: 12px;
    }
}

/* ==========================================================================
   🌟 核心修正：大籤數選號盤 (獨立滾動區塊 & 街機風格捲軸)
   ========================================================================== */
   .kuji-grid {
    /* 1. 限制最大高度，開啟垂直滾動 */
    max-height: 480px !important; /* 電腦版高度，可依據你的版面微調 */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    
    /* 2. 確保籤數較少時，按鈕靠上對齊，不會被 Grid 預設屬性硬拉長 */
    align-content: start !important;
    
    /* 3. 增加底色與邊框，讓滾動區塊更像一個獨立的「機台面板」 */
    background: #1a1a1a !important;
    border: 3px solid #333 !important;
    border-radius: 8px !important;
    padding: 15px !important;
    margin-bottom: 25px !important; /* 與下方的 Hash 驗證區拉開安全距離 */
}

/* 📱 針對手機版適配高度 */
@media (max-width: 768px) {
    .kuji-grid {
        /* 使用視窗高度的 55%，確保各種手機尺寸都不會被截斷或太長 */
        max-height: 55vh !important; 
        padding: 10px !important;
    }
}

/* 🕹️ 街機專屬風格捲軸 (Arcade Scrollbar) */
.kuji-grid::-webkit-scrollbar {
    width: 10px; /* 捲軸寬度 */
}
.kuji-grid::-webkit-scrollbar-track {
    background: #111; /* 軌道深色背景 */
    border-left: 1px solid #333; /* 軌道邊線 */
    border-radius: 0 8px 8px 0;
}
.kuji-grid::-webkit-scrollbar-thumb {
    background: #ffd700; /* 預設為像素金 */
    border-radius: 8px;
    border: 2px solid #111; /* 做出內縮的立體感 */
}
.kuji-grid::-webkit-scrollbar-thumb:hover {
    background: #e60012; /* 滑鼠移上去變成法拉利紅 */
}

/* =========================================
   一番賞頁籤 UI (Arcade Pixel Style)
   ========================================= */
.kuji-tabs-container {
    margin: 40px auto;
    width: 100%;
}

/* 頁籤按鈕排列 */
.kuji-tabs-header {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 30px;
    justify-content: center;
}

/* 預設按鈕外觀：RPG 對話框邊框與硬陰影 */
.kuji-tab-btn {
    font-family: 'DotGothic16', sans-serif; /* 像素字體 */
    background-color: #222;
    color: #fff;
    border: 3px solid #555;
    padding: 10px 24px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.1s ease;
    box-shadow: 4px 4px 0px #000; /* 街機風硬陰影 */
    letter-spacing: 2px;
}

/* 滑鼠懸停特效 */
.kuji-tab-btn:hover {
    background-color: #333;
    transform: translate(-2px, -2px); /* 向上浮動 */
    box-shadow: 6px 6px 0px #000;
}

/* 點擊啟動(Active)特效：法拉利紅 + 像素金 */
.kuji-tab-btn.active {
    background-color: #e60012; 
    color: #ffd700; 
    border-color: #ffd700;
    box-shadow: 2px 2px 0px #000;
    transform: translate(2px, 2px); /* 按壓下沉感 */
}

/* 面板切換動畫 */
.kuji-tab-pane {
    display: none; 
    animation: pixelFadeIn 0.3s ease-in-out;
}

.kuji-tab-pane.active {
    display: block; 
}

/* 空白狀態提示 */
.kuji-no-products {
    text-align: center;
    font-family: 'DotGothic16', sans-serif;
    color: #ffd700;
    font-size: 1.5rem;
    padding: 40px;
    border: 4px dashed #444;
    background: #1a1a1a;
}

/* 簡單的淡入浮現動畫 */
@keyframes pixelFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* =========================================
   10-5 一番賞分類頁籤 (Famicom Arcade Button Style)
   ========================================= */
.kuji-arcade-tabs-wrapper {
    margin: 20px 0 40px;
    text-align: center;
    width: 100%;
}

.kuji-arcade-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

/* 街機按鈕容器 (透明背景，只處理定位) */
.arcade-btn {
    background-color: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;
    display: inline-block;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}

/* 街機按鈕本體 (紅白機法拉利紅) */
.arcade-btn .btn-cap {
    display: block;
    font-family: 'DotGothic16', 'Noto Sans TC', sans-serif;
    font-size: 1.1rem;
    font-weight: 900;
    color: #fff;
    background-color: #E60012; /* 經典紅 */
    border: 3px solid #111; /* 粗黑邊框 */
    border-radius: 40px; /* 膠囊狀/圓形感 */
    padding: 12px 28px;
    /* 利用雙層陰影做成立體厚度：第一層是暗紅色底座，第二層是黑色落影 */
    box-shadow: 0 6px 0 #8B0000, 0 10px 0 #111; 
    transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 1px;
    text-shadow: 1px 1px 0px #000;
}

/* 滑鼠懸停：稍微下壓 */
.arcade-btn:hover .btn-cap {
    transform: translateY(2px);
    box-shadow: 0 4px 0 #8B0000, 0 8px 0 #111;
}

/* 點擊啟動 (Active) 特效：完全壓平，字體發光變金 */
.arcade-btn.active .btn-cap {
    transform: translateY(6px); /* 往下壓到底 */
    box-shadow: 0 0px 0 #8B0000, 0 2px 0 #111; /* 底座消失 */
    background-color: #FFD700; /* 變成超級瑪利歐金幣色 */
    color: #E60012; /* 字體反轉成紅色 */
    border-color: #E60012;
    text-shadow: none;
}

/* 商品卡片切換時的淡入動畫 */
@keyframes arcadeFadeIn {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}
/* ══════════════════════════════════════════════════
   CLS-FIX: reserve space before JS/images load
   ══════════════════════════════════════════════════ */
.kuji-hero-section {
    aspect-ratio: 16 / 9;
    max-height: 60vh;
    contain: layout;
}
.kuji-hero-swiper {
    aspect-ratio: 16 / 9;
}
.tutorial-img {
    aspect-ratio: 16 / 9;
}
@media (max-width: 768px) {
    .kuji-hero-section {
        aspect-ratio: 4 / 3;
        max-height: none;
    }
    .kuji-hero-swiper {
        aspect-ratio: 4 / 3;
    }
    .tutorial-img {
        aspect-ratio: 4 / 3;
    }
}