/* ==========================================
   🌟 全域變數與基礎設定
========================================== */
:root {
  --primary-color: #ff6699;
  --primary-light: #fff0f5;
  --bg-color: #f8f9fa;
  --text-main: #333333;
  --text-muted: #888888;
  --border-color: #eeeeee;
  --card-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  --card-hover-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  --border-radius-lg: 12px;
  --border-radius-md: 8px;
  --transition-speed: 0.3s;
}

body {
  background-color: var(--bg-color);
  color: var(--text-main);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
#hk-latest-slider::-webkit-scrollbar { display: none; } /* 隱藏捲軸 */
#hk-latest-slider {
    display: flex !important;
    overflow-x: auto !important; 
    /* 移除 scroll-snap-type: x mandatory; 這是造成卡頓的主要原因 */
    scroll-snap-type: none !important; 
    
    -webkit-overflow-scrolling: touch; /* 確保 iOS 更有慣性 */
    touch-action: pan-x;
    cursor: grab;
    user-select: none;
    padding: 0px;
    gap: 15px;
    
    /* 隱藏捲軸 */
    scrollbar-width: none; 
    -ms-overflow-style: none;
}

#hk-latest-slider:active {
  cursor: grabbing;
}

/* 隱藏捲軸美化界面 */
#hk-latest-slider::-webkit-scrollbar {
  display: none;
}

.slider-card {
    flex: 0 0 auto;
    width: 200px; /* 或者你想要的寬度 */
    /* 移除 scroll-snap-align: start; */
    scroll-snap-align: none !important; 
    
    /* 強制開啟 GPU 加速，確保滑動不掉幀 */
    transform: translateZ(0);
    will-change: scroll-left;
}
.slider-card img {
    pointer-events: none; /* 防止滑鼠抓到圖片觸發瀏覽器原生拖拽 */
    -webkit-user-drag: none;
}
.slider-card {
    user-select: none;
}
.slider-card {
    flex: 0 0 200px; /* 每張圖片寬度 */
    scroll-snap-align: start;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

.slider-card:hover { transform: scale(1.03); }

.slider-card img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}

.slider-info {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: white;
    padding: 10px 5px 5px 5px;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
@media screen and (max-width: 800px) {
    #hk-header {
        flex-wrap: wrap; /* 允許換行 */
        padding: 8px 12px;
    }
    #header-left img {
        width: 120px; /* 縮小 logo */
    }
    #header-left {
        order: 1; /* logo 在左上角 */
    }
    #header-right {
        order: 2; /* 按鈕在 logo 右手邊 */
        margin-left: auto;
        margin-top: 0;
    }
    #header-center {
        order: 3; /* 搜尋框在下一行 */
        width: 100%;
        margin-top: 6px;
    }
    #hk-search {
        width: 100%;
    }
}
/* ==========================================
   🎨 修復：W3.CSS 基礎按鈕與顏色 (配合 JS 狀態)
========================================== */
.w3-button {
  border: none;
  display: inline-block;
  padding: 8px 16px;
  vertical-align: middle;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background-color: transparent;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s;
}
.w3-button:hover {
  background-color: #e0e0e0 !important;
  color: #000 !important;
}

