/* ==================== 合併後 CSS（已去除重複、保留原意） ==================== */
/* 🎥 Plyr 外觀 */
#videos-page .plyr {
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(255, 70, 80, 0.3);
  background-color: #111;
}

/* 進度條填色質感 */
#videos-page .plyr--full-ui input[type=range]{
  --plyr-range-fill-background: linear-gradient(135deg,#FF416C,#FF4B2B);
}

/* 控制鍵：通用外觀（尺寸留給 RWD 調整） */
#videos-page .plyr__control{
  background: linear-gradient(135deg,#FF416C,#FF4B2B);
  border-radius: 50%;
  color:#fff;
  transition: transform .3s ease, box-shadow .3s ease;
  box-shadow: 0 0 5px rgba(255,75,43,.5);
}
#videos-page .plyr__control:hover{
  transform: scale(1.15);
  box-shadow: 0 0 15px rgba(255,65,108,.6);
}
#videos-page .plyr__control.plyr__tab-focus{
  outline:2px solid #FF4B2B;
  box-shadow:0 0 0 5px rgba(255,75,43,.3);
}

/* 中央播放鍵 */
#videos-page .plyr__control--overlaid{
  position:absolute; top:50%; left:50%;
  transform: translate(-50%,-50%);
  z-index:9;
  background: linear-gradient(135deg,#FF416C,#FF4B2B);
  box-shadow: 0 0 15px rgba(255,65,108,.5);
  transition: box-shadow .3s ease, transform .3s ease;
}
#videos-page .plyr__control--overlaid:hover{
  transform: translate(-50%,-50%) scale(1.1);
  box-shadow: 0 0 20px rgba(255,65,108,.7);
}

/* 表格透明化 */
.custom-table,
.custom-table th,
.custom-table td,
.custom-table tr{
  background-color: transparent !important;
  color:#fff !important;
}

/* 版面保護 */
html,body{ max-width:100%; overflow-x:hidden; }

/* 絕對定位基準 */
.plyr{ position:relative; }

/* 影片鋪滿容器 */
.video-wrap .plyr,
.video-wrap video{
  position:absolute; top:0; left:0;
  width:100% !important; height:100% !important;
}

/* ==================== Desktop ≥992px ==================== */
@media (min-width: 992px){
  .video-wrap{
    position:relative;
    width:100%;
    background:#000;
    overflow:hidden;
    height:auto !important;
    aspect-ratio: 16 / 9;
    border-radius:12px;
  }

  /* 右側廣告容器 */
  .r-ads{
    min-height:360px;
    display:flex !important;
    flex-direction:column !important;
    justify-content:space-between !important;
    align-items:stretch !important;
    height:auto !important;
    gap:12px !important;
    padding:0; margin:0;
  }
  .r-ads .r-ad{
    flex:1 1 50%;
    overflow:hidden;
    width:100%;
    height:auto !important;
    border-radius:12px;
    background:#111;
  }
  .r-ads .r-ad img{
    width:100%; height:100%;
    object-fit:cover; display:block;
    border-radius:12px;
  }
}

