/* =========================================
   🃏 瘋仁谷 Pokemon 閃咭特效 (tcg-cards.css)
   ========================================= */
.tcg-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    max-width: 950px; 
    margin: 0 auto;
    gap: 50px; 
    padding: 40px 20px;
    perspective: 1000px;
}

.tcg-card {
    position: relative;
    background: #FDFBF7;
    border: 10px solid #E8C396; 
    border-radius: 18px; 
    overflow: hidden;
    padding: 20px; 
    aspect-ratio: 63 / 88; 
    display: flex;
    flex-direction: column;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s;
    cursor: pointer;
}

.tcg-foil {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: linear-gradient(125deg, transparent 20%, rgba(255,255,255,0.6) 30%, rgba(255,215,0,0.3) 40%, rgba(255,105,180,0.2) 50%, transparent 60%);
    background-size: 200% 200%;
    background-position: 100% 100%;
    mix-blend-mode: color-dodge; 
    opacity: 0;
    transition: opacity 0.3s, background-position 0.6s ease;
    pointer-events: none; 
}

.tcg-card:hover {
    transform: translateY(-5px); /* 只保留輕微向上浮起，取消所有 rotate 傾斜 */
    box-shadow: 0 25px 40px rgba(0,0,0,0.12); /* 陰影改為垂直向下，唔再側埋一邊 */
    border-color: #FFD700; 
}

.tcg-card:hover .tcg-foil {
    opacity: 1;
    background-position: 0% 0%; 
}

/* --- 頂部標籤 --- */
.tcg-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #EEE;
    padding-bottom: 8px;
    margin-bottom: 15px;
}

.tcg-race {
    background: var(--primary-green);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.9rem; /* 放大 */
    font-weight: bold;
}

.tcg-name {
    margin: 0;
    font-size: 1.6rem; /* 放大 */
    color: var(--text-dark);
}

.tcg-hp {
    color: #D32F2F;
    font-weight: bold;
    font-family: monospace;
    font-size: 1.2rem; /* 放大 */
}

/* --- 相片與絕技 Overlay --- */
.tcg-image-box {
    position: relative;
    flex-shrink: 0;
    height: 30%; 
    min-height: 120px;
    background: radial-gradient(circle, #FFF, #F0F0F0);
    border: 3px solid #CCC;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.05);
}

.tcg-image-box img {
    height: 90%; 
    object-fit: contain;
}

.ultimate-overlay {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: rgba(0, 0, 0, 0.75); 
    color: #FFF;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.85rem; /* 放大 */
    font-weight: bold;
    backdrop-filter: blur(2px); 
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* --- 內容區 (解決 Empty Space 核心) --- */
.tcg-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 唔再用 space-between，改由上方開始順住排 */
    gap: 8px; /* 統一元素之間嘅呼吸空間 */

    overflow-y: auto; /* 當內容超出時，自動出現上下捲軸 */
    min-height: 0; /* 確保 Flexbox 捲軸正常運作嘅關鍵 */
    padding-right: 5px; /* 預留少少位畀 Scrollbar，等啲字唔會貼住條邊 */
}

/* ✨ 自訂 Scrollbar 樣式 (令捲軸睇落有高級感，配合咭片風格) */
.tcg-body::-webkit-scrollbar {
    width: 6px; /* 捲軸闊度 (幼身啲靚啲) */
}

.tcg-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.03); /* 捲軸軌道底色 (極淺灰) */
    border-radius: 10px;
}

.tcg-body::-webkit-scrollbar-thumb {
    background: #E8C396; /* 捲軸本體顏色 (配合你張咭嘅木系邊框) */
    border-radius: 10px;
}

.tcg-body::-webkit-scrollbar-thumb:hover {
    background: var(--accent-wood); /* 滑鼠指住時變深色 */
}

/* --- 內容區 (解決 Empty Space 核心) --- */
.tcg-flavor {
    font-style: italic; 
    font-size: 1rem; /* ✨ 放大字體 (原本係 0.85rem) */
    color: #444; /* 將顏色稍微加深少少，對比度高啲易睇啲 */
    padding: 6px 10px; /* 順便加大少少邊距，等啲字冇咁逼 */
    background: rgba(0,0,0,0.03); 
    border-radius: 5px; 
    border-left: 3px solid var(--accent-wood);
    line-height: 1.3; /* 行距稍微拉闊，提升閱讀體驗 */
    margin: 0; 
}

/* 技能與魔法字體放大 */
.tcg-stat-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem; /* 放大 */
    font-weight: bold;
    color: #444;
    margin-bottom: 4px;
}

