:root{ --bg:#0f0f0f; --card:#1b1c1f; --muted:#b9c2cf; --accent:#009dff; --radius:10px; }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{margin:0;background:var(--bg);color:#fff;font-family:"Inter";}
    /*body.no-scroll{ overflow:hidden }*/
.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.video-mute-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0,0,0,.6);
  border: none;
  border-radius: 999px;
  padding: 6px 8px;
  color: white;
  cursor: pointer;
  z-index: 3;
}

    /* --- Loading  --- */
    #loading-screen {
      position: fixed;
      inset: 0;
      background-color: #0f0f0f;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9998;
      transition: opacity 0.5s ease;
    }
    #loading-screen.fade-out {
      opacity: 0;
      pointer-events: none;
    }
    #loading-screen img {
      width: 350px;
      max-width: 80vw;
    }
    .lazy-img {
      opacity: 1;
      transition: opacity 0.5s ease-in-out;
    }
    .lazy-img.loaded {
      opacity: 1;
    }

.sticky-nav {
  position: fixed;
  top: 15px;             /* turns out sticky position dosent work???? wtf */
  left: 50%;             
  transform: translateX(-50%); 
  
  width: 70%; 
  max-width: 1200px; 
  padding: 0.6rem 2rem;
  
  background-color: rgba(20, 20, 22, 0.7); 
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px; 
  z-index: 99999;
  
  transition: all 0.3s ease;
}
    .nav-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      max-width: 1600px;
      margin: 0 auto;
    }
    .nav-logo img {
      height: 24px;
      display: block;
    }
    .nav-menu {
      display: flex;
      align-items: center;
      gap: 1.5rem;
    }
    .nav-link, .nav-button {
      text-decoration: none;
      color: var(--muted);
      font-family: "Roboto Mono", monospace;
      font-size: 0.9rem;
      font-weight: 500;
      transition: color 0.2s ease;
    }
    .nav-link:hover {
      color: #fff;
    }
    .nav-button {
      padding: 0.5rem 1rem;
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 999px;
      color: #fff;
      transition: background-color 0.2s ease, border-color 0.2s ease;
      cursor: pointer;
    }
    .nav-button:hover {
      background-color: rgba(255, 255, 255, 0.05);
      border-color: rgba(255, 255, 255, 0.3);
      color: #fff;
    }
    .nav-button.accent {
      background-color: var(--accent);
      border-color: var(--accent);
      color: #fff;
    }
    .nav-button.accent:hover {
      filter: brightness(1.1);
    }
    
    .mobile-nav-toggle {
      display: none; 
      background: none;
      border: none;
      color: #fff;
      font-size: 2rem;
      line-height: 1;
      cursor: pointer;
      z-index: 1001;
    }
    .hidden {
      display: none !important;
    }

    .notifications-img{
        height: 25px;
    }

    /* HERo */
    .hero { 
        position: relative; 
        min-height: 75vh; 
        width: 100%; 
        /* margin: 20px auto; */
    }
    .hero-slide { position:absolute; inset:0; background-position:center; background-size:cover; opacity:0; transition:opacity .5s ease; }
    .hero-slide.loaded { transition: 0.5s ease-in-out; }
    .hero-slide.active { opacity:1 }
    

    .hero-slide::after { 
        content: ""; 
        position: absolute; 
        inset: 0; 
        background:
            linear-gradient(to bottom, transparent 50%, #0f0f0f),
linear-gradient(to left, transparent 50%, #0F0F0F 90%); 
    }

    .hero-content { position:absolute; left:4vw; bottom:5vh; max-width:min(640px,88vw); z-index:2 }
    .pill { display:inline-block; padding:.35rem .6rem; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:999px; font-size:.8rem }
    .presents-text { display:inline-block; color: var(--muted); font-size:.8rem }
    .title { font-family:"Inter",sans-serif; font-size:clamp(2rem,6vw,3.6rem); line-height:1.05; margin:.35rem 0 .5rem; font-weight: bold;}
    
  
    .hero-logo {
        max-width: 500px;
        height: auto;
        display: block;
        margin: 0.5rem 0 1rem 0;
        object-fit: contain;
    }

    .desc { max-width:60ch; color:var(--muted); font-size:clamp(.9rem,1.3vw,1rem) }
    .cta { margin-top:1rem; display:inline-flex; align-items:center; gap:.6rem; padding:.9rem 1.25rem; border-radius:999px; border:none; background:var(--accent); color:#fff; font-weight:700; cursor:pointer }

    .hero-controls { position:absolute; left:4vw; bottom:3.2vh; display:flex; align-items:center; gap:.55rem; z-index:2 }
    .dot { width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.35) }
    .dot.active { background:#fff }
    .nav { position:absolute; top:50%; transform:translateY(-50%); z-index:4; border:none; background:rgba(0,0,0,.35); width:44px; height:44px; border-radius:50%; color:#fff; cursor:pointer }
    .nav:hover { background:rgba(0,0,0,.55) }
    .nav.prev { left:1.2vw } .nav.next { right:1.2vw; z-index: 4;}


    .section{ padding:24px 3.5vw 8px }
    .row-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px }
    .row-title{ font-family:"Inter",sans-serif; font-size:1.2rem; font-weight: bold;}
    .clear{ background:#e53935; border:none; color:#fff; border-radius:10px; padding:.44rem .7rem; cursor:pointer }

    .rail{ display:grid; grid-auto-flow:column; grid-auto-columns:280px; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:12px }
    .rail::-webkit-scrollbar{ height:8px }
    .rail::-webkit-scrollbar-thumb{ background:#2b2d31; border-radius:999px }

    .card{ scroll-snap-align:start; position:relative; border-radius:var(--radius); overflow:hidden; background:var(--card); cursor:pointer; transition:transform .18s ease }
    .card:hover{ transform:scale(0.98) }
    .thumb{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover }
    .meta{ padding:.55rem .7rem .7rem }
    .name{ font-size:.92rem; font-weight: bold;}
    .sub{ font-size:.8rem; color:var(--muted); margin-top:.25rem }

    /* progress (FW) */
    .progress-bar{ position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(255,255,255,.15) }
    .progress-bar > span{ display:block; height:100%; width:0; background:#46a0ff }
    
    /* Free Tag */
    .free-tag {
        position: absolute;
        background-color: var(--accent);
        color: #fff;
        padding: 5px 12px;
        border-radius: 999px;
        font-size: 0.8rem;
        font-weight: 700;
        font-family: "Inter", sans-serif;
        z-index: 2;
        line-height: 1;
        margin: 8px;
    }

    /* New Remove from CW Button */
    .remove-from-cw {
      position: absolute;
      top: 8px;
      right: 8px;
      width: 28px;
      height: 28px;
      background-color: rgba(255, 4, 0, 0.85); /* Red  */
      color: #fff;
      border-radius: 50%;
      font-size: 1.2rem;
      line-height: 1;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 3;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease, transform 0.2s ease;
      transform: scale(0.8);
    }
    .card:hover .remove-from-cw {
      opacity: 1;
      pointer-events: auto;
      transform: scale(1);
    }
    .remove-from-cw:hover {
        background-color: #ff0400;
        transform: scale(1.1);
    }


    .carousel{ position:relative }
    .caro-btn{ position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.22); background:rgba(0,0,0,.35); color:#fff; display:grid; place-items:center; cursor:pointer; z-index:2 }
    .caro-btn:hover{ background:rgba(0,0,0,.55) }
    .caro-btn.left{ left:0.5rem } .caro-btn.right{ right:0.5rem }
    .fade{ pointer-events:none; position:absolute; top:0; bottom:12px; width:8vw; z-index:1 }
    .fade.left{ left:0; background:linear-gradient(90deg,rgba(14,14,15,0.7),rgba(14,14,15,0)) }
    .fade.right{ right:0; background:linear-gradient(270deg,rgba(14,14,15,0.7),rgba(14,14,15,0)) }

    /* ANIM */
    @keyframes fadeIn { from{opacity:0} to{opacity:1} }
    @keyframes modalIn { from{ opacity:0; transform:translateY(24px) scale(.98) } to{ opacity:1; transform:translateY(0) scale(1) } }

    /* SHOW MODAL */
    .show-tags{ display:flex; flex-wrap:wrap; gap:8px; }
    .show-tags .tag{ display:inline-block; padding:.25rem .6rem; border-radius:999px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:var(--muted); font-size:.78rem; line-height:1; white-space:nowrap; backdrop-filter:blur(2px); text-align:center }

    .show-modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:9999999999; background:rgba(0,0,0,0) }
    .show-modal.open{ display:flex; animation: fadeIn .25s ease forwards; background:rgba(0,0,0,.86) }
    .show-box{ width:100%; height:100%; background:#0f0f0f; overflow:hidden; position:relative; opacity:0; transform:translateY(24px) scale(.985); box-shadow:0 20px 60px rgba(0,0,0,.5); overflow: auto;}
    .show-modal.open .show-box{ animation: modalIn .3s ease forwards }
    .show-close{ position:absolute; top:10px; right:12px; font-size:28px; border:none; background:transparent; color:#fff; cursor:pointer; z-index:3; text-shadow: black 0px 0px 20px;}

    .show-banner{ position:relative; height:75%; background-position:center; background-size:cover; transition: background-image 0.5s ease-in-out; }
    .show-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    /* LEFT fade */
    linear-gradient(
      90deg,
      rgba(15,15,15,0.96) 0%,
      rgba(15,15,15,0.82) 18%,
      rgba(15,15,15,0.45) 35%,
      rgba(15,15,15,0.0) 55%
    ),

    /* BOTTOM fade */
    linear-gradient(
      180deg,
      rgba(15,15,15,0.0) 40%,
      rgba(15,15,15,0.45) 65%,
      rgba(15,15,15,0.80) 85%,
      rgba(15,15,15,1) 100%
    ),

    /* Subtle global darkening */
    linear-gradient(
      180deg,
      rgba(15,15,15,0.18),
      rgba(15,15,15,0.18)
    );
}


    .show-head{ position:absolute; left:1.5vw; bottom:22px; top:auto; z-index:2; display:flex; flex-direction:column; align-items:flex-start; gap:10px; max-width:min(305px,62vw) }
    .show-presents{color: var(--muted); display: none !important;}
    .head-top{ align-self:flex-start; text-align:center; width:auto }
    .show-title{ font-family:"Inter",sans-serif; text-align:center; font-size:clamp(2.1rem,4.8vw,3.2rem); line-height:1.05; margin: 8px 25px 35px }
    
    /* Show Modal Logo */
    .show-modal-logo {
        max-width: 500px;
        height: auto;
        display: block;
        margin: 8px 0px 8px;
        object-fit: contain;
    }

    .show-desc{ max-width:64ch; color:var(--muted) }

    .show-content{ position:absolute; left:0; right:0; bottom:-40%; top:75%; padding:14px 18px 18px;}
    .show-controls{ display:flex; align-items:center; gap:8px; margin:0 0 8px 4px }
    .show-controls select{ background:#12131a; color:#fff; border:1px solid #272b38; border-radius:8px; padding:.35rem .5rem; font-size:.85rem }

.episodes {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 2.5vw, 28px);
}


.ep {
  display: flex;
  gap: clamp(12px, 2vw, 24px);
  padding: clamp(10px, 1.5vw, 18px);
  border-radius: 12px;
  cursor: pointer;
  transition: .2s ease;
}

.ep .t {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
}

.ep .d {
  font-size: clamp(.85rem, 1vw, .95rem);
}


.ep:hover {
  background: rgba(255,255,255,0.04);
  transform: scale(1.005);
}

.ep-thumb-wrap {
  width: 350px;
  aspect-ratio: 16 / 9;
  flex-shrink: 0;
}

.ep-thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}


    .ep .n{ font-size:.8rem; color:var(--muted); opacity:.9; margin:0 0 2px }
    .ep .t{ font-size:1rem; font-weight:600; font-family:Inter, sans-serif }
    .ep .d{ color:var(--muted); font-size:.85rem; margin-top:4px }
    .creatorLink{color: white; background: none; border: none; }

    /* PLAYER & ACCOUNT MODAL */
    .modal{ position:fixed; inset:0; background:rgba(0,0,0,0); display:none; align-items:center; justify-content:center; z-index:9999999999 }
    .modal.open{ display:flex; animation: fadeIn .25s ease forwards; background:#000 }
    .modal-box{ width:100vw; height:100vh; background:#000; border-radius:0; overflow:hidden; position:relative; opacity:0; transform:translateY(24px) scale(.98) }
    .modal.open .modal-box{ animation: modalIn .28s ease forwards }
    .modal-close{ position:absolute; top:14px; right:16px; font-size:28px; border:none; background:rgba(0,0,0,.45); padding:.2rem .6rem; border-radius:50px; color:#fff; cursor:pointer; z-index:100 }
    .player-wrap, #accountWrap { position:absolute; inset:0 }
    .player-wrap iframe, #accountWrap iframe { position:absolute; inset:0; width:100%; height:100%; border:0; background:#000 }

    /* Custom Select Dropdown */
    .custom-select {
      position: relative;
      font-size: 1.3rem;
    }
    .select-selected {
      background-color: transparent;
      border: none;
      border-radius: 0;
      padding: .35rem 1.5rem .35rem 0;
      cursor: pointer;
      position: relative;
      user-select: none;
      font-family: "Roboto Mono", monospace;
      font-weight: 700;
      color: #fff;
      margin-bottom: 20px;
    }
    .select-selected::after {
      position: absolute;
      content: "▼";
      top: 50%;
      right: 10px;
      transform: translateY(-50%);
      font-size: .6em;
      transition: transform 0.2s ease;
    }
    .select-selected.select-arrow-active::after {
      transform: translateY(-50%) rotate(180deg);
    }
    .select-items {
      position: absolute;
      background-color: #1b1c1f7a;
      backdrop-filter: blur(15px);
      top: calc(100% + 4px);
      left: 0;
      right: 0;
      z-index: 99;
      border-radius: 8px;
      overflow: hidden;
    }
    .select-hide {
      display: none;
    }
    .select-items div {
      padding: .5rem .7rem;
      cursor: pointer;
      user-select: none;
    }
    .select-items div:hover {
      background-color: rgba(255,255,255,0.05);
    }
    .same-as-selected {
      background-color: var(--accent);
      color: #fff;
    }
    .same-as-selected:hover {
      background-color: var(--accent) !important;
    }
@media (max-width: 60rem), (pointer: coarse) {
  .episodes {
    grid-template-columns: 1fr;
  }

  .ep-thumb-wrap {
    width: 120px;
  }
}


@media (max-width: 768px) {


  .show-banner{
    height: 50% !important;
  }

  .show-content{
    top: 50% !important;
  }

  .show-modal-logo{
    width: 100%;
    max-width: unset;
  }

  .hero-logo{
    max-width: 180px;
  }

    .show-title{
    visibility: visible !important;
    display: block !important;
  }


  .sticky-nav{
    width: 100%;
    top: revert-layer;
    bottom: 0px;
    border-radius: 0px;
    border: 0px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem 2rem;
  }
  .nav-menu {
    position: fixed;
    bottom: 0;
    right: -100%; 
    width: 100%; 
    height: 100vh;
    

    background: rgb(14, 14, 15); 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1); /* Smoother slide */
    z-index: 1000;
  }

  .modal-close{
    right: revert;
    left: 14px;
  }

  .nav-menu.active {
    right: 0; 
  }
      .nav-menu .nav-link,
      .nav-menu .nav-button {
        font-size: 1.2rem;
        display: block;
      }
      .nav-menu:not(.active) {
        display: none;
      }
      .mobile-nav-toggle {
        display: block;
      }
    }

    @media (min-width: 769px) {
      .nav-menu {
        display: flex !important; 
      }
    }

    @media (max-height: 430px){
      .hero{min-height: 40vh !important;}
      .hero-logo{
        max-width: 180px;
      }
    }

    @media (max-width:720px), (max-height: 430px){ 
      .hero{min-height: 40vh !important;}
      .hero-slide::after{
        background: linear-gradient(to bottom, transparent, #0f0f0f 90%);
      }
      .hero-content{left: -25px !important; transform: scale(0.8);}
      .title{max-width: 70%;}
      .rail{ grid-auto-columns:minmax(72vw,72vw) } 
      .ep-thumb-wrap { width:120px; }
      .ep img{ height:68px }
    }

        .playlist-toggle {
        position: absolute;
        top: 68px;
        right: 16px;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(0,0,0,0.6);
        color: #fff;
        border: none;
        cursor: pointer;
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(10px);
    }

        /* Playlist Sidebar */
    .playlist-sidebar {
        width: 350px;
        background: #0f0f0f91;
        border: 1px solid rgba(255,255,255,0.1);
        backdrop-filter: blur(20px);
        display: none;
        flex-direction: column;
        padding: 20px;
        z-index: 90;
        overflow-y: auto;
        position: absolute;
        border-radius: 20px;
        margin: 20px 70px;
    }
    .playlist-sidebar.open { display: flex; right: 0;}
    .playlist-header { margin-bottom: 20px; padding-top: 20px; }
    .playlist-header h3 { margin: 0 0 10px; font-size: 1.2rem; }
    .season-select-wrap select {
        width: 100%;
        background: #1b1c1f;
        color: #fff;
        border: 1px solid #333;
        padding: 10px;
        border-radius: 8px;
        outline: none;
        font-family: inherit;
    }
    .playlist-items { display: grid; gap: 15px; }
    .pl-item { display: flex; gap: 12px; cursor: pointer; opacity: 0.8; transition: 0.2s; }
    .pl-item:hover, .pl-item.active { opacity: 1; color: var(--accent);}
    .pl-item img { width: 100px; aspect-ratio: 16/9; object-fit: cover; border-radius: 4px; }
    .pl-item-info { flex: 1; }
    .pl-item-title { font-size: 0.9rem; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .pl-item-meta { font-size: 0.75rem; color: var(--muted); margin-top: 4px; }

    @media (max-width: 1024px) {
        .playlist-sidebar {
            position: fixed;
            right: -100%;
            top: 0;
            bottom: 0;
            width: 300px;
            transition: right 0.3s ease;
            margin: 0;
            border-radius: 0px;
        }
        .playlist-sidebar.open { right: 0; }
        .sticky-nav { width: 100%; top: unset; }
    }

    @media (max-width: 768px) {
        .title { font-size: 1.8rem; }
        .playlist-sidebar { width: 100%; }
        .modal-close { top: 10px; left: 10px; right: auto; }
        .playlist-toggle { top: 10px; right: 10px; }
    }

@media (max-width: 60rem), (pointer: coarse) {
  .show-head {
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: min(92vw, 640px);
    padding-inline: 1rem;
  }

  .show-modal-logo{
    display: none !important;
  }

    .show-title{
    visibility: visible !important;
    display: block !important;
  }

  .head-top{
    align-self: unset;
  }
}