body {
    
    background-color: #007799;
    
    background-image: url('background.jpg'); 
    

    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    
    font-family: "微軟正黑體", sans-serif;
    margin: 0; /* 去除網頁預設邊距 */
    padding: 0;
}

/* 2. 導覽選單 (選單橫條) */
.nav-menu {
    position: sticky; /* 讓選單黏在螢幕最上方 */
    top: 0;
    z-index: 1000;    /* 確保選單浮在最上層 */
    
    background-color: rgba(255, 255, 255, 0.9); /* 半透明白色背景 */
    text-align: center;
    padding: 15px 0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3); /* 下方加一點陰影 */
}

/* 選單裡的連結按鈕 */
.nav-menu a {
    text-decoration: none; /* 去除底線 */
    color: #333;
    font-weight: bold;
    font-size: 1.2rem;
    padding: 10px 20px; /* 按鈕的大小 */
    margin: 0 5px;      /* 按鈕之間的距離 */
    border-radius: 5px; /* 圓角 */
    transition: all 0.3s; /* 讓變色有動畫效果 */
}

/* 當滑鼠移到連結上時的變化 */
.nav-menu a:hover {
    background-color: #007799; /* 深藍色背景 */
    color: #ffffff; /* 白色文字 */
}

/* 3. 大標題設定 */
h1 {
    text-align: center;
    font-family: 'Playfair Display', serif; /* 英文字體 */
    font-size: 3.5rem;
    color: #ffffff;
    text-shadow: 3px 3px 5px #000000; /* 文字黑色陰影 */
    margin-top: 40px;
    margin-bottom: 20px;
}

/* 4. 內容區塊 (半透明黑底框框) */
.content-box {
    background-color: rgba(0, 0, 0, 0.75); /* 黑色半透明底 */
    color: #fff;           /* 白色文字 */
    width: 80%;            /* 寬度佔螢幕 80% */
    max-width: 900px;      /* 最大不超過 900px */
    margin: 30px auto;     /* 上下留空間，左右置中 */
    padding: 40px;         /* 內距 */
    border-radius: 15px;   /* 圓角 */
    border: 2px solid #a5cfff; /* 淡藍色邊框 (希卡石風格) */
    line-height: 1.8;      /* 行高，讓文字好讀 */
    text-align: center;    /* 內容置中 */
}

/* 內容區塊裡的標題 (h2) */
.content-box h2 {
    color: #ffd700; /* 金色副標題 */
    margin-bottom: 20px;
    border-bottom: 1px dashed #ffd700; /* 下方虛線 */
    display: inline-block;
    padding-bottom: 10px;
}

/* 5. 圖片容器 */
.image-container img {
    margin: 0 5px;
    border-radius: 5px;
}
/* -------------------------------------------------- */
/* style.css 新增：角色介紹頁專用設定 */
/* -------------------------------------------------- */

/* 每一位角色的卡片框框 */
/* 每一位角色的卡片框框 */
.character-card {
    display: flex;       /* 啟動並排模式 */
    align-items: center; /* 垂直置中 */
    
    background-color: rgba(0, 0, 0, 0.8); /* 深黑背景 */
    border: 1px solid #a5cfff; /* 藍色邊框 */
    border-radius: 15px; /* 圓角 */
    
    max-width: 900px;    /* 寬度限制 */
    margin: 30px auto;   /* 置中 */
    padding: 20px;       /* 內距 */
    color: #fff;
}

/* ================================================= */
/* 這裡就是控制圖片大小的關鍵！請保留這兩段 */
/* ================================================= */

/* 1. 設定「左邊欄位」的寬度 */
.char-left {
    /* 這裡的 250px 代表圖片區塊的固定寬度 */
    flex: 0 0 250px;  
    margin-right: 30px; /* 跟右邊文字的距離 */
}

