/* Restyle only the existing video-player close link. */
.player > a.close-player {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 20 !important;
  display: block !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.3) !important;
  border-radius: 50% !important;
  background-color: rgba(12,20,31,.7) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4 4l12 12M16 4L4 16' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 18px 18px !important;
  color: #fff !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  cursor: pointer;
}
.player > a.close-player > i { display: none !important; }
.player > a.close-player:hover,
.player > a.close-player:focus {
  background-color: rgba(13,53,62,.8) !important;
  border-color: #38c5cf !important;
  outline: 2px solid rgba(56,197,207,.25);
  outline-offset: 2px;
}
@media (pointer: coarse), (max-width: 600px) {
  .player > a.close-player { width: 30px !important; height: 30px !important; background-size: 14px 14px !important; top: 10px !important; right: 10px !important; }
}

/* Keep a 44px touch target around the smaller mobile circle. */
@media (pointer: coarse), (max-width: 600px) {
  .player > a.close-player::after { content: ""; position: absolute; top: -7px; right: -7px; bottom: -7px; left: -7px; border-radius: 50%; }
}