.player video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.official-player { position:absolute; inset:0; width:100%; height:100%; border:0; background:#000; display:none; }
.player.youtube-mode video { display:none; }
.player.youtube-mode .official-player { display:block; }

.player .player-close {
  background: #05070baa;
  border: 1px solid #ffffff30;
  border-radius: 24px;
  padding: 10px 16px;
  backdrop-filter: blur(12px);
}

.player-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  pointer-events: none;
  background: radial-gradient(circle, #12192788, #0008);
}

.player-loading.ready { display: none; }
.player-loading span {
  width: 45px;
  height: 45px;
  border: 3px solid #ffffff38;
  border-top-color: var(--cyan);
  border-radius: 50%;
  margin: auto;
  animation: player-spin .8s linear infinite;
}
.player-loading h2 { font: 700 32px Manrope; margin: 18px 0 3px; }
.player-loading p { color: #c3c7ce; margin: 0; }

.stream-badge {
  position: absolute;
  right: 24px;
  top: 24px;
  background: #080b11bb;
  border: 1px solid #ffffff26;
  border-radius: 20px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  backdrop-filter: blur(12px);
}

.stream-badge i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff4359;
  box-shadow: 0 0 10px #ff4359;
}
.quality-badge { position:absolute; z-index:3; right:24px; bottom:24px; padding:7px 10px; border:1px solid #ffffff45; border-radius:7px; background:#05070bbb; color:#fff; font:700 11px 'DM Sans'; letter-spacing:.6px; backdrop-filter:blur(8px); }

.channel-preview { position: relative; }
.official-label { position:absolute; right:9px; top:9px; font:700 9px 'DM Sans'; letter-spacing:1px; background:#18e1c1; color:#04110f; padding:4px 6px; border-radius:4px; }
.demo-label { position:absolute; right:9px; top:9px; font:700 9px 'DM Sans'; letter-spacing:1px; background:#7d8796; color:#fff; padding:4px 6px; border-radius:4px; }
.official-chip { display:block; margin-top:6px; color:#18e1c1; font-size:8px; letter-spacing:.8px; }

@keyframes player-spin { to { transform: rotate(360deg); } }

@media (max-width: 700px) {
  .player .player-close { left: 12px; top: 12px; }
  .stream-badge { right: 12px; top: 12px; }
  .player-loading h2 { font-size: 24px; }
}