/* ================================================
   YT Custom Player - Base Styles
   ================================================ */

#youtube_wrap,
.modal-video-wrapper,
.modal-container {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}

.youtube-player {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}

/* ================================================
   カスタムコントロール
   ================================================ */
.yt-custom-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent);
  box-sizing: border-box;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#youtube_wrap:hover .yt-custom-controls,
.modal-video-wrapper:hover .yt-custom-controls,
.modal-container:hover .yt-custom-controls {
  opacity: 1;
}

/* ================================================
   再生 / 一時停止ボタン
   ================================================ */
.yt-play-pause {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 28px;
  height: 28px;
  transition: opacity 0.2s;
}

.yt-play-pause:hover {
  opacity: 0.7;
}

/* ================================================
   プログレスバー / シークバー
   ================================================ */
.yt-progress-wrap {
  flex: 1;
}

.yt-progress-bar {
  position: relative;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  cursor: pointer;
}

.yt-progress-current {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: #fff;
  border-radius: 2px;
  pointer-events: none;
  transition: width 0.1s linear;
}

.yt-seek {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 20px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* ================================================
   時間表示
   ================================================ */
.yt-time {
  flex-shrink: 0;
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
  font-family: monospace;
}

/* ================================================
   音声トグルボタン
   ================================================ */
.yt-sound-toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 28px;
  height: 28px;
  transition: opacity 0.2s;
}

/* wrap直下の独立した音声トグル（左上配置） */
#youtube_wrap > .yt-sound-toggle,
.modal-video-wrapper > .yt-sound-toggle,
.modal-container > .yt-sound-toggle {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 20;
}

.yt-sound-toggle:hover {
  opacity: 0.7;
}

/* ================================================
   手動再生（is-manual-play）
   ================================================ */
#youtube_wrap.is-manual-play:not(.is-playing) .yt-custom-controls {
  opacity: 1;
}