* {
    padding:0;
    margin:0;
}
body {
    background-color: #000000;
}
.title {
    background-color: #4a7bca;
    color:white;
    height:20vh;
    /*background-image: url("images/banner.jpg");*/
    background-repeat: no-repeat;
    background-size:cover;
    background-position: center;
    display:flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
} 
.title h2 {
    font-size:60px;
    /*margin-top:60px;*/
    align-items: center; /* 讓內容水平置中 */
    justify-content: center; /* 讓內容垂直置中 */
    text-align: center; /* 確保多行文字也置中 */
}
.anime-field {
    background-color: #ede9db;
    padding: 30px;  /* 增加內邊距 */
}

footer {
    background-color:#000000;
    color:#B7B7B7;
    height:60px;
    display:flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
}
.anime-config {
    background-color: #9996e3;
    /*display: flex;*//* 讓內容橫向排列 */
    align-items: left;  /* 讓內容垂直置中 */
    /*justify-content: center; /* 讓內容垂直置中 */
    /*flex-wrap: wrap; /* 如果螢幕寬度不夠，自動換行 */
    flex-direction: column; /* 讓內容垂直排列 */
}
.sort-container, .order-container, .expand-collapse-container, .view-mode-container{
    display: flex;
    align-items: center;
    
    gap: 15px;
    padding: 10px;
}

.sort-container label, .order-container label, .view-mode-container label {
    font-weight: bold;
    font-size: 20px;
}

.sort-btn, .order-btn, .expand-btn, .collapse-btn, .view-mode-card-btn, .view-mode-list-btn{
    background-color: #ede9db;
    color: black;
    border: none;
    padding: 10px 15px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 18px;
}

.sort-btn:hover, .order-btn:hover, .expand-btn:hover, .collapse-btn:hover, .view-mode-card-btn:hover, .view-mode-list-btn:hover{
    background-color: #4a7bca;
    color: white;
}

/* 當按鈕被點擊時，顏色改變 */
.sort-btn.active, .order-btn.active, .view-mode-card-btn.active, .view-mode-list-btn.active{
    background-color: #4a7bca; /* 深藍色 */
    color: white;
}

/* 設定動畫列表為橫向排列 */
.anime-container {
    display: flex;  /* 讓動畫卡片橫向排列 */
    flex-wrap: wrap; /* 超出畫面時換行 */
    gap: 20px; /* 設定間距 */
    justify-content: left; /* 靠左排列(js在list模式時會改為center靠中排列)*/
}

/* 讓作品區塊保持固定高度，防止動畫展開時變化 */
.anime-item {
    display: flex;
    align-items: stretch;/* **讓內容高度填滿父容器** */
    border-radius: 20px;
    transition: all 0.3s ease-in-out;/* **動畫效果** */
    position: relative;/* **設定相對位置** */
    min-height: 268px; /* **確保區塊高度始終不變** */
    gap: 50px; /* **設定內容間距** */
    flex-wrap: wrap;/* **當畫面不夠時換行** */
    /*margin-bottom: 20px;/* **底部間距** */
    margin: 0 10px; /* 左右間距 */
}

/* 當動畫被點擊時，動畫列表改成縱向排列 */
.anime-container.vertical {
    flex-direction: column;
    align-items: stretch;
}

/* 左側封面（保持圓角一致） */
.cover {
    /*width: 230px;
    height: 325px;*/
    /*width: 150px;
    height: 210px;*/
    width: 188px;
    height: 268px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2d6dc4;
    position: relative;
    cursor: pointer;
    transition: background 0.3s, box-shadow 0.3s ease-in-out;
    flex-shrink: 0;
    border-radius: 20px; /* **確保外框有圓角** */
    overflow: hidden; /* **避免圖片超出圓角範圍** */
    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.4);
}

/* 作品封面圖片（與藍色背景保持相同圓角） */
.cover img {
    width: 100%;
    height: 100%;
    border-radius: 20px; /* **與 .cover 一樣的圓角** */
    object-fit: cover;
}

/* 讓動畫資訊的高度與左側封面始終一致 */
.anime-info {
    width: 0;
    overflow: hidden;
    display: none;
    transition: width 0.3s ease-in-out;
    background: white;
    display: flex;
    align-items: stretch;
    height: 100%; /* **確保與左側封面等高** */
    border-radius: 20px;
    position: absolute;
    top: 0;
    left: 188px; /* **確保動畫資訊展開時與封面對齊** */
}

/* 展開動畫資訊時，保持高度不變 */
.anime-item.active .anime-info {
    width: 70%;
    display: flex;
    box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.4);
}

/* 確保表格內容填滿父容器 */
.anime-card-table {
    width: 100%;
    border-collapse: collapse;
    background: #f8f9fa;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: none;
}