/* 2. 設定「圖片本身」的高度 */
.char-left img {
    width: 100%;        /* 填滿上面的 250px */
    
    /* 這裡的 350px 代表圖片的高度 */
    height: 350px;      
    
    object-fit: cover;  /* 自動裁切不變形 */
    border-radius: 10px;
    border: 2px solid #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

/* ================================================= */

/* 右邊文字區域 */
.char-right {
    flex: 1; /* 填滿右邊剩餘空間 */
    text-align: left;
    padding-left: 10px;
}

/* 1. 名字設計 */
.char-right h2 {
    font-size: 2.2rem;
    font-weight: bold;
    color: #ffd700;
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    text-shadow: 2px 2px 4px #000;
}

/* 2. 屬性標籤 */
.char-tag {
    display: inline-block;
    background-color: #005f7a;
    color: #fff;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
    margin-right: 10px;
    margin-bottom: 15px;
    border: 1px solid #4db8ff;
}

/* 3. 內文設計 */
.char-right p {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #e0e0e0;
    text-align: justify;
}
.music-grid {
    display: grid; 
    grid-template-columns: 1fr 1fr; /* 分成左右兩欄 (1:1) */
    gap: 40px;          /* 卡片之間的間距 */
    max-width: 1000px;
    margin: 40px auto;  /* 讓整個區塊置中 */
    padding: 0 20px;
}

/* 2. 音樂卡片：外觀設定 */
.music-card {
    background-color: rgba(0, 0, 0, 0.8); /* 深黑背景 */
    border: 1px solid #a5cfff;            /* 藍色邊框 */
    border-radius: 15px;
    padding: 30px;
    text-align: center;                   /* 內容全部置中 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.5); 
    
    /* 讓卡片內部元件排列整齊 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 3. 卡片裡的圖片 (專輯封面) */
.music-card img {
    width: 100%;
    height: 250px;      /* 強制固定高度，讓左右圖片一樣高 */
    object-fit: cover;  /* 自動裁切不變形 */
    border-radius: 10px;
    border: 1px solid #555;
    margin-bottom: 20px;
}

/* 4. 卡片裡的文字 */
.music-card h3 {
    color: #ffd700;     /* 金色標題 */
    font-size: 1.8rem;
    margin: 10px 0;
}

.music-card p {
    color: #ccc;        /* 淺灰字 */
    font-size: 1.1rem;
    margin-bottom: 15px;
}

/* 5. 音樂播放器美化 */
.music-card audio {
    width: 100%;
    height: 40px;
    margin-top: auto;   /* 把它推到底部 */
    outline: none;
}
/* ========================================= */
/* 新增：影片頁面專用 (超大播放器) */
/* ========================================= */

.big-video-container {
    width: 90%;           /* 佔據螢幕 90% 的寬度，非常有魄力 */
    max-width: 1200px;    /* 但最大不超過 1200px，以免在超大螢幕變太扁 */
    margin: 40px auto;    /* 上下留空，左右置中 */
    
    background-color: #000; /* 影片背景黑底 */
    border: 4px solid #ffd700; /* 加粗的金色邊框，很有質感 */
    border-radius: 10px;  /* 圓角 */
    box-shadow: 0 0 30px rgba(0,0,0,0.8); /* 強烈的發光陰影效果 */
    overflow: hidden;     /* 確保圓角不會被影片擋住 */
}

/* 設定影片標籤本身 */
.big-video-container video {
    width: 100%;          /* 強制影片填滿框框 */
    height: auto;         /* 高度自動調整，不變形 */
    display: block;       /* 消除影片底部的微小空隙 */
}
.awards-table {
    width: 90%;             /* 寬度佔 90% */
    max-width: 1000px;
    margin: 40px auto;      /* 置中 */
    border-collapse: collapse; /* 讓框線合併，不會有兩條線 */
    background-color: rgba(0, 0, 0, 0.85); /* 深黑背景 */
    box-shadow: 0 0 20px rgba(0,0,0,0.5);  /* 陰影 */
    border-radius: 10px;    /* 圓角 */
    overflow: hidden;       /* 確保圓角不被切掉 */
}

/* 表格標題列 (第一行) */
.awards-table th {
    background-color: #007799; /* 薩爾達藍 */
    color: #ffffff;
    font-size: 1.3rem;
    padding: 20px;
    text-align: left; /* 靠左對齊 */
}

/* 表格內容列 */
.awards-table td {
    padding: 15px 20px;
    color: #e0e0e0;
    border-bottom: 1px solid #444; /* 每行下面有灰線分隔 */
    font-size: 1.1rem;
}

/* 滑鼠移過去的效果 (Hover) */
.awards-table tr:hover {
    background-color: rgba(255, 215, 0, 0.15); /* 淡淡的金色光芒 */
    cursor: default;
}

/* 特別強調第一欄 (獎項名稱) */
.awards-table td:first-child {
    color: #ffd700; /* 金色字體 */
    font-weight: bold;
}
/* ========================================= */
/* 新增：大 Logo 設定 */
/* ========================================= */

.logo-container {
    text-align: center; /* 讓圖片置中 */
    margin-top: 30px;   /* 距離上方選單一點距離 */
    margin-bottom: 20px;/* 距離下方跑馬燈一點距離 */
}

.logo-container img {
    width: 60%;         /* 設定寬度佔螢幕的 60% (你可以自己調整 50%~80%) */
    max-width: 600px;   /* 限制最大寬度，以免在大螢幕上大得嚇人 */
    height: auto;       /* 高度自動，保持比例 */
    
    /* 加一點發光效果，讓它看起來更有神聖感 (選用) */
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}