.twang-custom-youtube{
  overflow:hidden;
  border-radius:0 0 18px 18px;
  background:#041526;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.twang-youtube-stage{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  overflow:hidden;
}
.twang-youtube-mount,.twang-youtube-mount iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
.twang-youtube-mount iframe{
  pointer-events:none; /* prevents clicks/linkbacks inside YouTube */
}
.twang-youtube-bigplay{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:76px;height:76px;
  border:0;border-radius:50%;
  display:grid;place-items:center;
  font-size:2rem;
  padding-left:6px;
  background:linear-gradient(135deg,#0aa53b,#087c31);
  color:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.42);
  cursor:pointer;
  z-index:3;
}
.twang-custom-youtube.is-playing .twang-youtube-bigplay{opacity:0;pointer-events:none}
.twang-youtube-controls{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:58px;
  padding:10px 13px;
  background:linear-gradient(180deg,#082947,#041d35);
  color:#fff;
}
.twang-youtube-controls button{
  border:0;
  background:transparent;
  color:#fff;
  cursor:pointer;
  font-size:1.12rem;
  min-width:34px;
  min-height:34px;
  border-radius:8px;
}
.twang-youtube-controls button:hover{background:rgba(255,255,255,.1)}
.twang-youtube-time,.twang-youtube-duration{
  font-size:.78rem;
  font-weight:800;
  min-width:38px;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.twang-youtube-progress{
  flex:1 1 auto;
  min-width:70px;
  accent-color:#18b74b;
}
.twang-youtube-volume{
  width:80px;
  accent-color:#18b74b;
}
@media(max-width:600px){
  .twang-youtube-controls{gap:5px;padding:8px}
  .twang-youtube-volume{display:none}
  .twang-youtube-bigplay{width:62px;height:62px;font-size:1.6rem}
  .twang-youtube-time,.twang-youtube-duration{font-size:.7rem;min-width:34px}
}


/* =========================================================
   TwangESL custom player for uploaded MP4 / MOV / WebM video
   ========================================================= */
.twang-raw-video{
  overflow:hidden;
  border-radius:18px;
  background:#041526;
  box-shadow:0 12px 32px rgba(0,0,0,.16);
  width:100%;
}
.twang-raw-stage{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  overflow:hidden;
}
.twang-raw-stage video{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  border-radius:0!important;
  background:#000!important;
}
.twang-raw-watermark{
  position:absolute;
  top:14px;
  right:14px;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:10px;
  background:rgba(3,21,38,.72);
  backdrop-filter:blur(5px);
  pointer-events:none;
  box-shadow:0 6px 18px rgba(0,0,0,.2);
}
.twang-raw-watermark img{
  display:block;
  width:auto!important;
  height:26px!important;
  max-width:145px!important;
  object-fit:contain;
}
.twang-raw-bigplay{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:76px;
  height:76px;
  border:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:2rem;
  padding-left:6px;
  background:linear-gradient(135deg,#0aa53b,#087c31);
  color:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.42);
  cursor:pointer;
  z-index:5;
}
.twang-raw-video.is-playing .twang-raw-bigplay{
  opacity:0;
  pointer-events:none;
}
.twang-raw-controls{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:58px;
  padding:10px 13px;
  background:linear-gradient(180deg,#082947,#041d35);
  color:#fff;
}
.twang-raw-controls button{
  border:0;
  background:transparent;
  color:#fff;
  cursor:pointer;
  font-size:1.12rem;
  min-width:34px;
  min-height:34px;
  border-radius:8px;
}
.twang-raw-controls button:hover{background:rgba(255,255,255,.1)}
.twang-raw-time,.twang-raw-duration{
  font-size:.78rem;
  font-weight:800;
  min-width:38px;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.twang-raw-progress{
  flex:1 1 auto;
  min-width:70px;
  accent-color:#18b74b;
}
.twang-raw-volume{
  width:80px;
  accent-color:#18b74b;
}
@media(max-width:600px){
  .twang-raw-controls{gap:5px;padding:8px}
  .twang-raw-volume{display:none}
  .twang-raw-bigplay{width:62px;height:62px;font-size:1.6rem}
  .twang-raw-time,.twang-raw-duration{font-size:.7rem;min-width:34px}
  .twang-raw-watermark{top:8px;right:8px;padding:5px 8px}
  .twang-raw-watermark img{height:20px!important;max-width:110px!important}
}


/* TwangESL watermark over YouTube's lower-right branding area */
.twang-youtube-brand-cover{
  position:absolute;
  right:8px;
  bottom:8px;
  z-index:8;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:118px;
  min-height:38px;
  padding:5px 9px;
  border-radius:9px;
  background:rgba(3,21,38,.88);
  box-shadow:0 5px 18px rgba(0,0,0,.35);
  pointer-events:none;
  backdrop-filter:blur(4px);
}
.twang-youtube-brand-cover img{
  display:block!important;
  width:auto!important;
  height:25px!important;
  max-width:135px!important;
  object-fit:contain!important;
}

/* Ensure nothing inside YouTube can be clicked to leave TwangESL. */
.twang-youtube-mount iframe{
  pointer-events:none!important;
  user-select:none!important;
}

@media(max-width:600px){
  .twang-youtube-brand-cover{
    right:6px;
    bottom:6px;
    min-width:92px;
    min-height:31px;
    padding:4px 7px;
  }
  .twang-youtube-brand-cover img{
    height:19px!important;
    max-width:105px!important;
  }
}