/* --- 魔法 Buff 解說區 (字體放大 + 置中排版) --- */
.tcg-buff {
    padding-top: 2px;
    text-align: center; /* 內容置中，更有大絕招氣勢 */
}

.magic-label {
    color: #7b1fa2; /* 保持專屬嘅紫色魔法感 */
    font-weight: bold;
    font-size: 1rem; /* ✨ 字體放大 */
    margin-right: 4px;
}

.tcg-buff-content {
    font-size: 1rem; /* ✨ 內容字體同步放大 (原本係 0.85rem) */
    line-height: 1.5;
    color: #333; /* 顏色稍微加深，提高對比度 */
}

/* --- 內容區 --- */
.tcg-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 15px; /* 加大少少行距，令排版更似真咭 */
}

/* (Flavor text 等等保持不變...) */

/* ✨ 實體 TCG 技能排版 ✨ */
.tcg-stats {
    display: flex;
    flex-direction: column;
    gap: 8px; /* 兩個技能之間嘅距離 */
    padding-top: 5px;
}

.tcg-skill-row {
    display: flex;
    align-items: center;
    padding-bottom: 6px;
}

.tcg-skill-row:last-child {
    border-bottom: none; /* 最後一個技能唔要底線 */
    padding-bottom: 0;
}

/* 能量星星區 (靠左) */
.tcg-energy {
    display: flex;
    gap: 2px;
    width: 60px; /* 固定寬度，確保所有技能名都對齊 */
}

.energy-star {
    font-size: 0.9rem; /* 控制星星大細 */
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.2)); /* 加少少立體陰影 */
}

/* 技能名稱 (置中/靠左延展) */
.tcg-skill-name {
    flex-grow: 1;
    font-size: 1.05rem; /* 字體稍微放大 */
    font-weight: bold;
    color: #333;
    text-align: left;
    padding-left: 10px;
}

/* 傷害數值 (靠右) */
.tcg-skill-damage {
    font-size: 1.15rem;
    font-weight: bold;
    color: #333;
    width: 40px; /* 固定寬度確保靠右對齊 */
    text-align: right;
}

/* 📱 手機版急救包 (極致偷位版) */
@media (max-width: 768px) {

    #focus-section {
        display: none !important;
    }

    /* 預留：將來如果手機版開返 Focus 咭，都繼續隱藏產品區 */
    .focus-products-area {
        display: none !important;
    }

    /* 👇 新增：手機版自動隱藏「點擊查看」提示句 👇 */
    .click-hint {
        display: none !important;
    }

    .tcg-grid {
        grid-template-columns: 1fr;
        max-width: 400px; /* 限制最大寬度，確保比例唔會走樣 */
        gap: 30px;
        padding: 20px 10px;
    }

    .tcg-card {
        padding: 12px;
        border-width: 6px;
    }

    /* --- 頂部 Header 終極修復 --- */
    .tcg-header {
        margin-bottom: 10px;
        padding-bottom: 6px;
    }

    .tcg-hp, .tcg-race {
        white-space: nowrap;
        flex-shrink: 0;
    }

    .tcg-race {
        font-size: 0.75rem;
        padding: 3px 6px;
    }

    .tcg-hp {
        font-size: 1.05rem; /* HP 字體微調 */
    }

    .tcg-name {
        flex-grow: 1;
        text-align: center;
        margin: 0 5px; /* 縮減左右 Margin，偷位俾長名字 */
        font-size: 1.15rem; /* 字體再縮細少少 */
        white-space: nowrap; /* 🚫 絕對唔准斷行 */
        overflow: hidden;
        text-overflow: ellipsis; /* 如果真係太長，會變 "..." 確保唔會爆版 */
    }

    /* --- 圖片與故事區 --- */
    .tcg-image-box {
        height: 32%; /* 限制相片佔比 */
        min-height: 120px;
        margin-bottom: 10px;
    }

    .tcg-flavor {
        font-size: 0.9rem;
        padding: 6px 8px;
        margin-bottom: 5px; /* 縮減底部空間 */
    }

    /* --- 技能區微調，適應窄螢幕 --- */
    .tcg-stats {
        gap: 6px;
    }

    .tcg-skill-name {
        font-size: 0.95rem; /* 縮細技能字體 */
        padding-left: 5px;
    }

    .tcg-skill-damage {
        font-size: 1.05rem;
    }

    .energy-star {
        font-size: 0.8rem; /* 星星縮細，排得再密啲 */
    }

    /* 手機版隱藏 Buff */
    .tcg-buff {
        display: none;
    }
}

