.ggvp-player{
  width:100%;
  max-width:100%;
  --ggvp-scale: 1;
}
.ggvp-stage{
  position:relative;
  width:100%;
  aspect-ratio: 16 / 9;
  background:#000;
  overflow:hidden;
  border-radius:12px;
}
.ggvp-player[data-aspect="4:3"] .ggvp-stage{ aspect-ratio: 4 / 3; }
.ggvp-player[data-aspect="1:1"] .ggvp-stage{ aspect-ratio: 1 / 1; }
.ggvp-player[data-aspect="21:9"] .ggvp-stage{ aspect-ratio: 21 / 9; }

.ggvp-video{
  position:absolute;
  left:0; top:0;
  width:100%;
  height:100%;
  background:#000;
}
.ggvp-overlay-layer{
  position:absolute;
  left:0; top:0;
  width:100%;
  height:100%;
  pointer-events:none;
}
.ggvp-el{
  position:absolute;
  box-sizing:border-box;
  transform-origin: top left;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  overflow:hidden;
  pointer-events:none;
}
.ggvp-el .ggvp-el-inner{
  width:100%;
  height:100%;
  box-sizing:border-box;
}

/*
  Most overlay labels/timestamps should remain single-line.
  (Intentional multi-line still works via <br>.)
*/
.ggvp-el[data-type="text"] .ggvp-el-inner,
.ggvp-el[data-type="timestamp"] .ggvp-el-inner,
.ggvp-el[data-type="ticker"] .ggvp-el-inner{
  white-space: nowrap;
}
.ggvp-el[data-type="text"] .ggvp-el-inner,
.ggvp-el[data-type="timestamp"] .ggvp-el-inner{
  overflow: hidden;
}
.ggvp-el img{ width:100%; height:100%; object-fit:contain; display:block; }

.ggvp-offline{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:24px;
  background:rgba(0,0,0,0.78);
  color:#fff;
  z-index:9999;
}
.ggvp-offline > *{
  max-width: 820px;
}

.ggvp-offline-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
}
.ggvp-offline-img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
}
.ggvp-offline-text{
  max-width: 920px;
  font-size: 16px;
  line-height: 1.4;
}
.ggvp-ticker{
  white-space:nowrap;
  will-change: transform;
}

.ggvp-offline[hidden]{ display:none !important; }
.ggvp-offline img{ max-width:100%; max-height:100%; object-fit:contain; display:block; }

/* Video element should fill the stage */
.ggvp-stage > video.ggvp-video,
.ggvp-video{
  position:absolute;
  left:0; top:0;
  width:100%;
  height:100%;
  background:#000;
}

/* Fullscreen button (custom so overlays stay visible) */
.ggvp-fs-btn{
  position:absolute;
  right:10px;
  bottom:10px;
  width:40px;
  height:40px;
  border-radius:10px;
  background:rgba(0,0,0,0.55);
  border:1px solid rgba(255,255,255,0.18);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:10000;
  pointer-events:auto;
  opacity:0.0;
  transform: translateY(4px);
  transition: opacity 120ms ease, transform 120ms ease;
}
.ggvp-stage:hover .ggvp-fs-btn,
.ggvp-stage:focus-within .ggvp-fs-btn{
  opacity:1;
  transform: translateY(0);
}
.ggvp-fs-btn:active{ transform: translateY(1px); }
.ggvp-fs-btn svg{ width:18px; height:18px; display:block; fill: currentColor; }

/* When stage is fullscreen, fill the viewport */
.ggvp-stage:fullscreen{
  width:100vw !important;
  height:100vh !important;
  aspect-ratio: auto !important;
  border-radius:0 !important;
}
.ggvp-stage:fullscreen .ggvp-overlay-layer{
  width:100%;
  height:100%;
}
.ggvp-stage:fullscreen .ggvp-offline{
  border-radius:0 !important;
}