/* ==========================================================================
   1. 全局基礎設定
   ========================================================================== */
body { 
    font-family: 'Noto Sans TC', system-ui, sans-serif; 
    background-color: #ffffff;
    color: #111827;
}

/* ==========================================================================
   2. Tier List 主頁面專屬圖片樣式
   ========================================================================== */
.tier-img {
    width: 100%;
    max-width: 100px;         
    aspect-ratio: 3 / 3;      
    object-fit: cover;        
    border: 4px solid #fff;   
    border-radius: 12px;      
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
    transition: transform 0.3s ease; 
}

.tier-img:hover { 
    transform: scale(1.12);   
    cursor: pointer;          
}

/* ==========================================================================
   3. 全部系列頁面專屬圖片樣式
   ========================================================================== */
.series-img {
    /* ----------------------------------------------------
       💡 在這裡調整「全部系列」頁面的圖片大小
       ---------------------------------------------------- */
    width: 100%;             /* 寬度：預設撐滿外層容器格子 */
    max-width: 20000px;        /* 最大寬度：你可以把 140px 改大（例如 180px）或改小（例如 110px） */
    
    /* 圖片高度與外觀設定 */
    aspect-ratio: 10/4;       /* 寬高比例：9:4。若想改成正方形可改為 1/1，若想改成卡牌比例可改為 3/4 */
    object-fit: cover;     /* 縮放模式：contain 確保整張圖完整顯示。若改為 cover 則會填滿並自動裁切 */
    
    /* 為圖片（或容器）加上一圈白色的實線外框 */
    border: 2px solid #fff;   
    border-radius: 12px;      
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
}

/* 被選中時的外框樣式 */
.series-img.selected {
    border-color: #ef4444;    /* 紅色外框表示選中 */
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.4);
    transform: scale(1.05);
}

.series-img:hover { 
    transform: translateY(-5px) scale(1.05); 
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
    cursor: pointer;          
}

/* ==========================================================================
   4. 下方動態展開詳細面板與精緻外框
   ========================================================================== */
/* 展開的詳細面板 */
.detail-panel {
    grid-column: 1 / -1;      /* 橫跨網格整行 */
    background-color: #f9fafb;
    border: 2px solid #f3f4f6;
    border-radius: 20px;
    padding: 24px;
    margin-top: 10px;
    margin-bottom: 20px;
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    display: none;            /* 預設隱藏，由 JS 控制顯示 */
    animation: fadeInDown 0.3s ease-out;
}

/* 面板展開動畫 */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 展開面板內的大圖精緻外框與陰影 */
.highlight-border {
    border: 6px solid #ffffff;  /* 寬白邊 */
    border-radius: 16px;       /* 圓角 */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 
                0 10px 10px -5px rgba(0, 0, 0, 0.04),
                0 0 0 2px #ef4444; /* 紅色細線描邊 */
    transition: transform 0.2s ease;
}

.highlight-border:hover {
    transform: scale(1.02);
}

/* ==========================================================================
   5. 其他共用元件樣式
   ========================================================================== */
.filter-btn {
    width: 52px;
    height: 52px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.right-watermark {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.2;
    background-image: url('UATier0/image.png'); 
    background-repeat: no-repeat;
    background-position: right 20px bottom 20px;
    background-size: 100px;
}