body.tgppvg-open { overflow: hidden; }

/* Thumbnail preview */
.tgppvg-thumb { position: relative; cursor: pointer; width: 100%; }/* Square crop for 16:9 iframe preview */
.tgppvg-thumb-aspect{ position:relative; width:100%; padding-top:100%; overflow:hidden; background: transparent; }
.tgppvg-thumb-iframe{
  position:absolute;
  top:50%;
  left:50%;
  width:178%;   /* 16:9 -> to cover 1:1 needs ~1.78x width */
  height:100%;
  transform:translate(-50%,-50%);
  border:0;
  pointer-events:none;
  max-width:none;
}

.tgppvg-play-badge {
  position: absolute; inset: 0; display: block;
  background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0.15), rgba(0,0,0,0.35));
}
.tgppvg-play-badge::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
  border-radius: 999px; background: rgba(0,0,0,0.55);
}
.tgppvg-play-badge::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-38%, -50%);
  width: 0; height: 0;
  border-left: 14px solid #fff;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

/* Modal */
.tgppvg-modal { position: fixed; inset: 0; z-index: 999999; }
.tgppvg-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.75); }
.tgppvg-panel {
  position: absolute; top: 50%; left: 50%;
  width: min(980px, calc(100% - 32px));
  transform: translate(-50%, -50%);
}
.tgppvg-close {
  position: absolute; right: -6px; top: -44px;
  width: 40px; height: 40px;
  border: 0; border-radius: 999px;
  background: rgba(0,0,0,0.6); color: #fff;
  font-size: 26px; line-height: 40px;
  cursor: pointer;
}
.tgppvg-aspect {
  position: relative; width: 100%;
  padding-top: 56.25%;
  background: #000; border-radius: 10px; overflow: hidden;
}
.tgppvg-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media screen and (min-width:1024px){
	.tgppvg-play-badge{
		display:none;
	}
}