/* 確保 JS 切換狀態時有正確的顏色 */
.w3-black { color: #fff !important; background-color: #333 !important; }
.w3-light-grey { color: #000 !important; background-color: #f1f1f1 !important; }
.w3-blue { color: #fff !important; background-color: var(--primary-color) !important; } /* 將藍色替換為你的主題粉紅，更統一 */
.w3-pale-green { color: #fff !important; background-color: var(--primary-color) !important; border-color: var(--primary-color) !important; } /* 分頁啟用時的顏色 */
.w3-text-red { color: #f44336 !important; }
.w3-text-red:hover { color: #d32f2f !important; }
/* --- 排版與間距 --- */
.w3-margin-top { margin-top: 16px !important; }
.w3-margin-bottom { margin-bottom: 16px !important; }
.w3-responsive { display: block; overflow-x: auto; }
/* 淺藍色 - 連播模式 */
.w3-pale-blue {
  color: #000 !important;
  background-color: #ddffff !important;
}

/* 淺紅色 - 播完暫停 */
.w3-pale-red {
  color: #000 !important;
  background-color: #ffdddd !important;
}

/* 淺黃色 - 單集循環 */
.w3-pale-yellow {
  color: #000 !important;
  background-color: #ffffcc !important;
}
/* --- 表格基礎 --- */
.w3-table {
 border-collapse: collapse;
 border-spacing: 0;
 width: 100%;
 display: table;
}
.w3-table th, .w3-table td {
 padding: 8px;
 display: table-cell;
 text-align: left;
 vertical-align: top;
}
.w3-small { font-size: 12px !important; }

/* --- 表格樣式 --- */
.w3-bordered tr { border-bottom: 1px solid #ddd; }
.w3-striped tbody tr:nth-child(even) { background-color: #f1f1f1; }
.w3-hoverable tbody tr:hover { background-color: #ccc; }

/* --- 自訂固定表格寬度 --- */
.table-fixed {
 table-layout: fixed;
 width: 100%;
}

/* --- 主題顏色 (以藍色為例，你可以自己改 hex code) --- */
.w3-theme {
 color: #fff !important;
 background-color: #2196F3 !important; /* 藍色 */
}
.w3-text-theme {
 color: #2196F3 !important;
}
/* 基礎形狀與大小 */
.w3-round { border-radius: 6px !important; }
.w3-round-xxlarge { border-radius: 32px !important; }
.w3-small { font-size: 13px !important; }
.w3-block { display: block; width: 100%; }


/* ==========================================
   📖 修復：簡介頁面 (Banner 與相關系列)
========================================== */
.hk-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius-lg);
  background: #000;
  margin-bottom: 15px;
  box-shadow: var(--card-shadow);
}

.hk-banner img {
  width: 100%;
  opacity: 0.6; /* 調暗一點讓文字更清楚 */
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.hk-banner-text {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  color: #fff;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.8);
}

.hk-banner-text h1 {
  margin: 0 0 8px 0;
  font-size: 26px;
  font-weight: bold;
  line-height: 1.2;
}

.hk-banner-text p {
  margin: 0;
  font-size: 14px;
  color: #eeeeee;
}

@media (max-width: 600px) {
  .hk-banner-text h1 { font-size: 20px; }
  .hk-banner-text p { font-size: 12px; }
}

/* 關閉按鈕微調 */
.hk-close-btn {
  background-color: var(--primary-color) !important;
  color: white !important;
  border-radius: var(--border-radius-md) !important;
  font-weight: bold;
  float: right; /* 讓它靠右 */
}
.hk-close-btn:hover {
  background-color: #e65c8a !important; 
}

/* 相關系列標題與網格 */
#tab-series {
  margin-top: 30px;
  clear: both;
}

#tab-series h2 {
  /* font-size: 20px; */
  /* font-weight: 600; */
  /* margin: 20px 0 15px 0; */
  /* padding-left: 12px; */
  /* border-left: 5px solid var(--primary-color); */
}
/* ==========================================
   🔍 頂部搜尋與過濾列 (Top Bar)
========================================== */
#hk-top-bar {
  background: #ffffff !important;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--card-shadow);
  padding: 12px 16px !important;
  border: 1px solid var(--border-color);
}

#hk-search {
  background-color: #f1f3f5;
  border: none !important;
  border-radius: 20px !important;
  padding: 10px 16px !important;
  transition: all var(--transition-speed);
}

#hk-search:focus {
  outline: none;
  background-color: #ffffff;
  box-shadow: 0 0 0 2px var(--primary-light), 0 0 0 4px rgba(255, 102, 153, 0.2);
}

#hk-sort-btn {
  border-radius: 20px !important;
  border: 1px solid var(--border-color) !important;
  background: #ffffff !important;
  font-weight: 500;
  transition: var(--transition-speed);
}

#hk-sort-btn:hover {
  border-color: var(--primary-color) !important;
  color: var(--primary-color);
}

/* 過濾按鈕 (Pill style) */
#hk-filter-bar button {
  border-radius: 20px !important;
  padding: 6px 14px;
  border: 1px solid transparent !important;
}
#hk-filter-bar button.w3-blue {
  background-color: var(--primary-color) !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(255, 102, 153, 0.3);
}