/* ==================== Mobile ≤768px ==================== */
@media (max-width: 768px){
  /* 隱藏整個右側廣告欄（解決空白高度） */
  #videos-page .movie-details-wrap .col-lg-4{ 
    display:none !important; 
    height:auto !important; 
    padding:0 !important; 
    margin:0 !important; 
  }
  .r-ads{ display:none !important; }

  /* 更扁的視比，壓高度 */
  .video-wrap{
    position:relative;
    width:100%;
    aspect-ratio: 2 / 1;
    background:#000;
    overflow:hidden;
    max-height:280px;
  }

  /* 控制列固定底部 */
  .plyr__controls{
    position:absolute !important;
    bottom:0 !important; left:0; right:0;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    padding:.5rem .5rem .25rem .5rem !important;
    gap:.5rem !important;
    background: rgba(0,0,0,.4);
    z-index:10 !important;
  }

  /* 進度條浮在控制列上方 */
  .plyr__progress{
    position:absolute !important;
    bottom:100% !important; left:0; right:0;
    width:100% !important;
    padding:0 .5rem;
    height:8px !important;
    z-index:11 !important;
  }
  .plyr__progress input[type="range"]{
    width:100% !important;
    height:6px !important;
    background: rgba(255,255,255,.3) !important;
    border-radius:4px !important;
    appearance:none !important;
    display:block !important;
    cursor:pointer !important;
  }
  .plyr__progress input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none; appearance:none;
    width:16px; height:16px; border-radius:50%;
    background: linear-gradient(135deg,#FF416C,#FF4B2B);
    box-shadow: 0 0 4px rgba(255,65,108,.5);
    border:none; cursor:pointer; margin-top:-6px;
  }
  .plyr__progress input[type="range"]::-moz-range-thumb{
    width:16px; height:16px; border-radius:50%;
    background: linear-gradient(135deg,#FF416C,#FF4B2B);
    box-shadow: 0 0 4px rgba(255,65,108,.5);
    border:none; cursor:pointer;
  }
  .plyr__progress input[type="range"]::-webkit-slider-thumb:hover,
  .plyr__progress input[type="range"]::-moz-range-thumb:hover{
    box-shadow: 0 0 6px rgba(255,65,108,.8);
    transform: scale(1.05);
  }

  /* 控制鍵：手機尺寸 */
  .plyr__control{
    width:36px !important; height:36px !important;
    padding:0 !important; font-size:0 !important;
    border:none !important; border-radius:50% !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    outline:none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-focus-ring-color: transparent !important;
    box-shadow: 0 0 6px rgba(255,65,108,.4) !important;
  }
  .plyr__control:focus,
  .plyr__control:focus-visible,
  .plyr__control:active{
    outline:none !important; border:none !important;
    box-shadow: 0 0 6px rgba(255,65,108,.5) !important;
  }
  .plyr__control svg{ width:18px !important; height:18px !important; }
  .plyr__control span{ display:none !important; }

  /* 中央大播放鍵：手機尺寸 */
  .plyr__control--overlaid{
    width:60px !important; height:60px !important; font-size:0 !important;
  }

  /* 修正 poster 拉大 */
  .plyr__poster{
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !重要;
    background-color:#000 !important;
  }
}

/* ==================== 浮水印（一般/全螢幕） ==================== */
.wm{
  position: absolute !important;
  left: auto !important;
  right: 0 !important;
  bottom: var(--wm-bottom, 56px) !important;
  z-index: 1 !important;
  opacity: .55;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity .2s ease;
  padding: 0 !important;
  margin: 0 !important;
}
.wm img{
  width: 20% !important;  /* 將被更精確規則覆蓋 */
  height: auto !important;
  max-width: none !important;
  display: block !important;
}
.plyr--fullscreen .wm{
  left: auto !important;
  right: 0 !important; 
  bottom: calc(var(--wm-bottom, 56px) + var(--wm-fs-bump, 12px)) !important;
  margin-bottom: env(safe-area-inset-bottom, 0px);
  padding: 0 !important;
  margin-right: 0 !important;
}
.plyr--fullscreen .wm img{
  width: 20% !important;
  height: auto !important;
}
/* 桌機 hover 稍亮 */
.video-wrap:hover .wm{ opacity:.7; }
/* 讓 tooltip / 設定選單 永遠在浮水印之上 */
.plyr .plyr__tooltip{ z-index:3 !important; }
.plyr .plyr__menu__container{ z-index:3 !important; }
.plyr .plyr__menu__container [role="menu"]{ z-index:3 !important; }

/* 浮水印最終覆蓋規則：貼右、寬＝播放器 1/3 */
#videos-page .video-wrap .plyr > .wm{
  position: absolute !important;
  left: auto !important;
  right: var(--wm-right-gap, 16px) !important;
  bottom: calc(var(--wm-bottom, 56px) + var(--wm-bottom-gap, 10px)) !important;
  width: 33% !important;
  z-index: 1 !important;
  opacity: .55;
  pointer-events: none;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
