/* =========================
   PLAYER WRAPPER
========================= */
#player-box{
  position:relative;
  width:100%;
  height:100%;

  border-radius:18px;
  overflow:hidden;

  background:#000;

  box-shadow:
    0 40px 120px rgba(0,0,0,0.85),
    inset 0 0 100px rgba(0,229,255,0.05);

  transition:0.3s ease;
}

/* =========================
   VIDEO ELEMENT
========================= */
#videoPlayer{
  width:100%;
  height:100%;
  object-fit:cover;

  background:#000;

  transition:0.3s ease;
}

/* =========================
   CINEMATIC OVERLAY (FILM FEEL)
========================= */
#player-box::after{
  content:"";
  position:absolute;
  inset:0;

  background:
    radial-gradient(circle at center, transparent 35%, rgba(0,0,0,0.65)),
    linear-gradient(to top, rgba(0,0,0,0.6), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,0.35), transparent 40%);

  pointer-events:none;
}

/* =========================
   STATUS BOX (LIVE / BUFFER)
========================= */
#statusBox{
  position:absolute;
  top:14px;
  left:14px;

  padding:8px 12px;

  font-size:12px;
  color:#fff;

  background:rgba(0,0,0,0.45);
  backdrop-filter: blur(14px);

  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;

  display:flex;
  align-items:center;
  gap:8px;

  z-index:5;
}

/* LIVE DOT */
#statusBox::before{
  content:"";
  width:8px;
  height:8px;

  border-radius:50%;
  background:#00e5ff;

  box-shadow:0 0 15px #00e5ff;
}

/* =========================
   WATERMARK (LOCKED BRAND)
========================= */
#watermark{
  position:absolute;
  bottom:14px;
  right:14px;

  font-size:12px;
  letter-spacing:1px;

  color:#00e5ff;
  opacity:0.85;

  user-select:none;
  pointer-events:none;

  text-shadow:0 0 20px rgba(0,229,255,0.4);

  z-index:5;
}

/* =========================
   BRAND TICKER (ANIMATED TEXT AREA)
========================= */
#brandTicker{
  position:absolute;
  bottom:14px;
  left:14px;

  font-size:12px;

  color:rgba(255,255,255,0.75);

  padding:6px 10px;
  border-radius:10px;

  background:rgba(0,0,0,0.35);
  backdrop-filter: blur(12px);

  border:1px solid rgba(255,255,255,0.06);

  overflow:hidden;
  white-space:nowrap;

  max-width:60%;
}

/* =========================
   PLAYER CONTROLS BAR
========================= */
#player-controls{
  display:flex;
  gap:10px;
  flex-wrap:wrap;

  margin-top:12px;

  align-items:center;
}

/* BUTTONS */
#player-controls button,
#player-controls select{
  padding:10px 14px;

  border-radius:12px;

  border:1px solid rgba(255,255,255,0.08);

  background:rgba(255,255,255,0.06);
  color:#fff;

  cursor:pointer;

  backdrop-filter: blur(12px);

  transition:0.25s ease;

  font-size:13px;
}

/* HOVER EFFECT */
#player-controls button:hover{
  background:#00e5ff;
  color:#000;

  transform:translateY(-2px) scale(1.05);

  box-shadow:0 10px 25px rgba(0,229,255,0.25);
}

/* ACTIVE CLICK */
#player-controls button:active{
  transform:scale(0.98);
}

/* SELECT FIX (FIX WHITE TEXT ISSUE) */
#player-controls select{
  outline:none;
  appearance:none;

  color:#fff;
  background:rgba(255,255,255,0.06);
}

#player-controls select option{
  background:#111;
  color:#fff;
}

/* =========================
   LOADING STATE
========================= */
.loading{
  animation:pulseGlow 1.5s infinite;
}

@keyframes pulseGlow{
  0%{
    box-shadow:0 0 10px rgba(0,229,255,0.2);
  }
  50%{
    box-shadow:0 0 30px rgba(0,229,255,0.4);
  }
  100%{
    box-shadow:0 0 10px rgba(0,229,255,0.2);
  }
}

/* =========================
   FULLSCREEN MODE
========================= */
:fullscreen #player-box{
  border-radius:0;
}

/* =========================
   BUFFER STATE VISUAL
========================= */
.buffering #videoPlayer{
  filter:blur(2px) brightness(0.7);
}

/* =========================
   TV MODE OPTIMIZATION
========================= */
@media (min-width: 1600px){

  #statusBox,
  #brandTicker,
  #watermark{
    font-size:14px;
  }

  #player-controls button,
  #player-controls select{
    font-size:14px;
    padding:12px 16px;
  }
}

#subtitleBox{
  font-family: Arial, sans-serif;
  text-shadow: 0 0 10px rgba(0,0,0,0.8);
}