@import url('https://fonts.googleapis.com/css2?family=Onest:wght@100..900&display=swap');

:root {
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --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;
}

/* ================= VIDEO ================= */
#videoWrapper {
  position:fixed;
  inset:0;
  width:100vw;
  height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:0;
}

video {
  width:100vw;
  height:100dvh;
  object-fit:contain;
  transition:opacity .45s ease;
  opacity:0;
}

video.loaded { opacity:1; }

/* ================= FLOATING GLASS GUIDE ================= */
#guide {
  position: fixed;
  top: 24px;                  /* Detached from top */
  right: 24px;                /* Detached from right */
  bottom: 24px;               /* Detached from bottom */
  left: auto;
  width: 360px;               /* Wider for premium floating feel */
  max-width: calc(100vw - 48px); /* Responsive on small screens */
  height: auto;
  max-height: calc(100dvh - 32px);
  background: rgba(10, 10, 15, 0.35);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 32px;        /* Big soft rounded corners */
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 
    0 30px 60px rgba(0, 0, 0, 0.6),
    0 0 50px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  padding: 1.2rem;
  box-sizing: border-box;
  transform: translateX(120%);
  transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.2, 1);
  overflow: hidden;
  z-index: 60;
  display: flex;
  flex-direction: column;
}

#guide.visible { 
  transform: translateX(0); 
}

#guide > #channelBtn {
  display: none !important;
}


/* Search Input - Glass field with strong iOS-like glow */
#searchInput {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 10px 16px;
  margin: 2.8rem 0 1rem 0;
  color: #fff;
  font-size: 1rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.3s ease;
  box-sizing: border-box;
  width: 92%;
  flex-shrink: 0;
  outline: none;
}

#searchInput:focus {
  background: rgba(255, 255, 255, 0.15);
  border-color: #007aff;
  box-shadow:
    0 0 0 3px rgba(0, 122, 255, 0.3),
    0 0 20px rgba(0, 122, 255, 0.4);
  transform: scale(1.02);
}

/* Carousel inside guide */
.carousel-wrapper {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  margin: 8px 0 20px 0;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.3);
}

/* Top 10 section */
.top-watch-section {
  margin: 16px 0;
  flex-shrink: 0;
}

.top-watch-section > div:first-child {
  color: #e50914;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 8px;
  padding: 0 8px;
}

/* ================= CHANNEL LIST CONTAINER ================= */
#channelListContainer {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-top: 8px;
  -webkit-overflow-scrolling: touch;    /* smooth + helps repaint */
  transform: translateZ(0);             /* force GPU layer */
  will-change: transform, scroll-position; /* hint browser to optimize */
  backface-visibility: hidden;          /* extra anti-flicker */
}


#channelListContainer::-webkit-scrollbar {
  width: 0px;
}

/* ================= CHANNEL LIST ITEMS ================= */
.channel {
  display: flex !important;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none !important;      /* ← force no border ever */
  outline: none !important;
}

.channel img {
  width: 50px;
  height: 50px;
  background: rgba(255,255,255,0.1);
  border-radius: 12px;
  object-fit: contain;
  padding: 4px;
  flex-shrink: 0;
}

.channel .name {
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.channel:hover,
.channel.selected {
  background: rgba(255, 255, 255, 0.08);
}

.channel.selected {
  background: rgba(96, 165, 250, 0.25) !important;
  transform: scale(1.03);
  box-shadow: inset 4px 0 0 #60a5fa;   /* left colored "border" using shadow – no repaint glitch */
  font-weight: bold;
}

/* ================= OVERLAYS ================= */
#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);
  display: none !important;
}

#overlay img {
  width:96px;
  height:72px;
  object-fit:contain;
  border-radius:10px;
}

#resolutionBadge {
  position:fixed;
  left: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 BAR ================= */
#progressWrap {
  position:fixed;
  left:24px;
  right:24px;
  bottom:18px;
  height:8px;
  z-index:55;
  display:flex;
  align-items:center;
  gap:12px;
  padding-bottom: 6px;
}

#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 ================= */
#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 BTN ================= */
#fullscreenBtn {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  padding: 8px 12px;
  background: transparent;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 20px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

#fullscreenBtn:hover {
  opacity: 0.6;
}

/* ================= 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 ZONES ================= */
#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; }
}

#focusEdge { pointer-events:auto; }

#rightEdgeTouchStrip {
  background: transparent;
}

/* ================= NOTIFY ================= */
#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;
  will-change: top, opacity;
}

#notify.show {
  opacity:1;
  top:40px;
}

/* ================= RESPONSIVE ================= */
@media(max-width:900px){
  #guide {
    width: 320px;
    top: 16px;
    right: 16px;
    bottom: 16px;
    border-radius: 28px;
  }
}

@media(max-width:480px){
  #guide {
    width: calc(100vw - 32px);
    left: 16px;
    right: 16px;
    top: 16px;
    bottom: calc(16px + var(--safe-bottom));
    max-height: calc(100dvh - 32px - var(--safe-bottom));
  }
}

/* === CHANNEL BUTTON OVERRIDE === */
#channelBtn {
  background: linear-gradient(180deg, rgba(0,0,0,0.9), rgba(0,0,0,0.85)) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.6) !important;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* ================= CAROUSEL STYLES ================= */
.carousel-wrapper {
  width: 100%;
  max-width: 100%;
  height: 180px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  margin-bottom: 16px;
  position: relative;
  background: rgba(0, 0, 0, 0.3);
}

.slider {
  display: flex;
  height: 100%;
  transition: transform 1s ease;
}

.slide {
  flex: 0 0 100%;
  height: 100%;
  position: relative;
}