#videos-page .video-wrap .plyr > .wm picture,
#videos-page .video-wrap .plyr > .wm img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
}
#videos-page .video-wrap .plyr.plyr--fullscreen > .wm{
  right: var(--wm-right-gap, 16px) !important;
  bottom: calc(var(--wm-bottom, 56px) + var(--wm-fs-bump, 12px) + var(--wm-bottom-gap, 10px)) !important;
  margin-bottom: env(safe-area-inset-bottom, 0px);
}

/* ==================== 跑馬燈（Ticker） ==================== */
/* 預設關，由 JS 控制 .is-active */
.ticker{
  position:absolute; top:0; left:0; right:0;
  display:inline-flex; align-items:center;
  gap:0;
  height:auto;
  line-height:1;
  padding:.45em 12px;
  padding-right: calc(12px + 170px);
  color:#fff; font-size:13px; letter-spacing:.2px;
  background: linear-gradient(to right, rgba(0,0,0,.55), rgba(0,0,0,.35));
  backdrop-filter: blur(2px);
  border-radius:0;
  pointer-events:none;
  overflow:hidden;
  opacity:0;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
  z-index:12;
}
.ticker.is-active{ opacity:1; transform: translateY(0); }

/* 內容走馬燈 */
.ticker__inner{
  display:inline-block; white-space:nowrap;
  animation: ticker-marquee 18s linear infinite;
  will-change: transform;
  line-height:1;
}
.ticker__inner > span{
  display:inline-block; padding-right:42px;
}

/* 手機：略縮字級與右預留 */
@media (max-width: 480px){
  .ticker{
    font-size:12px;
    padding:.4em 10px;
    padding-right: calc(8px + 140px);
  }
}

/* 動畫關鍵影格 */
@keyframes ticker-marquee{
  0%{ transform: translateX(0%); }
  100%{ transform: translateX(-50%); }
}

/* 使用者偏好：減少動態時停用動畫 */
@media (prefers-reduced-motion: reduce){
  .ticker__inner{ animation:none; }
}

/* ===== Fullscreen 統一版（位置/字級） ===== */
.plyr.plyr--fullscreen .ticker,
.plyr.plyr--fullscreen-active .ticker,
.plyr:fullscreen .ticker,
.plyr:-webkit-full-screen .ticker {
  position: absolute !important;
  top: 0 !important;
  left: 0; right: 0;
  background: transparent !important;
  backdrop-filter: none !important;
  z-index: 12 !important;

  font-size: clamp(16px, 2.6vw, 26px) !important;
  --fs-scale: 1.20;
  min-height: calc(var(--ticker-h, 40px) * var(--fs-scale)) !important;

  padding: .4em 12px .4em 12px !important;
  padding-right: calc(12px + 170px) !important;
}

/* 全螢幕半透明背景條（覆蓋整個區域） */
.plyr.plyr--fullscreen .ticker::before,
.plyr.plyr--fullscreen-active .ticker::before,
.plyr:fullscreen .ticker::before,
.plyr:-webkit-full-screen .ticker::before {
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,0.25) !important;
  backdrop-filter: none !important;
  z-index:0; pointer-events:none;
}

/* 全螢幕 - 文字層 */
.plyr.plyr--fullscreen .ticker__inner,
.plyr.plyr--fullscreen-active .ticker__inner,
.plyr:fullscreen .ticker__inner,
.plyr:-webkit-full-screen .ticker__inner{
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  line-height: 1 !important;
}

/* 桌機（≥992px）與超大螢幕字級 */
@media (min-width: 992px){
  .plyr.plyr--fullscreen .ticker,
  .plyr.plyr--fullscreen-active .ticker,
  .plyr:fullscreen .ticker,
  .plyr:-webkit-full-screen .ticker {
    font-size: clamp(18px, 2.2vw, 34px) !important;
    --fs-scale: 1.25;
  }
}
.plyr.plyr--fullscreen .ticker,
.plyr:fullscreen .ticker,
.plyr:-webkit-full-screen .ticker {
  font-size: clamp(22px, 2.4vw, 80px) !important;
  --fs-scale: 1.35 !important;
}
@media (min-width: 2560px){
  .plyr.plyr--fullscreen .ticker,
  .plyr:fullscreen .ticker,
  .plyr:-webkit-full-screen .ticker {
    font-size: clamp(26px, 2.2vw, 96px) !important;
    --fs-scale: 1.45 !important;
  }
}