/* ==========================================
   🎬 動畫卡片網格 (Anime Grid)
========================================== */
#hk-anime-list {
  display: flex;
  flex-wrap: wrap;
  margin: 15px -8px;
}

.hk-col {
  width: 16.6%;
  padding: 8px;
  box-sizing: border-box;
}

@media screen and (max-width: 1100px) { .hk-col { width: 25%; } }
@media screen and (max-width: 900px) { .hk-col { width: 33.3%; } }
@media screen and (max-width: 600px) { .hk-col { width: 50%; padding: 6px; } }

.hk-card {
  display: block;
  text-decoration: none !important;
  color: var(--text-main) !important;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  background: #ffffff;
  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
  box-shadow: var(--card-shadow);
  cursor: pointer;
  border: 1px solid var(--border-color);
}

.hk-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--card-hover-shadow);
}

.hk-img-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #e9ecef;
}

.hk-img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hk-img-text {
  position: absolute;
  bottom: 6px;
  right: 6px;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 11px;
  border-radius: 4px;
  backdrop-filter: blur(2px);
}

.hk-info {
  padding: 12px 4px;
}

.hk-info h2 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 6px 0;
  line-height: 1.3;
  display: -webkit-box;
/*   -webkit-line-clamp: 2; */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hk-remarks, .hk-update {
  color: var(--text-muted);
  font-size: 12px;
}

/* ==========================================
   ▶️ 播放頁面佈局 (Player Layout)
========================================== */
.hk-player-wrap, .hk-detail-wrap {
  max-width: 1200px;
  margin: auto;
  padding: 15px 0;
}

.hk-player-layout, .hk-main-layout {
  display: flex;
  gap: 24px;
}

.hk-player-left, .hk-info-left {
  flex: 2;
  min-width: 0; /* 防止 Flex 子元素溢出 */
}

.hk-player-right, .hk-play-right {
  flex: 1;
  min-width: 300px;
}

/* 影片容器 */
.hk-video-box {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 比例 */
  background: #000;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
}

.hk-video-box #demoplayer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

/* 控制列 */
.hk-player-controls {
  display: flex;
  justify-content: space-between; /* 關鍵：讓子元素左右兩端對齊 */
  align-items: center;
  margin: 15px 0;
  width: 100%;
}
.hk-ep-nav {
  display: flex;
  justify-content: flex-end; /* 確保裡面的按鈕靠右排列 */
  gap: 10px; /* 兩個按鈕之間的間距 */
}
.hk-back-btn, .hk-ep-nav button {
  white-space: nowrap; 
}


.hk-ep-nav button.w3-black {
  background-color: var(--text-main) !important;
}

.hk-ep-nav button:hover {
  background-color: var(--primary-color) !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(255,102,153,0.3);
}

/* ==========================================
   📜 播放列表美化 (Playlist Optimization)
========================================== */
.hk-episode-list {
  background: #ffffff;
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: var(--card-shadow);
  max-height: 480px;
  overflow-y: auto;
  overscroll-behavior: contain; /* 防止捲動穿透到背景 */
}

/* 自訂捲軸 (Webkit) */
.hk-episode-list::-webkit-scrollbar {
  width: 6px;
}
.hk-episode-list::-webkit-scrollbar-track {
  background: transparent;
}
.hk-episode-list::-webkit-scrollbar-thumb {
  background: #dcdcdc;
  border-radius: 10px;
}
.hk-episode-list::-webkit-scrollbar-thumb:hover {
  background: #c0c0c0;
}

/* 單集項目 */
.eplist {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background var(--transition-speed), padding-left var(--transition-speed);
  font-size: 14px;
}

.eplist:last-child {
  border-bottom: none;
}

.eplist:hover {
  background: #f8f9fa;
  padding-left: 20px; /* Hover 時有輕微推動效果 */
}

.eplist span {
  display: flex;
  align-items: center;
}

.eplist i {
  /* margin-right: 12px; */
  color: #ccc;
  font-size: 16px;
  transition: color 0.3s;
}

.eplist:hover i {
  color: var(--primary-color);
}

/* 播放中狀態 (Active) */
.eplist.active {
  background: var(--primary-light) !important;
  color: var(--primary-color) !important;
  font-weight: bold;
  border-left: 4px solid var(--primary-color);
  padding-left: 12px;
}

