/* vod_play.css — 播放頁專用 */

/* 播放頁不顯示左側常駐側欄（疊在播放器上會干擾看片），
   .main-area 的 padding-left 也一併收掉，讓內容（含滿版播放器）補滿這塊空間。
   行動裝置的抽屜選單（.mob-nav-drawer）維持可用，這裡只隱藏桌面常駐側欄。 */
.page-play .side-nav { display: none; }
.page-play .main-area { padding-left: 0; }
/* 播放頁的播放器本身（.tvplay）不受 §35 影響——它本來就沒包在 .container 裡，天生滿版。
   但播放器下方「當前播放信息／猜你喜歡／評論」這段仍然包在 .container 裡（§31 point 6），
   一度誤以為要把播放頁整個排除在 §35 之外、把這裡的 .container 蓋回 1280px 上限，
   結果變成播放器下方內容靠左後右側留一大塊空白，跟其他頁面「內容區盡量鋪滿右側」的
   版型不一致（使用者截圖回報）。播放頁側欄本來就被上面兩條規則關掉了，.container
   不設上限不會有「側欄+內容區雙重偏移」的問題，所以這裡不需要、也不應該再蓋回
   max-width，直接繼承 main.css 的 --container-w:none 即可，跟其餘頁面行為一致。 */

/* 廣告提醒（比照參考網站，疊在播放器正上方，可關閉） */
.play-ad-tip {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 20px; background: rgba(255,106,0,.12);
  color: var(--text-2); font-size: 13px;
}
.play-ad-tip strong { color: var(--accent); font-weight: 700; }
.play-ad-tip button { color: var(--text-3); font-size: 16px; flex-shrink: 0; transition: color .15s; }
.play-ad-tip button:hover { color: var(--text-1); }

/* 標題列 */
.play-title {
  font-size: 20px; font-weight: 700; color: var(--text-1);
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
  margin: 0 0 6px;
}
/* 評分跟片名同一行（比照參考網站），跟 .play-meta-score（副標題那一行，目前沒用到了但
   保留給舊資料相容）分開，不要合併成同一個 class */
.play-title-score { color: var(--accent); font-weight: 700; font-size: 16px; }
.intro-toggle-btn {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 12px; font-weight: 400; color: var(--text-3);
  background: none; border: 1px solid var(--border); border-radius: 4px;
  padding: 3px 8px; cursor: pointer; transition: color .15s, border-color .15s;
  flex-shrink: 0;
}
.intro-toggle-btn:hover { color: var(--accent); border-color: var(--accent); }
.play-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  font-size: 13px; color: var(--text-2); margin-bottom: 10px;
}
.play-meta-score { color: #f5a623; font-weight: 700; }
.play-meta-hd { color: var(--accent); font-weight: 700; }
.play-meta-sep { color: var(--border); margin: 0 2px; }

/* 社交列（投屏/評論/收藏/分享圖示 + 評論數/按讚數），比照參考網站片名資訊下方那一排 */
.play-social-row { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.play-social-btn {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--bg-elevated); color: var(--text-2); font-size: 15px;
  transition: .15s;
}
.play-social-btn:hover { color: #fff; background: var(--accent); }
.play-social-count {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--text-3);
}
.play-social-count iconify-icon { font-size: 14px; }

/* 集數列表收起 */
.ipp-ep-wrap.is-collapsed { max-height: 86px; }

/* ============================================================
   播放器 + 右側集數面板（滿版，見 CLAUDE.md §31）
   .tvplay 本來就沒包在 .container 裡，天然貼齊側欄右緣到螢幕右緣；
   這裡把原本疊在播放器下方、獨立一張卡片的「播放列表」搬進來當右側面板，
   跟播放器並排、一樣滿版，class／id 完全沿用（.ipp-* / #ippSortBtn 等），
   JS（play.js）選擇器不用改。
   ============================================================ */
.tvplay-row { display: flex; align-items: stretch; }
.tvplay-main { flex: 1; min-width: 0; }

/* 面板疊在播放器黑色滿版區塊裡，固定用暗色（跟側欄一樣，不隨白底主題變化） */
.tvplay-eps-panel {
  width: 340px; flex-shrink: 0;
  background: #141414; color: rgba(255,255,255,.85);
  padding: 16px; overflow-y: auto;
  display: flex; flex-direction: column;
}
/* .inplot-playlist（vod_detail.css）原本是「疊在播放器下方卡片」的間距/上邊框，
   這裡沿用它的 .ipp-* 內部結構但外層容器改當獨立面板，要蓋掉那些間距/邊框 */
.inplot-playlist.tvplay-eps-panel { margin-top: 0; padding-top: 16px; border-top: none; }
.tvplay-eps-panel .ipp-title { color: #fff; font-size: 17px; }
.tvplay-eps-panel .ipp-sort-btn { color: rgba(255,255,255,.55); border-color: rgba(255,255,255,.18); }
.tvplay-eps-panel .ipp-sort-btn:hover { color: #fff; border-color: rgba(255,255,255,.4); }
.tvplay-eps-panel .ipp-src-nav { border-bottom-color: rgba(255,255,255,.12); }
.tvplay-eps-panel .ipp-src-btn { color: rgba(255,255,255,.55); }
.tvplay-eps-panel .ipp-src-btn.is-active { color: var(--accent); }
.tvplay-eps-panel .ipp-provider { color: rgba(255,255,255,.5); }
.tvplay-eps-panel .ipp-ep { color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.15); }
.tvplay-eps-panel .ipp-ep:hover,
.tvplay-eps-panel .ipp-ep.is-active { color: var(--accent); border-color: var(--accent); }
.tvplay-eps-panel .ipp-ep-toggle { color: var(--accent); }

/* 播放列表面板下方的「猜你喜欢」小片單（比照參考網站），跟主欄下方完整的「为你推荐」
   網格是同一組資料的縮圖版，只是給不想往下捲動的人快速看幾筆 */
.ipp-mini-rec { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); }
.ipp-mini-rec-title { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.ipp-mini-rec-item { display: flex; gap: 10px; padding: 6px 0; }
.ipp-mini-rec-item:hover .ipp-mini-rec-name { color: var(--accent); }
.ipp-mini-rec-thumb {
  flex-shrink: 0; width: 56px; aspect-ratio: 2/3; border-radius: var(--radius-sm);
  overflow: hidden; background: rgba(255,255,255,.06);
}
.ipp-mini-rec-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ipp-mini-rec-info { flex: 1; min-width: 0; align-self: center; }
.ipp-mini-rec-name { font-size: 13px; color: rgba(255,255,255,.85); transition: color .15s; }
.ipp-mini-rec-actor { font-size: 11px; color: rgba(255,255,255,.45); margin-top: 3px; }

@media (max-width: 1024px) {
  .tvplay-eps-panel { width: 280px; }
}
@media (max-width: 767px) {
  .tvplay-row { flex-direction: column; }
  .tvplay-eps-panel { width: 100%; max-height: 320px; }
}