/* ===== Ticker 高度：用變數控制（非全螢幕=像素；全螢幕=視窗高） ===== */
#videos-page .video-wrap .plyr > .ticker{
  height: var(--ticker-fixed-h, 12.5vh) !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: grid !important;
  place-items: center start !important;
  line-height: normal !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 12 !important;
}
@supports (height: 1svh){
  #videos-page .video-wrap .plyr > .ticker{
    height: var(--ticker-fixed-h, 12.5svh) !important;
  }
}

/* 內層內容永遠以內容高度置中 */
#videos-page .video-wrap .plyr > .ticker .ticker__inner{
  align-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  height: auto !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}
#videos-page .video-wrap .plyr > .ticker .ticker__inner > span{
  display: flex !important;
  align-items: center !important;
  line-height: 1 !important;
}

/* 只顯示搬進 .plyr 容器裡的那一條；避免外部重複 */
#videos-page .video-wrap > .ticker { display: none !important; }

/* 全螢幕：高度用 1/8 視窗高 */
#videos-page .video-wrap .plyr.plyr--fullscreen > .ticker,
#videos-page .video-wrap .plyr:fullscreen > .ticker,
#videos-page .video-wrap .plyr.plyr--fullscreen-active > .ticker{
  display: grid !important;
  place-items: center start !important;
  height: 12.5dvh !important;
  min-height: 0 !重要;
  line-height: normal !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
#videos-page .video-wrap .plyr.plyr--fullscreen > .ticker .ticker__inner,
#videos-page .video-wrap .plyr:fullscreen > .ticker .ticker__inner{
  display: inline-flex !important;
  align-items: center !important;
  height: auto !important;
  line-height: 1 !important;
}

/* 永遠顯示跑馬燈（保險） */
#videos-page .video-wrap .plyr > .ticker{
  opacity: 1 !important;
  transform: none !important;
}

/* === DEBUG：粉紅色半透明背景（含全螢幕） === */
#videos-page .video-wrap .plyr > .ticker{
  background: rgba(255, 192, 203, .15) !important;
}
#videos-page .video-wrap .plyr > .ticker::before{
  background: rgba(255, 192, 203, .15) !important;
  backdrop-filter: none !important;
}

/* ⛑️ 改：只在非全螢幕時絕對定位鋪滿容器 */
.video-wrap .plyr:not(.plyr--fullscreen),
.video-wrap .plyr:not(.plyr--fullscreen) video{
  position:absolute; top:0; left:0;
  width:100%; height:100%;
}

/* ⛑️ 全螢幕保險（行動裝置特別需要） */
.plyr.plyr--fullscreen{
  position: fixed !important;
  inset: 0 !important;
  width: 100dvw !important;
  height: 100dvh !important;
  z-index: 9999 !important;
}
.plyr.plyr--fullscreen video{
  position: static !important;
  width: 100% !important;
  height: 100% !important;
}

/* 全螢幕時忽略父層任何高度限制 */
.plyr.plyr--fullscreen,
.plyr.plyr--fullscreen *{
  max-height: none !important;
}

/* ==================== 影片上方廣告遮罩（不壓控制列） ==================== */
/* 建議：讓 <a id="btn-ad"><div id="video-ad"></div></a> 放在 .video-wrap 之內 */
#btn-ad {
  position:absolute;          /* 讓整塊可點 */
  z-index:8;                  /* 在影片上、但低於控制列(10)與跑馬燈(12) */
  inset:auto;                 /* 由 JS 設 top/left/width/height */
  display:block;
  pointer-events:auto;
  text-decoration:none;
}
#video-ad {
  position:absolute;          /* 由 JS 設座標與尺寸 */
  top:0; left:0;
  width:100%; height:100%;
  background: transparent;    /* 可改成半透明測試：rgba(255,0,0,.1) */
  pointer-events:auto;
  border:0;
}