/* --- ================================ --- */
/* --- 4. 孵蛋列表 (App 4) 樣式 --- */
/* --- ================================ --- */
#eggs-app .page-content {
    max-width: 960px;
    margin: 0 auto;
}
#eggs-app h1, #eggs-app h2 {
    font-family: Lato, "Helvetica Neue", Arial, Helvetica, sans-serif;
}
#eggs-app hr {
    border: 0;
    border-top: 1px solid #dee2e6;
    margin: 2rem 0;
}
#eggs-app .egg-list-flex {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0 -8px;
    justify-content: center;
}
#eggs-app .egg-list-item {
    text-align: center;
    width: 120px;
    margin: 0 8px 16px;
    position: relative;
}
#eggs-app .egg-list-img {
    border-radius: 50%;
    margin: 0 auto 8px;
    width: 104px;
    height: 104px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
}
#eggs-app .egg2km {
    background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), url('https://assets.dittobase.com/go/items/egg-2km.png');
    background-size: cover;
}
#eggs-app .egg5km {
    background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), url('https://assets.dittobase.com/go/items/egg-5km.png');
    background-size: cover;
}
#eggs-app .egg7km {
    background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), url('https://assets.dittobase.com/go/items/egg-7km.png');
    background-size: cover;
}
#eggs-app .egg10km {
    background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), url('https://assets.dittobase.com/go/items/egg-10km.png');
    background-size: cover;
}
#eggs-app .egg12km {
    background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), url('https://assets.dittobase.com/go/items/egg-12km.png');
    background-size: cover;
}
#eggs-app .egg-list-img img {
    width: 80%;
    height: 80%;
    object-fit: contain;
}
#eggs-app .shiny-icon {
    position: absolute;
    top: 0;
    right: 5px;
    width: 28px;
}
#eggs-app .hatch-pkmn {
    font-size: 1.1em;
    font-weight: bold;
}
#eggs-app .font-size-smaller {
    font-size: 0.9em;
    color: #555555;
}
#eggs-app .font-size-x-small {
    font-size: 0.8em;
}

/* --- ================================ --- */
/* --- 手機版響應式調整 (Mobile Responsive) --- */
/* --- ================================ --- */
@media (max-width: 768px) {
    #eggs-app .egg-list-flex {
        margin: 0 -5px; /* 縮小負邊距 */
    }
    #eggs-app .egg-list-item {
        width: 90px; /* 縮小每個項目的寬度 */
        margin: 0 5px 12px; /* 調整邊距 */
    }
    #eggs-app .egg-list-img {
        width: 80px; /* 縮小圖片容器寬度 */
        height: 80px; /* 縮小圖片容器高度 */
    }
    #eggs-app .shiny-icon {
        top: -2px; /* 微調位置 */
        right: 0px; /* 微調位置 */
        width: 24px; /* 縮小異色圖示 */
    }
    #eggs-app .hatch-pkmn {
        font-size: 1em; /* 縮小名稱字體 */
    }
    #eggs-app .font-size-smaller {
        font-size: 0.85em; /* 縮小CP字體 */
    }
}