/* style.css - 建構主義與 RWD 響應式樣式表 */
:root {
    --bg: #F4F4F4;
    --black: #000000;
    --white: #FFFFFF;
    --red: #E53935;
    --gray: #888888;
}

/* 全域重置與強制粗體 */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Arial Black', Impact, sans-serif; text-transform: uppercase; border-radius: 0 !important; }
body { background-color: var(--bg); color: var(--black); line-height: 1.5; overflow-x: hidden; font-weight: bold; }
body * { font-weight: bold !important; } /* 強制所有元素繼承粗體 */
h1, h2, h3, h4, .hero-title, .badge-alert, .badge-new, .alert-pill { font-weight: 900 !important; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* =========================================
   全站文字排版優化 (完美左右對齊)
   ========================================= */
p, li {
    text-align: justify !important; 
    text-justify: inter-ideograph !important; 
    word-break: break-word !important; 
}


/* 基礎元件：按鈕與輸入框 */
.btn {
    display: inline-block; padding: 12px 24px; font-size: 1rem; letter-spacing: 2px;
    border: 4px solid var(--black); cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; text-align: center;
}
.btn-primary { background: var(--red); color: var(--white); box-shadow: 6px 6px 0 0 var(--black); }
.btn-dark { background: var(--black); color: var(--white); box-shadow: 6px 6px 0 0 var(--red); }
.btn:hover { transform: translate(2px, -2px); box-shadow: 4px 8px 0 0 var(--black); }
.btn-dark:hover { box-shadow: 4px 8px 0 0 var(--red); }

.input-field { width: 100%; padding: 12px; border: 4px solid var(--black); background: var(--white); color: var(--black); box-shadow: 4px 4px 0 0 var(--black); margin-bottom: 24px; outline: none; font-size: 1rem; }
.input-field:focus { background: #E0E0E0; transform: translate(-2px, -2px); box-shadow: 6px 6px 0 0 var(--red); }

/* 導覽列 (預設電腦版) */
.navbar {
    display: flex; justify-content: space-between; align-items: center; padding: 16px 32px;
    background: var(--white); border-bottom: 8px solid var(--black); position: sticky; top: 0; z-index: 100;
    flex-wrap: wrap; 
}
.logo { font-size: 2rem; display: flex; align-items: center; letter-spacing: -2px; }
.logo span { color: var(--red); }
.logo-icon { 
    width: 48px; 
    height: 48px; 
    margin-right: 12px; 
    display: block; /* 關鍵：消除圖片下方的預設神祕空白，讓它跟文字完美置中對齊 */
    object-fit: cover; 
    background-color: var(--black); /* 關鍵：圖片還沒載入出來前，先用純黑底色墊著，就不會破綻百出了 */
    box-shadow: 4px 4px 0 0 var(--red); /* 稍微收斂一點點陰影，讓視覺更緊湊 */
}
.nav-links { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.nav-links a { letter-spacing: 2px; padding-bottom: 4px; transition: color 0.2s; white-space: nowrap; }
.nav-links a:hover { color: var(--red); border-bottom: 4px solid var(--red); }
.nav-links a.active { color: var(--red); border-bottom: 4px solid var(--red); }

/* 首頁橫幅 Hero */
.hero { position: relative; min-height: 50vh; display: flex; align-items: center; border-bottom: 8px solid var(--black); background: var(--white); overflow: hidden; }
.hero-content { position: relative; z-index: 10; padding: 64px; width: 100%; }
.hero-title { font-size: 5rem; letter-spacing: -2px; line-height: 1.1; transform: skewX(-4deg); }
.hero-title span.w { background: var(--white); padding: 0 10px; display: inline-block; border: 4px solid var(--black); }
.hero-title span.r { background: var(--black); color: var(--red); padding: 0 10px; display: inline-block; margin-top: 10px; }

/* 網格系統 (預設電腦版) */
.section-title { font-size: 3rem; border-bottom: 4px solid var(--black); display: inline-block; margin: 64px 32px 32px; }
.grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 48px; padding: 0 32px; max-width: 1400px; margin: 0 auto; }
.card { border: 4px solid var(--black); background: var(--white); box-shadow: 12px 12px 0 0 var(--red); transition: box-shadow 0.3s; display: flex; flex-direction: column; }
.card:hover { box-shadow: 16px 16px 0 0 var(--black); }
.card-img { height: 250px; background: var(--black); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; color: white; font-size: 2rem;}
.card-tag { position: absolute; top: 0; left: 0; background: var(--red); color: var(--white); padding: 4px 12px; font-size: 0.8rem; z-index: 2; border-right: 4px solid var(--black); border-bottom: 4px solid var(--black); }
.card-body { padding: 32px; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; }

/* 頁尾 */
.footer { background: var(--black); color: var(--white); padding: 48px; border-top: 8px solid var(--red); display: flex; justify-content: space-between; margin-top: 64px; }

/* =========================================
   會員認證區塊 (登入 / 註冊) - 電腦版預設
   ========================================= */
.auth-container {
    min-height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 64px 32px;
}
.auth-box {
    width: 100%;
    max-width: 500px; 
    background: var(--white);
    border: 8px solid var(--black);
    padding: 48px;
    box-shadow: 20px 20px 0 0 var(--red); 
}

/* =========================================
   遊戲專區圖片背景 (Image Background)
   ========================================= */

/* 第五人格專屬背景 (搭配深黑與微紅漸層遮罩，強化詭譎與硬派感) */
.bg-identityv {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(229, 57, 53, 0.4)), url('identityv.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--white);
}

/* 光遇專屬背景 (搭配深黑漸層遮罩，保留空靈感同時確保文字對比度) */
.bg-sky {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)), url('sky.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--white);
}

/* =========================================
   手機版 RWD 響應式設定 (小於 768px 時觸發)
   ========================================= */
@media (max-width: 768px) {
    .navbar { flex-direction: column; padding: 16px; gap: 16px; }
    .nav-links { width: 100%; justify-content: center; gap: 12px; }
    .nav-links a { font-size: 0.9rem; }

    .hero { min-height: auto; padding: 16px 0; }
    .hero-content { padding: 32px 24px !important; width: 100%; } 
    .js-parallax-layer { transform: none !important; }
    .js-parallax-layer[style*="clip-path"] { display: none !important; }

    .hero-title { font-size: 2.5rem; }
    .hero-title span.r { margin-top: 4px; }
    
    .section-title { font-size: 2rem; margin: 32px 16px 16px; }
    .grid-container { grid-template-columns: 1fr; padding: 0 16px; gap: 24px; }
    .card-body { padding: 24px; }

    main > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .footer { flex-direction: column; gap: 24px; padding: 32px 16px; }
    .footer > div { text-align: left !important; }

    h1[style*="font-size: 4rem"] { font-size: 2.5rem !important; }

    .auth-container { padding: 32px 16px !important; overflow-x: hidden; }
    .auth-box { 
        padding: 24px !important; border-width: 4px !important; 
        width: calc(100% - 12px) !important; margin: 0 auto !important;
        box-shadow: 8px 8px 0 0 var(--red) !important; 
    }
    .auth-box h2 { font-size: 1.8rem !important; margin-bottom: 24px !important; }
    .auth-box .input-field { width: calc(100% - 6px) !important; }

    /* =========================================
       🔥 終極版修復：卡片式排版與 JS 摺疊衝突 (防貼邊版)
       ========================================= */
       
    /* 1. 隱藏主表格的表頭 */
    div[style*="overflow-x: auto"] > table > thead { 
        display: none !important; 
    }
    
    /* 2. 將表格基礎結構轉為區塊 */
    div[style*="overflow-x: auto"] > table,
    div[style*="overflow-x: auto"] > table > tbody,
    div[style*="overflow-x: auto"] > table > tbody > tr > td { 
        display: block !important; 
        width: 100% !important; 
    }
    
    /* 3. 只有「不是展開面板」的資料列，才強制變為卡片區塊 */
    div[style*="overflow-x: auto"] > table > tbody > tr:not([id^="detail-"]) {
        display: block !important;
        border: 4px solid var(--black);
        margin-bottom: 16px;
        background: var(--white) !important;
        box-shadow: 6px 6px 0 0 var(--black);
        padding: 8px 16px;
    }
    
    /* 4. 針對「展開面板」，尊重 JavaScript 的隱藏狀態 */
    tr[id^="detail-"][style*="display: none"] {
        display: none !important; 
    }
    tr[id^="detail-"]:not([style*="display: none"]) {
        display: block !important; 
    }

    /* 5. 儲存格內容上下堆疊，加上 :not 避免誤傷展開面板 */
    div[style*="overflow-x: auto"] > table > tbody > tr:not([id^="detail-"]) > td {
        border-bottom: 1px solid #ddd;
        padding: 12px 0 !important; /* 這裡的左右 0 就是導致貼邊的兇手，已用 :not 排除 */
        text-align: left !important;
        white-space: normal !important;
        word-break: break-all;
    }
    div[style*="overflow-x: auto"] > table > tbody > tr:not([id^="detail-"]) > td:last-child {
        border-bottom: none;
    }
    
    /* 6. 修正按鈕與表單在主卡片內的滿版比例 (加入 :not) */
    div[style*="overflow-x: auto"] > table > tbody > tr:not([id^="detail-"]) > td form { 
        display: flex; gap: 8px; width: 100%; 
    }
    div[style*="overflow-x: auto"] > table > tbody > tr:not([id^="detail-"]) > td select, 
    div[style*="overflow-x: auto"] > table > tbody > tr:not([id^="detail-"]) > td input { 
        flex: 1; 
    }
    div[style*="overflow-x: auto"] > table > tbody > tr:not([id^="detail-"]) > td > button { 
        display: block; width: 100%; padding: 12px; text-align: center; margin-top: 4px; font-weight: bold;
    }
    div[style*="overflow-x: auto"] > table > tbody > tr:not([id^="detail-"]) > td > div {
        flex-direction: column !important; width: 100%;
    }
    div[style*="overflow-x: auto"] > table > tbody > tr:not([id^="detail-"]) > td > div a,
    div[style*="overflow-x: auto"] > table > tbody > tr:not([id^="detail-"]) > td > div button {
        width: 100%; text-align: center; padding: 12px !important; box-sizing: border-box;
    }

    /* 7. 展開面板的無縫接合外觀 (提高 CSS 權重，鎖死安全距離) */
    div[style*="overflow-x: auto"] > table > tbody > tr[id^="detail-"] {
        border: 4px solid var(--black) !important;
        border-top: none !important;
        margin-top: -16px !important; 
        margin-bottom: 24px !important;
        box-shadow: 6px 6px 0 0 var(--black) !important;
        background: #EEE !important;
    }
    div[style*="overflow-x: auto"] > table > tbody > tr[id^="detail-"] > td { 
        padding: 16px !important; /* 強制加回左右 16px 的舒適留白 */
        border: none !important; 
    }
    
    /* 8. 解決 UID 等超長文字破版 */
    [id^="detail-"] span {
        white-space: normal !important;
        word-break: break-all !important; 
        display: inline-block !important;
        line-height: 1.5 !important;
        margin-top: 4px;
    }
    
    /* 9. 購物明細與對話框改為上下疊加 */
    tr[id^="detail-"] > td > div { 
        flex-direction: column !important; 
        gap: 16px; 
    }
    tr[id^="detail-"] > td > div > div {
        min-width: 100% !important;
        flex: none !important; 
        margin-bottom: 0;
    }

    /* 10. 前台買家中心：黑色標頭排版優化 */
    div[onclick^="toggleOrder"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px;
    }
    div[onclick^="toggleOrder"] > div {
        width: 100%; display: flex; justify-content: space-between; align-items: center;
    }
}