.eplist.active i {
  color: var(--primary-color);
}

/* 集數徽章 */
.eplist::before {
  content: attr(data-episode-number);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e9ecef;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: bold;
  height: 20px;
  min-width: 28px;
  padding: 0 6px;
  border-radius: 4px;
  margin-right: 12px;
  flex-shrink: 0;
}

.eplist.active::before {
  background-color: var(--primary-color) !important;
  color: white;
}

/* 播放中標籤 (Playing Label) */
.playing-label {
  margin-left: auto;
  background: var(--primary-color);
  color: #ffffff;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px !important;
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(255, 102, 153, 0.4);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* 分頁按鈕美化 */
.tablinks {
  border-radius: 6px !important;
  border: 1px solid var(--border-color) !important;
  background: #ffffff;
  font-weight: 500;
  transition: 0.2s;
}
.tablinks.w3-pale-green {
  background-color: var(--primary-color) !important;
  color: white !important;
  border-color: var(--primary-color) !important;
}

/* ==========================================
   📱 手機版與平板適配 (Responsive)
========================================== */
/* ==========================================
   📐 播放列表自動適應影片與 Banner 高度 (絕對對齊終極版)
========================================== */
@media (min-width: 881px) {
  /* 1. 父容器設為 relative，並取消 stretch，讓「左邊」成為唯一決定高度的老闆 */
  .hk-main-layout, .hk-player-layout {
    display: flex;
    justify-content: space-between;
    position: relative;
    align-items: flex-start !important; /* 絕對不允許右邊撐高整個版面 */
  }

  /* 2. 左邊區塊：正常排版，負責撐開整個頁面的高度 */
  .hk-info-left, .hk-player-left {
    width: calc(66.666% - 12px); /* 佔 2/3 寬度，並扣除中間間距 */
    flex: none !important; /* 關閉原本的 flex: 2 */
  }

  /* 3. 右邊區塊：設為絕對定位，強行鎖定在父容器的頂部與底部 */
  .hk-play-right, .hk-player-right {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0; /* 關鍵：強迫它的底部跟隨父容器的底部 */
    width: calc(33.333% - 12px); /* 佔 1/3 寬度 */
    flex: none !important;
    display: flex;
    flex-direction: column;
  }

  /* 4. 確保簡介頁的分頁容器也能填滿高度 */
  #tab-eps {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* 5. 播放列表：被限制住高度後，乖乖產生內部捲軸 */
  .hk-episode-list {
    flex: 1;
    overflow-y: auto;
    max-height: none !important; /* 解除寫死的固定高度 */
    min-height: 0;
  }
}

/* 📱 手機版 (< 880px)：解除所有限制，上下自然堆疊 */
@media (max-width: 880px) {
  .hk-main-layout, .hk-player-layout {
    display: flex;
    flex-direction: column;
  }
  .hk-play-right, .hk-player-right {
    position: relative;
    width: 100%;
    height: auto;
  }
  .hk-episode-list {
    max-height: 100% !important; /* 手機版維持固定高度，免得太長滑不到底 */
  }
  .hk-episode-list {
    overflow-y: hidden !important;
    overscroll-behavior: revert !important;
  }
}
@media (max-width: 880px) {
    #btn-theater, #btn-window{
        display: none;
    }
  .hk-player-layout, .hk-main-layout {
    flex-direction: column;
    gap: 16px;
  }

  .hk-player-right, .hk-play-right {
    order: 2;
    min-width: 100%;
  }

  .hk-player-left, .hk-info-left {
    order: 1;
  }

  /* 手機版影片置頂跟隨 */
  .hk-video-box.is-sticky {
    position: fixed;
    top: 103px; /* 根據你網站頂部導航列高度微調 */
    left: 0;
    width: 100%;
    z-index: 999;
    border-radius: 0; /* 置頂時取消圓角 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
  }

  .hk-player-left.stuck-padding {
    padding-top: 56.25vw; /* 防止畫面跳動 */
  }

  
}