/* =========================================
   🌟 置中放大咭 (Focus Card)
   ========================================= */
.focus-card {
    width: 100%;
    max-width: 500px; /* 大約係 Grid 咭嘅一倍 Size */
    margin: 0; /* 清除不必要嘅外距 */
    cursor: default; /* Focus 咭唔使再 Click */
}

/* 將 Focus 咭裡面嘅字體整體升級放大 */
.focus-card .tcg-race { font-size: 1.1rem; padding: 6px 14px; }
.focus-card .tcg-name { font-size: 2.2rem; }
.focus-card .tcg-hp { font-size: 1.5rem; }
.focus-card .ultimate-overlay { font-size: 1.1rem; padding: 6px 14px; }
.focus-card .tcg-flavor { font-size: 1.25rem; line-height: 1.45; }
.focus-card .tcg-skill-name { font-size: 1.3rem; }
.focus-card .tcg-skill-damage { font-size: 1.4rem; }
.focus-card .magic-label { font-size: 1.2rem; }
.focus-card .tcg-buff-content { font-size: 1.2rem; }

/* =========================================
   🌟 Focus Card 專屬左右排版 (Split Layout)
   ========================================= */
.focus-split-layout {
    display: flex;
    flex-direction: row;
    align-items: center; /* 確保左右兩邊內容置中對齊 */
    gap: 20px;
    margin-bottom: 8px;
}

.focus-left {
    width: 45%; /* 左邊相片佔約一半少啲，留多啲位畀右邊啲字 */
}

.focus-left .tcg-image-box {
    height: 180px; /* 固定高度，令張咭睇落去好工整 */
}

.focus-right {
    width: 55%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 3. 新增種族標籤樣式 */
.focus-race {
    color: var(--accent-wood);
    font-weight: bold;
    font-size: 1.5rem;
    margin-bottom: 0px;
}

/* 將絕技按鈕獨立抽出嚟設計 */
.focus-ultimate {
    background: rgba(0, 0, 0, 0.8);
    color: #FFF;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 1.15rem;
    font-weight: bold;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    padding: 6px 12px;
}

.focus-right .tcg-stats {
    padding-top: 0; /* 移除多餘頂部空間 */
}

/* 4. 針對 Focus Card 嘅 Bio (Flavor) 收緊 Padding */
.focus-card .tcg-flavor {
    padding: 6px 10px; /* 縮減上下 padding，令個框冇咁厚 */
    font-size: 1.15rem; /* 字體稍微調返細少少，原本 1.25rem 可能太大 */
    line-height: 1.35;
}

.focus-card .tcg-body {
    gap: 8px; 
}

/* =========================================
   🌟 Focus Card 專屬：基因與魔法屬性區
   ========================================= */
.focus-traits-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: rgba(255, 255, 255, 0.5); /* 半透明底色，更有層次 */
    border: 1px solid #EAEAEA;
    padding: 15px;
    border-radius: 10px;
    margin-top: 5px;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.02);
}

.focus-trait-item {
    font-size: 1.15rem;
    line-height: 1.5;
    color: #333;
}

.gene-label {
    color: var(--primary-green); /* 用綠色代表健康真實嘅基因 */
    display: block;
    margin-bottom: 4px;
    font-size: 1.2rem;
}

.magic-label {
    color: #7b1fa2; /* 保持紫色魔法感 */
    display: block;
    margin-bottom: 4px;
    font-size: 1.2rem;
}

.trait-content {
    color: #444;
    padding-left: 28px; /* 稍微縮排，令排版更清晰 */
}

/* 修正後台輸入嘅 ul/li 列表預設間距 */
.trait-content ul {
    margin: 5px 0;
    padding-left: 20px;
}
.trait-content li {
    margin-bottom: 5px;
}

/* =========================================
   🌟 Focus Card 外部：主理產品展示區
   ========================================= */
.focus-products-area {
    margin-top: 20px;
    width: 100%;
    text-align: center;
}

.products-title {
    margin: 0 0 12px 0;
    color: #666;
    font-size: 1.15rem;
    font-weight: bold;
}

.focus-product-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.focus-product-item {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--text-dark);
    background: #FFF;
    padding: 6px 15px 6px 6px; 
    border-radius: 30px; 
    border: 1px solid #CCC; 
    transition: all 0.2s ease-in-out;
    font-weight: bold;
    font-size: 0.95rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.focus-product-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 12px rgba(0,0,0,0.1);
    border-color: var(--accent-wood); 
}

.focus-product-item img {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid #EEE;
}