/* 讓表格內的文字有適當間距 */
.anime-card-table td, .anime-card-table th {
    padding: 4px;
    text-align: center;
    font-size: 20px;
}

.anime-card-table td:first-child{
    width: 100px; /* 你可以調整這個數值 */
    white-space: nowrap; /* 防止文字換行 */
}

.fixed-width {
    width: 50px;
    white-space: nowrap;
}

/* 表格標題列（表頭部分，如「第1季、第2季、...」） */
.anime-card-table th {
    background: #b1b1b1; /* **較深的灰色，區分表頭** */
    font-weight: bold;
}
/* 交錯行背景色，讓表格更清晰 */
.anime-card-table tr:nth-child(even) {
    background: #d9d9d9; /* **淺灰色背景** */
}

.anime-card-table tr:nth-child(odd) {
    background: #ffffff; /* **白色背景** */
}

/*list start*/
/*合併*/
/*
body {
    font-family: Arial, sans-serif;
    background-color: #f5f7fa;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
*/
/*
.container {
    display: flex;
    position: relative;  讓內部元素的絕對定位基於此容器
    align-items: flex-start;  保持表格靠左 
}
*/
/*
.anime-container {
    display: grid;
    grid-template-columns: auto 1fr; /* 左邊圖片, 右邊表格 
    gap: 20px; /* 讓圖片與表格有點間距 
    align-items: start; /* 讓圖片與表格的 `tr` 對齊 
}
*/
#anime-image {
    width: 188px;
    height: 268px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

    position: fixed;/* 讓圖片固定在表格左側 */
    left: 50px;  /* 固定左邊 50px */
    opacity: 0; /* 預設透明 */
    transition: opacity 0.3s ease-in-out; /* 平滑顯示 */
    /*
    object-fit: cover;
    margin-right: 20px;
    pointer-events: none; /* 讓滑鼠事件穿透 
    */
}

.anime-list-table {
    width: 1000px;
    border-collapse: collapse;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
    table-layout: auto;
    font-size: 20px;
}
.anime-list-table th, .anime-list-table td {
    padding: 12px 15px;
    text-align: left;
    white-space: nowrap;
}
.anime-list-table thead {
    background-color: #e9eef4;
    color: #333;
}
.anime-list-table tbody tr:nth-child(even) {
    background-color: #f8fafc;
}
.anime-list-table tbody tr:hover {
    background-color: #2196F3;
    color: white;
    cursor: pointer;
}

.detailsRow {
    background-color: #f9f9f9;
}
.details-content {
    padding: 10px;
    /*font-size: 20px;*/
    color: #333;
}
.details-container {
    display: flex;
    align-items: center;
    padding: 15px;
}
.details-image {
    width: 120px;
    height: auto;
    border-radius: 8px;
    margin-right: 20px;
}
.details-table {
    border-collapse: collapse;
    width: 100%;
}
.details-table th, .details-table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
}
.detailsRow {
    background-color: inherit !important; /* 確保不改變背景顏色 */
    color: inherit !important;
    cursor: inherit !important;
}
.details-container {
    background-color: #e9eef4;
    color: inherit !important;
    cursor: inherit !important;
}
/* 讓內部的表格、圖片等元素不受 hover 影響 */
.details-container img,
.details-container table,
.details-container th,
.details-container td {
    pointer-events: none; /* 讓這些元素不會觸發 hover 效果 */
}
.detailsRow.show {
    display: table-row;
    height: auto;
    opacity: 1;
}
/* 固定 Year, Progress, Rate 欄位寬度 */
.details-table td:first-child,
.details-table th:first-child {
    width: 100px; /* 可調整 */
    min-width: 100px;
    text-align: center;
}
/* 固定 Total Rate 欄位寬度 */
.details-table .total-score-header,
.details-table .total-score {
    width: 150px; /* 可調整 */
    min-width: 150px;
    text-align: center;
}


.total-score-header {
    background-color: #ddd;
    font-weight: bold;
}
.total-score {
    /*font-size: 20px;*/
    font-weight: bold;
    background-color: #eee;
}
/*list end*/

/* 響應式設計語法 */
@media screen and (max-width: 768px) {
    header ul {
        display:none;
    }
    header h1 {
        left:50%;
        transform: translateX(-50%);
    }
    .title h2 {
        font-size:40px;
        align-items: center; /* 讓內容水平置中 */
        justify-content: center; /* 讓內容垂直置中 */
        text-align: center; /* 確保多行文字也置中 */
    }
    .game {
        width: 300px; /* 控制寬度 */
    }
    .gamelist li {
        color: #2f3336;
        font-size: 20px; /* 調整字體大小 (30)*/
        margin-bottom: 20px; /* 減少行距 (30)*/
    }
    }