.slide img.slide-foreground {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: black;
}

.slide-content {
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: #fff;
  z-index: 2;
  max-width: 90%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}

.slide-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}

.slide-description {
  font-size: 0.9rem;
  opacity: 0.85;
  margin: 0;
  line-height: 1.2;
}

.slide-badge {
  background: rgba(229,9,20,0.85);
  color: white;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1200px) {
  .slide-content { max-width: 50%; }
  .slide-title { font-size: 1rem; }
  .slide-description { font-size: 0.85rem; }
  .slide-badge { font-size: 0.65rem; padding: 3px 8px; }
}

@media (max-width: 768px) {
  .slide-content { max-width: 60%; bottom: 4%; left: 3%; }
  .slide-title { font-size: 0.9rem; }
  .slide-description { font-size: 0.75rem; }
  .slide-badge { font-size: 0.6rem; padding: 2px 6px; }
}

@media (max-width: 480px) {
  .slide-content { max-width: 70%; bottom: 3%; left: 3%; }
  .slide-title { font-size: 0.8rem; }
  .slide-description { font-size: 0.65rem; }
  .slide-badge { font-size: 0.55rem; padding: 2px 5px; }
}

#categoryMenu {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 360px;
  max-width: calc(100vw - 48px);
  max-height: 70vh;
  background: rgba(10, 10, 15, 0.45);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border-radius: 32px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
  padding: 24px;
  box-sizing: border-box;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.2, 0.9, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
}

#categoryMenu.visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

#categoryList {
  width: 100%;
  overflow-y: auto;
  scrollbar-width: none;
}

#categoryList::-webkit-scrollbar { width: 0; }

.category-item {
  padding: 16px 20px;
  margin: 8px 0;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  text-align: center;
  font-size: 1.3rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #fff;
  outline: none;
}

.category-item.selected,
.category-item:focus {
  background: rgba(229,9,20,0.6) !important;
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(229,9,20,0.6);
  border: 2px solid white;
}
.category-item:hover,
.category-item.focused {
  background: rgba(96, 165, 250, 0.35);
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(96, 165, 250, 0.3);
}

.category-item.selected {
  background: #60a5fa !important;
  border: 3px solid #fff;
}

#categoryList > div {
  border-radius: 8px;
  margin: 4px 8px;
}





#categoryGuide {
  position: fixed;
  top: 24px;
  right: 24px;
  bottom: 24px;
  left: auto;
  width: 360px;
  max-width: calc(100vw - 48px);
  background: rgba(10, 10, 15, 0.45);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border-radius: 32px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
  padding: 24px;
  box-sizing: border-box;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateX(120%);
  transition: all 0.45s cubic-bezier(0.2, 0.9, 0.2, 1);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
}

#categoryGuide.open {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
}

/* Title */
#categoryGuide .title {
  font-size: 1.6rem;          /* smaller than before */
  font-weight: 700;
  margin-bottom: 24px;
  text-align: center;
  color: #ffffff;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* Category list container */
#categoryList {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
}

#categoryList::-webkit-scrollbar {
  width: 0;
}

/* Category items - shorter width, better text handling */
#categoryList > div {
  padding: 8px 12px;              /* very tight padding */
  margin: 4px 0;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  font-size: 0.98rem;             /* slightly smaller again if needed */
  font-weight: 500;
  color: #e0e0e0;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 16px);   /* leave some breathing room inside container */
  box-sizing: border-box;
  display: block;                 /* force block behavior */
}

#categoryList > div:hover,
#categoryList > div.selected,
#categoryList > div:focus {
  background: rgba(96, 165, 250, 0.35);
  color: white;
}

/* Hover & selected states */
#categoryList > div:hover {
  background: rgba(96, 165, 250, 0.25);
  color: #ffffff;
  border-color: rgba(96, 165, 250, 0.4);
  transform: translateX(4px);
}

#categoryList > div.selected,
#categoryList > div:focus {
  background: #60a5fa;
  color: #000000;
  font-weight: 600;
  border: 2px solid #ffffff;
  box-shadow: 0 0 12px rgba(96, 165, 250, 0.5);
  transform: translateX(4px);
}

#categoryList > div.selected {
  background: #60a5fa !important;
  color: #000;
  font-weight: 800;
  border: 3px solid #fff;
}




#categoriesBtn {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 95;
  padding: 10px 18px;
  background: rgba(10, 10, 15, 0.35);      /* same dark glass as guide */
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 16px;                     /* softer rounded corners */
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  color: #ffffff;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

/* Hover & focus states - subtle glow like guide */
#categoriesBtn:hover,
#categoriesBtn:focus {
  background: rgba(10, 10, 15, 0.45);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6),
              0 0 0 3px rgba(96, 165, 250, 0.3);
}

/* Optional: slight scale on active press */
#categoriesBtn:active {
  transform: scale(0.97);
}

/* Auto-hide when guide is open  */
#guide.visible ~ #categoriesBtn {
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
}

/* Hide Categories button when category guide is open */
#categoryGuide.open ~ #categoriesBtn {
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);  /* optional subtle slide down */
  transition: all 0.3s ease;
}

#titleOverlay {
  font-weight: 900 !important;          /* maximum boldness */
  letter-spacing: 1.2px;
  text-shadow: 0 4px 12px rgba(0,0,0,0.7);
  margin-bottom: 12px !important;    /* pushes title up a bit, creates space below */
  line-height: 1.1;                  /* tightens vertical spacing inside the text itself */
}

@media (min-width: 768px) {
  #titleOverlay {
    margin-bottom: 16px !important;  /* more space on desktop */
  }
}


#categoryGuide .title {
  font-weight: 800 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}