/* ========================================
   Plyr HLS Player - Clean & Responsive
======================================== */

/* iOS フルスクリーン字幕対応 */
:root {
  --webkit-text-track-display: none;
}

/* リセット・ベース */
*,*::before,*::after { box-sizing:border-box; }

/* プレーヤーコンテナ */
.plyr-player-container {
  position: relative;
  width: 100%;
  margin: 0 auto;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}

/* モバイル: 16:9 アスペクト比 */
@media (max-width: 1023px) {
  .plyr-player-container {
    aspect-ratio: 16/9;
  }
}

.plyr-player-container .plyr {
  width: 100%;
  height: 100%;
  max-height: 100vh;
}

.plyr-player-container video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  transition: opacity 200ms ease;
}

.plyr-player-container video.plyr-player__video--transitioning {
  opacity: 0;
}

.plyr-player-container .plyr-player--controls-hidden .plyr__controls {
  opacity: 0;
  pointer-events: none;
}

.plyr-player-container .plyr-player--controls-hidden .plyr__control--overlaid {
  opacity: 1;
  pointer-events: none;
  transform: scale(0.9);
}

/* iOS フルスクリーン: セーフエリア対応 */
.plyr--fullscreen-active .plyr__controls {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
}

/* デスクトップ: 最大幅制限 */
@media (min-width: 1024px) {
  .plyr-player-container {
    height: auto;
    max-width: 100%;
  }
  
  .plyr-player-container .plyr {
    aspect-ratio: 16/9;
  }
}

/* Plyr カスタマイズ */
.plyr {
  --plyr-color-main: #1d9bf0;
  --plyr-font-family: "M PLUS 1p", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --plyr-font-size-large: 1.4rem;
  --plyr-font-size-xlarge: 2.5rem;
  --plyr-font-smoothing: true;
}

/* iOS フルスクリーン時の字幕表示修正 */
.plyr--full-ui ::-webkit-media-text-track-container {
  display: var(--webkit-text-track-display);
}

/* ブラウザネイティブ字幕コンテナを非表示 (Plyr の ::cue のみ使用) */

.plyr video::-webkit-media-text-track-container,
.plyr video::-webkit-media-text-track-display {
  display: none !important;
  opacity: 0 !important;
}

/* Firefox のネイティブ字幕コンテナ非表示 (Plyr の描画のみ使用) */
.plyr video::-moz-text-track-container,
.plyr video::-moz-text-track-display,
.plyr video::-moz-text-track-text {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* iOS フルスクリーン時のみネイティブコンテナを表示 */
.plyr--full-ui video::-webkit-media-text-track-container {
  display: var(--webkit-text-track-display);
}

.plyr--full-ui video::-webkit-media-text-track-display {
  display: var(--webkit-text-track-display);
}

/* 字幕スタイル統一 (YouTube風) */
video::cue {
  font-family: var(--plyr-font-family);
  font-weight: 400;
  line-height: 1.25;
  color: #fff;
  background: rgba(0, 0, 0, 0.75);
  text-shadow: none;
  padding: 0.2em 0.5em;
  border-radius: 4px;
}

/* iOS タップハイライト除去 */
.plyr button,
.plyr input[type=range] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* コントロール非表示時の背景グラデーション調整 */
.plyr--video .plyr__controls {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}

/* reduced motion 対応 */
@media (prefers-reduced-motion: reduce) {
  .plyr * {
    transition: none !important;
  }
}