/* JWPlayer 細節修正 */
.jw-media.jw-reset video { object-fit: contain !important; }
video::-webkit-media-controls-panel { width: 100% !important; }
/* ==========================================
   🔘 分頁按鈕：單行橫向滑動 (配合你原有的隱藏功能)
========================================== */
#hk-ep-tabs {
  display: flex !important;
  flex-wrap: nowrap !important; /* 強制不換行，排成單行 */
  overflow-x: auto !important;  /* 允許橫向滑動 */
  overflow-y: hidden !important;
  white-space: nowrap;
  gap: 8px;
  padding-bottom: 5px; /* 稍微留白 */
  
  /* 支援手機原生慣性滑動 */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  
  /* 電腦版滑鼠游標變化 */
  cursor: grab;
}

#hk-ep-tabs:active {
  cursor: grabbing; /* 點擊時變成抓緊的手 */
}

/* 防止按鈕被擠壓 */
#hk-ep-tabs .tablinks {
  flex-shrink: 0 !important; 
  user-select: none; /* 防止拖拉時反白文字 */
}

/* 隱藏原生捲軸，讓外觀更似 App */
#hk-ep-tabs::-webkit-scrollbar {
  display: none; 
}
#hk-ep-tabs {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
  body.is-theater-mode::before {
      content: "";
      position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
      background: rgb(0 0 0); /* 黑色半透明 */
      z-index: 9998; /* 喺網頁其他元素之上 */
      pointer-events: none; /* 允許滑鼠穿透 */
  }

  /* 劇院模式播放器高亮 */
  .hk-theater-mode {
      position: relative;
      z-index: 9999; /* 確保喺暗色遮罩之上 */
      background: #000000; /* 畀個深色底色融合得好啲 */
      padding: 10px; border-radius: 8px; /* 視覺上靚啲 */
      transition: all 0.3s ease;
  }
  /* 劇院模式 */
  .hk-theater-mode .hk-player-right { display: none !important; }
  .hk-theater-mode .hk-player-left { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
  
  /* 網頁全屏模式 (視窗模式) */
  .hk-window-mode {
      position: fixed !important; top: 0 !important; left: 0 !important;
      width: 100vw !important; height: 100vh !important;
      z-index: 999999 !important; background: #000 !important;
      margin: 0 !important; padding: 0 !important; max-width: none !important;
      overflow: hidden !important; /* 🌟 確保不會出現網頁捲動軸 */
  }
  .hk-window-mode .hk-player-layout { display: flex !important; height: 100vh !important; }
  .hk-window-mode .hk-player-right { display: none !important; }
  .hk-window-mode .hk-player-left { width: 100% !important; height: 100vh !important; max-width: 100% !important; display: flex; flex-direction: column; }
  .hk-window-mode .hk-video-box { flex-grow: 1; height: 100vh !important; max-height: 100vh !important; display: flex; }
  .hk-window-mode .hk-player-controls { display: none !important; }
  
  /* 🌟 強制 JW Player 適應視窗高度，取消 16:9 比例鎖定 */
  .hk-window-mode .jwplayer {
      height: 100% !important; 
      max-height: 100vh !important;
      padding-bottom: 0 !important; /* 覆蓋 JW Player 原本撐高畫面的 padding */
  }
  
/* 修改後的退出按鈕樣式 */
.window-close-btn { 
    display: none; 
    position: absolute; 
    top: 20px; 
    right: 20px; 
    /* 提高 z-index 確保在所有 JW Player UI 組件之上 */
    z-index: 2147483647 !important; 
    background: rgba(0, 0, 0, 0.7) !important; 
    color: #fff !important; 
    font-size: 14px; 
    padding: 10px 20px; 
    border-radius: 5px; 
    cursor: pointer; 
    border: 1px solid #555;
    transition: opacity 0.3s ease-in-out, visibility 0.3s;
    /* 確保即使在動畫期間也能點擊 */
    pointer-events: auto !important; 
}

/* 當 JW Player 判定使用者閒置且正在播放時，使用透明度隱藏而非完全禁用 */
.hk-window-mode .window-close-btn.jw-ui-hidden { 
    opacity: 0 !important; 
    visibility: hidden;
    pointer-events: none !important; 
}

.hk-window-mode .window-close-btn { 
    display: block; 
    opacity: 1; 
    visibility: visible;
}