:root { --overlay-bg: rgba(0,0,0,0.55); --accent: #e50914; }
html, body { height:100%; margin:0; background:#000; color:#fff; font-family:Segoe UI,Roboto,Arial,sans-serif; overflow:hidden; }
#videoWrapper { position:fixed; inset:0; width:100vw; height:100vh; display:flex; align-items:center; justify-content:center; z-index:0; }
video { width:100vw; height:100vh; object-fit:contain; transition:opacity .45s ease; }
/* Guide + channels */
#guide { position:fixed; top:0; right:0; height:100vh; width:320px; background:linear-gradient(180deg, rgba(0,0,0,0.9), rgba(0,0,0,0.85)); padding:1rem; box-sizing:border-box; transform:translateX(100%); transition:transform .32s cubic-bezier(.2,.9,.2,1); overflow-y:auto; overflow-x:hidden; z-index:60; }
#guide.visible { transform:none; }
#guide input { width:100%; padding:8px 10px; margin-bottom:10px; border:none; border-radius:6px; background:rgba(255,255,255,0.1); color:#fff; font-size:1rem; outline:none; }
.channel { display:flex; align-items:center; gap:.75rem; padding:.5rem; border-radius:8px; cursor:pointer; }
.channel img { width:56px; height:32px; object-fit:contain; border-radius:4px; }
.channel .name { font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.channel:hover, .channel.selected { background:rgba(255,255,255,0.06); }
/* Overlay + badges */
#overlay { position:fixed; left:24px; top:22px; background:var(--overlay-bg); border-radius:14px; padding:10px 16px; backdrop-filter:blur(5px); z-index:55; box-shadow:0 6px 18px rgba(0,0,0,0.6); }
#overlay img { width:96px; height:72px; object-fit:contain; border-radius:10px; }
#resolutionBadge { position:fixed; right:24px; top:20px; background:rgba(0,0,0,0.6); padding:6px 10px; border-radius:8px; font-weight:600; z-index:55; opacity:0; transition:opacity .3s; }
#resolutionBadge.show { opacity:1; }
/* Progress + live indicator */
#progressWrap { position:fixed; left:24px; right:24px; bottom:18px; height:8px; z-index:55; display:flex; align-items:center; gap:12px; }
#progressBar { flex:1; height:6px; background:rgba(255,255,255,0.12); border-radius:4px; overflow:hidden; position:relative; }
#bufferBar { position:absolute; left:0; top:0; height:6px; background:rgba(255,255,255,0.35); width:0%; }
#playedBar { position:absolute; left:0; top:0; height:6px; background:var(--accent); width:0%; }
#liveIndicator { position:fixed; right:24px; top:70px; background:var(--accent); color:#fff; padding:4px 8px; border-radius:6px; font-weight:700; font-size:.86rem; z-index:55; }
/* Spinner */
#spinner { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:70; display:none; }
.spinner-dot { width:12px; height:12px; background:rgba(255,255,255,0.95); border-radius:50%; display:inline-block; margin:6px; animation:spin .9s linear infinite; }
.spinner-dot:nth-child(2){animation-delay:.12s;}
.spinner-dot:nth-child(3){animation-delay:.24s;}
@keyframes spin { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
/* Channel number overlay */
#channelNumber { position:fixed; left:50%; top:45%; transform:translate(-50%,-50%); background:rgba(0,0,0,0.65); padding:14px 22px; border-radius:12px; font-size:3.2rem; font-weight:700; z-index:80; opacity:0; transition:opacity .2s; }
#channelNumber.show { opacity:1; }
/* Fullscreen button */
#fullscreenBtn { position:fixed; right:24px; bottom:24px; z-index:90; padding:8px 12px; background:#e50914; color:#fff; border:none; border-radius:6px; font-weight:600; cursor:pointer; }
/* Play Overlay */
#playOverlay { position:fixed; inset:0; background:rgba(0,0,0,0.55); display:flex; align-items:center; justify-content:center; z-index:75; cursor:pointer; }
#playOverlay button { background: linear-gradient(135deg, #ffa733, #ff8800); border:none; border-radius:50%; width:90px; height:90px; display:flex; align-items:center; justify-content:center; box-shadow:0 0 20px rgba(255,136,0,0.5); animation:pulse 1.5s infinite; }
#playOverlay svg { width:38px; height:38px; fill:white; margin-left:4px; }
@keyframes pulse { 0%{transform:scale(1); box-shadow:0 0 10px rgba(255,136,0,0.4);} 50%{transform:scale(1.1); box-shadow:0 0 25px rgba(255,136,0,0.8);} 100%{transform:scale(1); box-shadow:0 0 10px rgba(255,136,0,0.4);} }
/* Edge zone */
#edgeZone { position:fixed; top:0; right:0; width:60px; height:100vh; background:transparent; z-index:50; pointer-events:none; }
@media (hover: none) and (pointer: coarse) { #edgeZone { pointer-events:auto; } }
/* Notification */
#notify { position: fixed; top:20px; left:50%; transform: translateX(-50%); background: rgba(255,140,0,0.9); color:#fff; padding:10px 18px; border-radius:8px; font-weight:600; z-index:120; opacity:0; transition: opacity 0.4s ease, top 0.4s ease; }
#notify.show { opacity:1; top:40px; }

/* === FIXED: REMOVED DUPLICATE/NESTED .channel.selected === */
.channel.selected {
  background: rgba(0, 170, 255, 0.3) !important;
  transform: scale(1.03);
  border-left: 4px solid #00aaff;
  font-weight: bold;
}

/* Responsive */
@media(max-width:900px){
  #guide{width:260px;}
  #overlay img{width:72px;height:56px;}
}