:root{
    --bg:#050103;
    --panel:#120203;
    --panel-2:#1b050a;
    --border:#3a141c;
    --text:#fef8f8;
    --muted:#e1c5c5;
    --brand:#e50914;
    --brand-2:#ff4b4b;
    --radius:14px;
    --shadow:0 18px 46px rgba(0,0,0,.85);
    --shadow-strong:0 24px 60px rgba(0,0,0,.9);
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  html{scroll-behavior:smooth}

  body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  min-height:100%;
  overflow-x:hidden;

  /* Clean modern streaming background */
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(229,9,20,.18), transparent 60%),
    radial-gradient(900px 500px at 80% 0%, rgba(255,75,75,.12), transparent 55%),
    linear-gradient(180deg, #0b0b0f 0%, #09090d 60%, #07070b 100%);

  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  position:relative;
}

/* Subtle depth overlay (no horror / no noise) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.04) 0%,
      rgba(0,0,0,.35) 40%,
      rgba(0,0,0,.6) 100%
    );
  pointer-events:none;
  z-index:-1;
}

/* Soft vignette for focus */
body::after{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at center, transparent 55%, rgba(0,0,0,.55) 100%);
  pointer-events:none;
  z-index:-1;
}

  @keyframes grain{
    0%{transform:translate3d(-2%,0,0) scale(1.02)}
    50%{transform:translate3d(2%,1%,0) scale(1.05)}
    100%{transform:translate3d(-1%,-1%,0) scale(1.02)}
  }

  /* Header */
  .header{
    margin:18px auto 10px;
    padding:26px 18px;
    text-align:center;
    font-weight:900; letter-spacing:.5px;
    background:
      radial-gradient(600px 220px at 50% 0%, rgba(255,255,255,.14), transparent 60%),
      linear-gradient(180deg, rgba(10,0,0,.96), rgba(5,0,0,.98));
    border:1px solid rgba(255,190,190,.55);
    border-radius:var(--radius);
    width:min(1100px,92vw);
    box-shadow:var(--shadow);
    font-size:24px;
    color:#6c3f3f;
    text-shadow:0 0 16px rgba(145, 93, 93, 0.9);
  }

  /* Search bar */
  #searchContainer{
    display:flex; justify-content:center; align-items:center; flex-wrap:wrap;
    gap:12px; margin:16px auto 8px; width:min(1100px,92vw);
  }
  #show-title{
    padding:12px 14px; width:min(440px,86vw);
    border-radius:999px; border:1px solid rgba(255,170,170,.45);
    background:rgba(10,0,0,.9); color:#fff; font-size:15px; outline:none;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  }
  #show-title::placeholder{ color:#673f3f; }

  button{
    padding:12px 16px; border:0; border-radius:999px; cursor:pointer;
    background:linear-gradient(135deg, var(--brand), var(--brand-2));
    color:#fff; font-weight:900; letter-spacing:.18em; font-size:11px;
    text-transform:uppercase;
    box-shadow:var(--shadow-strong); transition:transform .15s ease, filter .2s ease, box-shadow .2s ease;
  }
  button:hover{
    transform:translateY(-1px);
    filter:brightness(1.08);
    box-shadow:0 22px 46px rgba(0,0,0,1);
  }
  #backToLatestBtn{
    display:none; background:rgba(18,4,4,.96);
    box-shadow:var(--shadow);
    border:1px solid rgba(255,190,190,.6);
  }

  /* Section titles */
  h2{
    margin:28px auto 8px; width:min(1100px,92vw); text-align:left;
    font-size:14px; font-weight:900; letter-spacing:.18em; color:#ffe1e1;
    padding-left:2px;
    text-transform:uppercase;
    text-shadow:0 0 12px rgba(255,30,30,.7);
  }

  /* Grid */
  .shows-container{
    width:min(1100px,92vw);
    margin:10px auto 34px;
    display:grid; gap:18px;
    grid-template-columns:repeat( auto-fill, minmax(220px, 1fr) );
  }

  /* Cards */
  .show-card{
    background:#0a0306;
    border:1px solid rgba(255,150,150,.38);
    border-radius:14px; overflow:hidden; display:flex; flex-direction:column;
    box-shadow:var(--shadow); transform:translateZ(0);
    transition:transform .18s ease, box-shadow .18s ease, border-color .2s ease, background .2s ease;
  }
  .show-card:hover{
    transform:translateY(-4px);
    border-color:rgba(255,190,190,.85);
    box-shadow:0 22px 50px rgba(0,0,0,1);
    background:#130308;
  }
  .show-poster{
    width:100%; aspect-ratio: 2/3; object-fit:cover; background:#050308;
    display:block;
    filter:saturate(1.05) contrast(1.08);
  }
  .show-info{ padding:12px 14px 14px; }
  .show-title{
    margin:0 0 6px; font-size:16px; font-weight:900; line-height:1.25; color:#fff;
  }
  .meta{
    font-size:12px; color:var(--muted); display:flex; gap:10px; align-items:center; margin-bottom:8px;
  }
  .meta .dot{
    width:4px; height:4px; border-radius:50%; background:#f19999; display:inline-block;
  }

  /* Description + toggle */
  .desc{
    font-size:13px; color:#f3d4d4; line-height:1.45; margin:6px 0 8px;
  }
  .desc-toggle{
    display:none; color:var(--brand-2); font-weight:800; text-decoration:none; font-size:12px;
  }

  /* Controls */
  .season-episode{
    display:grid; grid-template-columns:1fr; row-gap:10px; margin-top:6px;
  }
  .season-row, .episode-row{
    display:flex; align-items:center; gap:8px;
  }
  .form-label{
    font-size:13px; font-weight:800; color:#f2caca; min-width:66px;
    text-transform:uppercase; letter-spacing:.08em;
  }
  .form-select{
    padding:8px 10px; min-height:36px;
    background:#150408; color:#fff;
    border:1px solid var(--border); border-radius:10px; font-size:13px; width:140px;
  }
  .season-static{
    display:inline-block; padding:7px 12px; min-height:36px; line-height:22px;
    background:#150408; border:1px solid var(--border); border-radius:10px; color:#ffe6e6;
  }

  .watch-btn{
    margin-top:10px; width:100%; padding:12px 0; font-size:14px;
    border-radius:12px; font-weight:900;
    background:linear-gradient(135deg, var(--brand), var(--brand-2));
    box-shadow:var(--shadow-strong);
    text-transform:uppercase; letter-spacing:.14em;
  }
  .watch-btn:hover{ transform:translateY(-1px); }
  /* Badges (genres) */
  .badges{
    display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 8px;
  }
  .badge{
    display:inline-block; padding:3px 10px; border-radius:999px;
    border:1px solid rgba(255,160,160,.55); background:#1a0509; color:#fcdada;
    font-size:12px; line-height:1.2; white-space:nowrap;
  }

  /* Pagination */
  #paginationButtons{
    display:flex; justify-content:center; gap:12px; margin:8px 0 38px;
  }
  #paginationButtons button{
    padding:10px 14px; border-radius:999px;
    background:#1a0509;
    box-shadow:var(--shadow);
    border:1px solid rgba(255,160,160,.6);
  }
  #paginationButtons button:hover{
    background:#23060d;
  }

  /* Footer */
  .footer{
    text-align:center; color:#f0c8c8; font-size:13px; padding:22px 10px;
    border-top:1px solid rgba(255,180,180,.35);
    background:rgba(5,0,0,.96);
    backdrop-filter:blur(14px);
  }
  .footer a{ color:#fff; text-decoration:none; font-weight:800; }
  .footer a:hover{ color:var(--brand-2); text-decoration:underline; }

  /* Loader */
  .loader{
    position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
    background:rgba(3,0,0,.80); backdrop-filter:blur(4px); z-index:2000;
    color:#fbe3e3;
  }
  .loader[hidden]{ display:none; }
  .spinner{
    width:56px; height:56px; border-radius:50%; border:4px solid rgba(255,255,255,.12);
    border-top-color:var(--brand); animation:spin .9s linear infinite;
  }
  .loader-text{ font-size:14px; opacity:.9; }
  @keyframes spin{ to{ transform:rotate(360deg); } }

  /* Skeleton */
  .skel-card{
    height:420px; border-radius:14px; overflow:hidden;
    background:radial-gradient(circle at 0 0,rgba(255,120,80,.12),transparent 55%), #090307;
    border:1px solid rgba(255,180,180,.35); box-shadow:var(--shadow);
    display:flex; flex-direction:column;
  }
  .skel-poster{
    aspect-ratio:2/3; background:
      linear-gradient(90deg,#12030d 25%,#220716 50%,#12030d 75%);
    background-size: 400% 100%; animation:shimmer 1.2s infinite;
  }
  .skel-body{ padding:12px 14px; }
  .skel-line{
    height:12px; border-radius:8px; margin:8px 0;
    background:linear-gradient(90deg,#190510 25%,#2b091b 50%,#190510 75%);
    background-size: 400% 100%; animation:shimmer 1.2s infinite;
  }
  .skel-line.w70{ width:70% } .skel-line.w50{ width:50% } .skel-line.w40{ width:40% }
  .skel-row{ display:grid; grid-template-columns:1fr; row-gap:8px; margin-top:4px; }
  @keyframes shimmer{ 0%{background-position:-400px 0} 100%{background-position:400px 0} }

  /* Modal (show details) */
  .sd-overlay{
    position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:18px;
    background:rgba(0,0,0,.78); z-index:3000;
  }
  .sd-overlay[hidden]{ display:none }
  .sd-card{
    width:min(980px,96vw); background:#120308; color:#fff; border-radius:16px; overflow:hidden;
    box-shadow:var(--shadow-strong); display:grid; grid-template-columns:1fr 1.15fr; position:relative;
    max-height: calc(100vh - 40px); overflow:auto; overscroll-behavior:contain;
    border:1px solid rgba(255,190,190,.55);
  }
  @media (max-width:860px){ .sd-card{ grid-template-columns:1fr } }
  .sd-close{
    position:absolute; right:14px; top:10px; background:transparent; border:0; color:#fff; font-size:28px; line-height:1; cursor:pointer;
  }
  .sd-hero{
    background:#000; min-height:320px; display:flex; align-items:center; justify-content:center;
  }
  .sd-hero img{
    width:100%; height:100%; object-fit:cover;
    filter:saturate(1.05) contrast(1.1);
  }
  .sd-info{ padding:18px 18px 20px }
  .sd-title{ margin:0 0 6px; font-size:22px; font-weight:900; text-shadow:0 0 12px rgba(0,0,0,.9); }
  .sd-meta{
    font-size:13px; color:#f0caca; display:flex; gap:10px; margin:0 0 10px; flex-wrap:wrap;
  }
  .sd-genres{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px }
  .sd-overview{
    font-size:14px; color:#ffecec; line-height:1.55; margin:0 0 14px; max-height:210px; overflow:auto;
  }
  .sd-controls{
    display:grid; grid-template-columns:1fr; row-gap:10px; margin-bottom:12px;
  }
  .sd-row{
    display:flex; align-items:center; gap:8px;
  }
  .sd-row label{
    font-size:13px; font-weight:800; color:#f2caca; min-width:60px;
    text-transform:uppercase; letter-spacing:.08em;
  }
  .sd-row select, .sd-pill{
    padding:7px 10px; border-radius:10px; border:1px solid #5c2630;
    background:#150408; color:#fff; font-size:13px; min-height:36px;
  }
  .sd-pill{ display:inline-block }
  .sd-actions .btn{
    padding:12px 14px; border-radius:12px; border:0; font-weight:900;
    background:linear-gradient(135deg, var(--brand), var(--brand-2));
    box-shadow:var(--shadow-strong);
    text-transform:uppercase; letter-spacing:.16em; font-size:.85rem;
  }

  /* Hide search results area by default (JS toggles it) */
  #search-results-title, #search-results{ display:none; }

  /* Player notice (used when playing) */
  .player-notice{
    display:flex; align-items:flex-start; gap:10px;
    background:linear-gradient(135deg,#fff7d6,#ffe49a);
    color:#1f2937; border:1px solid #f59e0b; border-radius:12px;
    padding:10px 12px; margin:10px 0 12px; font-size:13px;
    box-shadow:0 4px 14px rgba(245,158,11,.15);
  }
  .player-notice .icon{font-size:16px}
  .player-notice .notice-close{
    margin-left:auto; background:#1f2937; color:#fff; border:0; border-radius:8px; padding:4px 8px; font-weight:800; cursor:pointer;
  }
  .player-notice .notice-close:hover{ background:#111827 }

  /* Mobile niceties */
  @media (max-width:560px){
    .show-title{ font-size:15px }
    .form-select{ width:100% }
    .form-label{ min-width:54px }
    #paginationButtons{ gap:10px }
  }

  /* --- Mobile-first card polish --- */
  .show-card{
    border-radius: 14px;
    overflow: hidden;
    background:#0a0306;
    box-shadow: var(--shadow);
  }

  /* poster with gradient overlay only for the title/meta */
  .poster-wrap{ position: relative; aspect-ratio: 2/3; background:#050308; }
  .show-poster{ width:100%; height:100%; object-fit:cover; display:block; }
  .poster-wrap::after{
    content:"";
    position:absolute; left:0; right:0; bottom:0; height:58%;
    background: linear-gradient(to top, rgba(0,0,0,.96), rgba(0,0,0,.4) 55%, transparent);
    pointer-events:none;
  }

  /* overlayed text sits on the poster only */
  .overlay-info{
    position:absolute; left:12px; right:12px; bottom:12px; color:#fff;
    text-shadow:0 2px 10px rgba(0,0,0,.7);
  }
  .overlay-info .show-title{
    font-size: clamp(16px, 5vw, 20px);
    font-weight: 800; margin:0 0 6px; line-height:1.22;
  }
  .overlay-info .meta{
    font-size:12px; opacity:.9; display:flex; gap:10px; flex-wrap:wrap; margin-bottom:8px;
    color:#f6dada;
  }
  .overlay-info .desc{
    font-size:13px; color:#f3d4d4; line-height:1.35;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }

  /* controls live BELOW the poster, full-width for thumbs */
  .card-controls{
    padding:12px; display:grid; gap:10px; background:#0b0407;
    border-top:1px solid rgba(255,150,150,.35);
  }
  .card-controls .row{ display:flex; align-items:center; gap:10px; }
  .card-controls label{
    min-width:68px; color:#f0caca; font-size:13px; font-weight:600;
    text-transform:uppercase; letter-spacing:.08em;
  }
  .card-controls .form-select{
    width:100%; min-height:40px; padding:8px 12px;
    border-radius:10px; border:1px solid #5c2630;
    background:#150408; color:#fef2f2; font-size:14px; appearance:none;
  }
  .card-controls .form-select:focus{ outline:2px solid #e50914; outline-offset:1px; }

  /* watch button */
  .watch-btn{
    width:100%; padding:12px 14px; border:0; border-radius:12px;
    background:linear-gradient(135deg,#ff3c3c,#ff974a);
    color:#fff; font-weight:800; font-size:15px; cursor:pointer;
    letter-spacing:.14em; text-transform:uppercase;
  }
  .watch-btn:active{ transform:translateY(1px); }

  /* grid on phones */
  @media (max-width:520px){
    .shows-container{ grid-template-columns:1fr; gap:16px; padding:12px; }
  }

  /* prevent accidental tap-through */
  .card-controls, .watch-btn { touch-action: manipulation; }