:root {
      --bg: #050505;
      --bg-soft: #0b0b0b;
      --card: #101010;
      --card-2: #151515;
      --line: rgba(255,255,255,.09);
      --line-hover: rgba(255,255,255,.18);
      --text: #fff;
      --muted: #9b9b9b;
      --muted-2: #6f6f6f;
      --red: #e50914;
      --red-soft: rgba(229,9,20,.13);
      --radius: 18px;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
      background: var(--bg);
    }

    body {
      min-height: 100vh;
      background:
        radial-gradient(circle at 50% -10%, rgba(229,9,20,.09), transparent 35%),
        var(--bg);
      color: var(--text);
      font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
      overflow-x: hidden;
    }

    button,
    a {
      font: inherit;
    }

    a {
      color: #fff;
      text-decoration: none;
    }

    a:visited {
      color: #fff;
    }

    button {
      border: 0;
      color: inherit;
      cursor: pointer;
    }

    img {
      display: block;
      max-width: 100%;
    }

    iframe {
      border: 0;
    }

    /* =========================
       TOPBAR
    ========================= */

    .topbar {
      position: sticky;
      top: 0;
      z-index: 100;
      height: 64px;
      display: flex;
      align-items: center;
      background: rgba(5,5,5,.78);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(255,255,255,.04);
    }

    .topbar-inner {
      width: min(1400px, calc(100% - 32px));
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: white;
      text-decoration: none;
      font-size: 19px;
      font-weight: 800;
      letter-spacing: -.5px;
    }

    .brand-mark {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: var(--red);
      box-shadow: 0 0 22px rgb(var(--dyn) / .22);
    }

    .brand-mark svg {
      width: 15px;
      height: 15px;
      fill: white;
    }

    /* =========================
       MAIN
    ========================= */

    .page {
      width: min(1400px, calc(100% - 32px));
      margin: 24px auto 80px;
    }

    /* =========================
       PLAYER
    ========================= */

    .player-shell {
      position: relative;
      width: 100%;
      overflow: hidden;
      background: #000;
      border: 1px solid var(--line);
      border-radius: 20px;
      box-shadow: 0 20px 80px rgba(0,0,0,.35);
    }

    .player {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      min-height: 320px;
      background: #000;
    }

    .player iframe {
      width: 100%;
      height: 100%;
      display: block;
      background: #000;
    }

    .player-loading,
    .player-empty {
      position: absolute;
      inset: 0;
      z-index: 5;
      display: grid;
      place-items: center;
      background: #000;
      text-align: center;
      padding: 30px;
    }

    .player-empty {
      display: none;
    }

    .loader-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      color: var(--muted);
    }

    .spinner {
      width: 30px;
      height: 30px;
      border: 2px solid rgba(255,255,255,.1);
      border-top-color: var(--red);
      border-radius: 50%;
      animation: spin .8s linear infinite;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    .player-message {
      font-size: 13px;
    }

    /* =========================
       SERVER BAR
    ========================= */

    .server-area {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px;
      overflow-x: auto;
      scrollbar-width: none;
      border-top: 1px solid var(--line);
      background: rgba(8,8,8,.96);
    }

    .server-area::-webkit-scrollbar {
      display: none;
    }

    .server-label {
      flex: 0 0 auto;
      color: var(--muted-2);
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .servers {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: max-content;
    }

    /*
      Todos los servidores son secundarios.
      El seleccionado solo se diferencia por borde/color.
    */
    .server-btn {
      min-width: 44px;
      height: 34px;
      padding: 0 13px;
      border-radius: 999px;
      background: rgba(255,255,255,.035);
      border: 1px solid var(--line);
      color: #bdbdbd;
      font-size: 12px;
      font-weight: 650;
      white-space: nowrap;
      transition: .18s ease;
    }

    .server-btn:hover {
      border-color: var(--line-hover);
      color: #fff;
      background: rgba(255,255,255,.06);
    }

    .server-btn.active {
      color: #fff;
      border-color: rgb(var(--dyn) / .75);
      background: var(--red-soft);
    }

    /* =========================
       CONTROLS
    ========================= */

    .controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 12px;
      background: #080808;
      border-top: 1px solid var(--line);
    }

    .control-group {
      display: flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
    }

    .control-btn {
      width: 38px;
      height: 38px;
      flex: 0 0 38px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: rgba(255,255,255,.035);
      border: 1px solid var(--line);
      color: #c9c9c9;
      transition: .18s ease;
    }

    .control-btn:hover {
      color: #fff;
      background: rgba(255,255,255,.07);
      border-color: var(--line-hover);
    }

    .control-btn:active {
      transform: scale(.94);
    }

    .control-btn svg {
      width: 17px;
      height: 17px;
    }

    .episode-position {
      color: var(--muted);
      font-size: 12px;
      padding: 0 6px;
      white-space: nowrap;
    }

    /* =========================
       TITLE
    ========================= */

    .title-area {
      padding: 24px 2px 18px;
    }

    .title-row {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .title-logo {
      max-width: 210px;
      max-height: 65px;
      object-fit: contain;
      object-position: left center;
    }

    .title-text {
      min-width: 0;
    }

    .title-text h1 {
      font-size: clamp(22px, 3vw, 34px);
      line-height: 1.1;
      letter-spacing: -.7px;
    }

    .episode-title {
      margin-top: 7px;
      color: var(--muted);
      font-size: 14px;
    }

    /* =========================
       TABS
    ========================= */

    .tabs-wrapper {
      position: relative;
      margin-top: 4px;
      border-bottom: 1px solid var(--line);
    }

    .tabs-scroll {
      overflow-x: auto;
      scrollbar-width: none;
      scroll-behavior: smooth;
    }

    .tabs-scroll::-webkit-scrollbar {
      display: none;
    }

    .tabs {
      display: flex;
      width: max-content;
      min-width: 100%;
      gap: 5px;
      padding: 5px 0;
    }

    .tab-btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 38px;
      padding: 0 14px;
      border-radius: 999px;
      background: transparent;
      border: 1px solid transparent;
      color: #888;
      font-size: 13px;
      font-weight: 650;
      white-space: nowrap;
      transition: .18s ease;
    }

    .tab-btn:hover {
      color: #ddd;
      background: rgba(255,255,255,.035);
    }

    .tab-btn.active {
      color: #fff;
      background: rgb(var(--dyn) / .09);
      border-color: rgb(var(--dyn) / .35);
    }

    .tab-btn svg {
      width: 15px;
      height: 15px;
    }

    /* =========================
       PANELS
    ========================= */

    .tab-panel {
      display: none;
      padding: 24px 0;
      animation: panelIn .2s ease;
    }

    .tab-panel.active {
      display: block;
    }

    @keyframes panelIn {
      from {
        opacity: 0;
        transform: translateY(4px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .section-heading {
      margin-bottom: 15px;
    }

    .section-heading h2 {
      font-size: 18px;
      letter-spacing: -.25px;
    }

    .section-heading p {
      margin-top: 4px;
      color: var(--muted);
      font-size: 12px;
    }

    /* =========================
       DETAILS
    ========================= */

    .details-grid {
      display: grid;
      grid-template-columns: 190px minmax(0,1fr);
      gap: 25px;
    }

    .main-poster {
      width: 100%;
      aspect-ratio: 2 / 3;
      object-fit: cover;
      border-radius: 14px;
      background: var(--card);
      border: 1px solid var(--line);
    }

    .details-content {
      min-width: 0;
    }

    .synopsis {
      color: #c5c5c5;
      line-height: 1.7;
      font-size: 14px;
      max-width: 900px;
    }

    .meta-list {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-top: 17px;
    }

    .meta-pill {
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(255,255,255,.035);
      border: 1px solid var(--line);
      color: #a7a7a7;
      font-size: 11px;
    }

    .info-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit,minmax(145px,1fr));
      gap: 10px;
      margin-top: 18px;
    }

    .info-card {
      min-height: 72px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 13px;
      background: rgba(255,255,255,.018);
    }

    .info-card small {
      display: block;
      margin-bottom: 5px;
      color: var(--muted-2);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: .07em;
    }

    .info-card span {
      display: block;
      color: #ddd;
      font-size: 12px;
      line-height: 1.4;
    }

    /* =========================
       HORIZONTAL CAROUSELS
    ========================= */

    .carousel {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      padding: 2px 2px 13px;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      cursor: grab;
      user-select: none;
      -webkit-user-select: none;
    }

    .carousel::-webkit-scrollbar {
      display: none;
    }

    .carousel.dragging {
      cursor: grabbing;
      scroll-snap-type: none;
    }

    /* =========================
       CAST
    ========================= */

    .cast-card {
      flex: 0 0 135px;
      scroll-snap-align: start;
    }

    .cast-image {
      width: 135px;
      height: 175px;
      object-fit: cover;
      border-radius: 13px;
      border: 1px solid var(--line);
      background: var(--card);
    }

    .cast-name {
      margin-top: 9px;
      color: #eee;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.25;
    }

    .cast-character {
      margin-top: 3px;
      color: var(--muted-2);
      font-size: 11px;
      line-height: 1.25;
    }

    /* =========================
       TRAILER
    ========================= */

    .trailer-box {
      width: min(900px,100%);
      aspect-ratio: 16 / 9;
      overflow: hidden;
      border-radius: 16px;
      border: 1px solid var(--line);
      background: #000;
    }

    .trailer-box iframe {
      width: 100%;
      height: 100%;
    }

    /* =========================
       REVIEWS
    ========================= */

    .review-card {
      flex: 0 0 min(430px, 86vw);
      min-height: 220px;
      padding: 17px;
      border-radius: 15px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.018);
      scroll-snap-align: start;
    }

    .review-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .review-author {
      color: #fff;
      font-size: 13px;
      font-weight: 750;
    }

    .review-rating {
      color: #ddd;
      font-size: 11px;
    }

    .review-content {
      margin-top: 14px;
      color: #bdbdbd;
      font-size: 12px;
      line-height: 1.65;
      display: -webkit-box;
      -webkit-line-clamp: 8;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .review-date {
      margin-top: 14px;
      color: var(--muted-2);
      font-size: 10px;
    }

    /* =========================
       EPISODES
    ========================= */

    .episode-card {
      flex: 0 0 min(380px, 82vw);
      overflow: hidden;
      border-radius: 15px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.018);
      scroll-snap-align: start;
      cursor: pointer;
      transition: .18s ease;
    }

    .episode-card:hover {
      border-color: var(--line-hover);
      transform: translateY(-2px);
    }

    .episode-image-wrap {
      position: relative;
      aspect-ratio: 16 / 9;
      background: #080808;
      overflow: hidden;
    }

    .episode-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .episode-number {
      position: absolute;
      left: 10px;
      bottom: 10px;
      padding: 5px 8px;
      border-radius: 999px;
      background: rgba(0,0,0,.78);
      border: 1px solid rgba(255,255,255,.1);
      color: white;
      font-size: 10px;
      font-weight: 700;
    }

    .watched {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 27px;
      height: 27px;
      display: none;
      place-items: center;
      border-radius: 50%;
      background: rgba(0,0,0,.78);
      border: 1px solid rgba(255,255,255,.12);
    }

    .watched.show {
      display: grid;
    }

    .watched svg {
      width: 14px;
      height: 14px;
      color: #8cffae;
    }

    .episode-info {
      padding: 13px;
    }

    .episode-title-card {
      color: #eee;
      font-size: 13px;
      font-weight: 700;
    }

    .episode-date {
      margin-top: 4px;
      color: var(--muted-2);
      font-size: 10px;
    }

    .episode-overview {
      margin-top: 9px;
      color: #8f8f8f;
      font-size: 11px;
      line-height: 1.5;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* =========================
       RECOMMENDED
    ========================= */

    .recommendations-section {
      padding: 8px 0 0;
      border-top: 1px solid var(--line);
    }

    .recommendations-title {
      padding: 20px 0 13px;
      font-size: 18px;
      letter-spacing: -.2px;
    }

    .recommendation-card {
      flex: 0 0 155px;
      scroll-snap-align: start;
      text-decoration: none;
      color: inherit;
    }

    .recommendation-poster {
      width: 155px;
      aspect-ratio: 2 / 3;
      object-fit: cover;
      border-radius: 13px;
      border: 1px solid var(--line);
      background: var(--card);
      transition: .18s ease;
    }

    .recommendation-card:hover .recommendation-poster {
      border-color: var(--line-hover);
      transform: translateY(-3px);
    }

    .recommendation-name {
      margin-top: 8px;
      color: #ddd;
      font-size: 12px;
      font-weight: 650;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .recommendation-year {
      margin-top: 3px;
      color: var(--muted-2);
      font-size: 10px;
    }

    /* =========================
       EMPTY
    ========================= */

    .empty-section {
      padding: 30px;
      border: 1px dashed var(--line);
      border-radius: 15px;
      color: var(--muted-2);
      text-align: center;
      font-size: 13px;
    }

    /* =========================
       LIGHTS OFF
    ========================= */

    body.lights-off::after {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 90;
      background: rgba(0,0,0,.88);
      pointer-events: none;
    }

    body.lights-off .topbar,
    body.lights-off .player-shell {
      position: relative;
      z-index: 95;
    }

    /* =========================
       MOBILE
    ========================= */

    @media (max-width: 700px) {
      .topbar {
        height: 58px;
      }

      .topbar-inner {
        width: calc(100% - 22px);
      }

      .page {
        width: calc(100% - 20px);
        margin-top: 12px;
      }

      .player-shell {
        border-radius: 15px;
      }

      .player {
        min-height: 210px;
      }

      .server-area {
        padding: 9px;
      }

      .server-label {
        display: none;
      }

      .controls {
        padding: 9px;
      }

      .control-btn {
        width: 35px;
        height: 35px;
        flex-basis: 35px;
      }

      .episode-position {
        font-size: 10px;
      }

      .title-area {
        padding: 19px 1px 13px;
      }

      .title-row {
        gap: 11px;
      }

      .title-logo {
        max-width: 145px;
        max-height: 45px;
      }

      .title-text h1 {
        font-size: 20px;
      }

      .episode-title {
        font-size: 12px;
      }

      .tab-panel {
        padding: 19px 0;
      }

      .details-grid {
        grid-template-columns: 110px minmax(0,1fr);
        gap: 15px;
      }

      .main-poster {
        border-radius: 10px;
      }

      .synopsis {
        font-size: 12px;
        line-height: 1.6;
      }

      .info-grid {
        grid-template-columns: repeat(2,1fr);
      }

      .cast-card {
        flex-basis: 112px;
      }

      .cast-image {
        width: 112px;
        height: 148px;
      }

      .recommendation-card {
        flex-basis: 125px;
      }

      .recommendation-poster {
        width: 125px;
      }
    }

    @media (max-width: 440px) {
      .details-grid {
        grid-template-columns: 1fr;
      }

      .main-poster {
        width: 145px;
      }

      .details-content {
        width: 100%;
      }
    }
  
    /* =====================================================
       ESTILO PELISVIDHD (igual que index.html)
    ===================================================== */

    :root { --ease: cubic-bezier(.2,.8,.2,1); }

    ::selection { background: var(--red); color: #fff; }

    :focus-visible {
      outline: 2px solid var(--red2);
      outline-offset: 3px;
      border-radius: 6px;
    }

    html { background: var(--bg); }

    body {
      background: transparent;
      font-family: Sora, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    /* Fondo: backdrop blureado fijo + backdrop nítido que se desvanece */
    .page-bg {
      position: fixed;
      inset: -40px;
      z-index: -1;
      background-size: cover;
      background-position: center;
      filter: blur(28px) saturate(1.15);
      opacity: .5;
      pointer-events: none;
      animation: fadeIn .8s ease both;
    }

    .page-bg::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(#050505b0, #050505e6);
    }

    .hero-bg {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 640px;
      z-index: -1;
      background-size: cover;
      background-position: center top;
      opacity: .55;
      pointer-events: none;
      -webkit-mask-image: linear-gradient(#000 0%, #000 34%, #000000b3 50%, #00000080 63%, #00000047 75%, #00000020 88%, transparent 100%);
      mask-image: linear-gradient(#000 0%, #000 34%, #000000b3 50%, #00000080 63%, #00000047 75%, #00000020 88%, transparent 100%);
      animation: fadeIn 1s ease both;
    }

    /* Topbar 100% transparente, con logo imagen */
    .topbar {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 72px;
      background: transparent;
      border: 0;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      animation: fadeIn .5s ease both;
    }

    .topbar-inner { width: min(1400px, calc(100% - 8vw)); }

    .brand { font-size: 0; transition: transform .3s var(--ease); }
    .brand:hover { transform: scale(1.04); }

    .brand img {
      display: block;
      height: 30px;
      width: auto;
      max-width: 180px;
      object-fit: contain;
    }

    .page {
      width: min(1400px, calc(100% - 8vw));
      margin-top: 88px;
    }

    /* Reproductor */
    .player-shell {
      border-radius: 18px;
      border-color: #ffffff14;
      box-shadow: 0 24px 70px #000a;
      animation: fadeUp .6s var(--ease) both;
    }

    .server-area { background: #0a0a0af2; }
    .controls { background: #080808; }

    .server-btn,
    .tab-btn,
    .meta-pill { border-radius: 999px; font-family: inherit; }

    .server-btn {
      transition: transform .2s var(--ease), border-color .2s, background .2s, color .2s;
    }

    .server-btn:hover { transform: translateY(-1px); }
    .server-btn:active { transform: scale(.97); }

    .control-btn {
      transition: transform .2s var(--ease), background .2s, border-color .2s, color .2s;
    }

    .control-btn:hover { transform: translateY(-1px); }

    /* Título: logo en lugar del texto */
    .title-area { animation: fadeUp .6s var(--ease) .08s both; }

    .title-row {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
    }

    .title-logo {
      max-width: 280px;
      max-height: 90px;
      filter: drop-shadow(0 4px 14px #000a);
    }

    .title-text h1 { font-weight: 700; letter-spacing: -1.2px; }

    .title-text h1.has-logo {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
    }

    .episode-title { font-size: 13px; font-weight: 500; }

    /* Pestañas */
    .tabs-wrapper { border-bottom-color: #ffffff12; animation: fadeUp .6s var(--ease) .14s both; }

    .tab-btn { font-weight: 600; }

    .tab-btn.active {
      background: var(--red);
      border-color: var(--red);
      color: #fff;
    }

    .section-heading h2 {
      font-weight: 700;
      font-size: 17px;
    }

    .section-heading h2::before {
      content: "";
      display: inline-block;
      width: 3px;
      height: 17px;
      border-radius: 2px;
      background: var(--red);
      vertical-align: -3px;
      margin-right: 9px;
    }

    /* Tarjetas */
    .main-poster,
    .info-card,
    .review-card,
    .episode-card,
    .trailer-box,
    .cast-image {
      border-color: #ffffff0f;
    }

    .main-poster { border-radius: 12px; box-shadow: 0 14px 40px #0009; }

    .info-card { border-radius: 14px; background: #ffffff08; }

    .review-card { border-radius: 16px; background: #ffffff08; }

    .episode-card {
      border-radius: 14px;
      background: #ffffff08;
      transition: transform .25s var(--ease), border-color .25s;
    }

    .episode-card:hover { transform: translateY(-3px); border-color: rgb(var(--dyn) / .45); }

    .episode-image-wrap::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(0deg, #000a 0%, transparent 55%);
      pointer-events: none;
    }

    .episode-number { z-index: 2; background: #070707e0; }
    .watched { z-index: 2; }

    .cast-card { transition: transform .25s var(--ease); }
    .cast-card:hover { transform: translateY(-3px); }

    /* Recomendados (igual que las tarjetas del index) */
    .recommendations-section { border-top-color: #ffffff12; }

    .recommendations-title { font-weight: 700; }

    .recommendation-card { flex-basis: 136px; transition: transform .25s var(--ease); }

    .recommendation-poster {
      width: 136px;
      border-radius: 7px;
      transition: transform .25s var(--ease), border-color .25s;
    }

    .recommendation-card:hover .recommendation-poster { border-color: rgb(var(--dyn) / .45); }

    .recommendation-name {
      margin-top: 9px;
      font-size: 13px;
      font-weight: 600;
      line-height: 1.3;
      white-space: normal;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .recommendation-year {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 2px 8px;
      margin-top: 4px;
      font-size: 11.5px;
      color: #8a8a8a;
    }

    .sc { color: #66dc88; font-weight: 700; }

    .empty-section { border-radius: 16px; }

    /* Luces apagadas: el topbar sigue sobre el overlay */
    body.lights-off .topbar { position: absolute; }

    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: none; }
    }

    @media (max-width: 700px) {
      .topbar { height: 62px; }
      .brand img { height: 26px; max-width: 150px; }
      .page { width: calc(100% - 20px); margin-top: 68px; }
      .hero-bg { height: 480px; }
      .title-logo { max-width: 200px; max-height: 70px; }
      .recommendation-card { flex-basis: 120px; }
      .recommendation-poster { width: 120px; }
      .recommendation-name { font-size: 12.5px; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
      }
    }
  
    /* =====================================================
       DETALLES INDEPENDIENTES + EPISODIOS + REPARTO
    ===================================================== */

    /* Fondo: backdrop blureado a pantalla completa */
    .hero-bg { display: none; }

    .page-bg { opacity: .8; }

    .page-bg::after {
      background: linear-gradient(#05050066, #050505d0);
    }

    .tabs-wrapper[hidden] { display: none; }

    .details {
      margin-top: 26px;
      animation: fadeUp .6s var(--ease) .06s both;
    }

    .details-grid {
      display: grid;
      grid-template-columns: 190px minmax(0, 1fr);
      grid-template-areas:
        "poster head"
        "poster body";
      column-gap: 26px;
      align-items: start;
    }

    .poster-col { grid-area: poster; }

    .details-head {
      grid-area: head;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .details-body {
      grid-area: body;
      min-width: 0;
      margin-top: 18px;
    }

    .main-poster { width: 100%; }

    .details-head .title-logo {
      max-width: min(340px, 100%);
      max-height: 100px;
      margin-bottom: 4px;
    }

    .details-head .title-text { min-width: 0; }

    .details-head .episode-title { margin-top: 8px; }

    .genres-line {
      margin-top: 12px;
      font-size: 14px;
      color: #d4d4d4;
    }

    .genres-line:empty { display: none; }

    .meta-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 14px;
      margin-top: 12px;
      font-size: 13px;
      color: #dcdcdc;
    }

    .meta-row:empty { display: none; }

    .cert {
      padding: 3px 9px;
      border: 1px solid #ffffff40;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 700;
    }

    .rating-star { color: #66dc88; font-weight: 700; }

    .list-btn {
      width: 46px;
      height: 46px;
      margin-top: 16px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: #ffffff1c;
      border: 1px solid #ffffff14;
      color: #fff;
      transition: transform .2s var(--ease), background .2s, border-color .2s;
    }

    .list-btn svg { width: 21px; height: 21px; }

    .list-btn:hover { transform: translateY(-1px); background: #ffffff2e; }
    .list-btn:active { transform: scale(.94); }

    .list-btn.on { background: var(--red); border-color: var(--red); }

    .synopsis { max-width: 900px; }

    /* Pestañas */
    .tabs-wrapper { margin-top: 24px; border-bottom: 0; }

    .tab-btn {
      background: #ffffff0d;
      border-color: #ffffff10;
      color: #cfcfcf;
    }

    /* Episodios: lista con miniatura a la izquierda */
    .episodes-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 15px;
    }

    .episodes-head .section-heading { margin: 0; }

    #seasonLabel { display: none; }

    .season-select { position: relative; display: inline-flex; }

    .season-select select {
      appearance: none;
      -webkit-appearance: none;
      height: 42px;
      padding: 0 40px 0 18px;
      border-radius: 999px;
      border: 1px solid #ffffff1f;
      background: #ffffff14 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 14px;
      color: #fff;
      font: inherit;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: border-color .2s, background-color .2s;
    }

    .season-select select:hover { border-color: #ffffff3d; }

    .season-select select option { background: #111; color: #fff; }

    .episode-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
      gap: 12px;
    }

    .episode-row {
      position: relative;
      display: flex;
      gap: 14px;
      padding: 12px;
      border-radius: 16px;
      border: 1px solid #ffffff10;
      background: #ffffff08;
      cursor: pointer;
      transition: transform .25s var(--ease), border-color .25s, background .25s;
    }

    .episode-row:hover { transform: translateY(-2px); border-color: rgb(var(--dyn) / .45); }

    .episode-row:active { transform: scale(.99); }

    .episode-row.current {
      background: rgb(var(--dyn) / .15);
      border-color: rgb(var(--dyn) / .6);
    }

    .ep-thumb {
      position: relative;
      flex: 0 0 40%;
      max-width: 200px;
      aspect-ratio: 16 / 9;
      align-self: flex-start;
      overflow: hidden;
      border-radius: 10px;
      background: #101010;
    }

    .ep-thumb img { width: 100%; height: 100%; object-fit: cover; }

    .ep-play {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
    }

    .ep-play::after {
      content: "";
      width: 26px;
      height: 26px;
      background: #fff;
      filter: drop-shadow(0 2px 6px #000a);
      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpolygon points='6 3 20 12 6 21 6 3'/%3E%3C/svg%3E") center / contain no-repeat;
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpolygon points='6 3 20 12 6 21 6 3'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    .ep-body { flex: 1; min-width: 0; padding-right: 36px; }

    .ep-title { font-size: 14px; font-weight: 700; line-height: 1.35; }

    .ep-meta { margin-top: 5px; font-size: 12px; color: #a8a8a8; }

    .ep-overview {
      margin-top: 7px;
      font-size: 12px;
      line-height: 1.5;
      color: #8f8f8f;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .episode-row .watched {
      top: 12px;
      right: 12px;
      width: 30px;
      height: 30px;
    }

    /* Reparto: fotos circulares */
    .cast-card {
      flex: 0 0 104px;
      text-align: center;
    }

    .cast-image {
      width: 104px;
      height: 104px;
      border-radius: 50%;
      margin: 0 auto;
    }

    .cast-name { font-size: 12.5px; }

    @media (max-width: 700px) {

      .details { margin-top: 20px; }

      .details-grid {
        grid-template-columns: 112px minmax(0, 1fr);
        grid-template-areas:
          "poster head"
          "body body";
        column-gap: 14px;
      }

      .details-body { margin-top: 16px; }

      .details-head .title-logo { max-width: 100%; max-height: 64px; }

      .genres-line { margin-top: 8px; font-size: 13px; }

      .meta-row { gap: 6px 10px; margin-top: 8px; font-size: 12px; }

      .list-btn { width: 42px; height: 42px; margin-top: 12px; }

      .synopsis { font-size: 13px; line-height: 1.7; }

      .episode-list { grid-template-columns: 1fr; }

      .ep-thumb { flex-basis: 38%; }

      .ep-title { font-size: 13px; }

      .cast-card { flex-basis: 92px; }

      .cast-image { width: 92px; height: 92px; }
    }

    @media (max-width: 440px) {

      .details-grid { grid-template-columns: 104px minmax(0, 1fr); }

      .main-poster { width: 100%; }
    }
  
    /* Aviso: bloqueador de anuncios (entre los servidores y los botones rápidos) */
    .ad-tip {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin: 10px 0 2px;
      padding: 11px 14px;
      border: 1px solid rgb(var(--dyn) / .25);
      border-radius: 14px;
      background: rgb(var(--dyn) / .08);
      color: #e8e8e8;
      font-size: 12.5px;
      line-height: 1.55;
      animation: adTipIn .4s var(--ease) both;
    }

    .ad-tip[hidden] { display: none; }

    .ad-tip > i {
      flex: none;
      display: flex;
      margin-top: 1px;
      color: rgb(var(--dyn));
    }

    .ad-tip > i svg {
      width: 18px;
      height: 18px;
    }

    .ad-tip p { flex: 1; min-width: 0; }

    .ad-tip a {
      color: #fff;
      font-weight: 700;
      text-decoration: underline;
      text-underline-offset: 2px;
      text-decoration-color: rgb(var(--dyn) / .6);
    }

    .ad-tip a:hover { text-decoration-color: #fff; }

    .ad-tip button {
      flex: none;
      display: grid;
      place-items: center;
      width: 26px;
      height: 26px;
      margin: -4px -4px -4px 0;
      border-radius: 50%;
      color: #b7b7b7;
      transition: background .2s, color .2s;
    }

    .ad-tip button:hover {
      background: #ffffff14;
      color: #fff;
    }

    .ad-tip button svg {
      width: 16px;
      height: 16px;
    }

    @keyframes adTipIn {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: none; }
    }

    @media (prefers-reduced-motion: reduce) {
      .ad-tip { animation: none; }
    }

    @media (max-width: 760px) {
      .ad-tip { font-size: 12px; padding: 10px 12px; }
    }

    /* Servidores: favicon + calidad */
    .server-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 0 8px 0 12px;
    }

    .server-btn:not(:has(.srv-q)) { padding-right: 13px; }

    /* Punto verde fijo: el servidor está disponible (no es un indicador en vivo, por eso no parpadea) */
    .srv-dot {
      width: 7px;
      height: 7px;
      flex: none;
      border-radius: 50%;
      background: #3ddc84;
    }

    .srv-ico {
      width: 16px;
      height: 16px;
      flex: none;
      border-radius: 5px;
      object-fit: contain;
    }

    .srv-q {
      padding: 2px 8px;
      border-radius: 999px;
      background: #ffffff1a;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .3px;
      color: #e6e6e6;
    }

    .server-btn.active .srv-q {
      background: rgb(var(--dyn) / .28);
      color: #fff;
    }
  
    /* =====================================================
       BUSCAR + MI LISTA + BARRA MÓVIL (del index)
    ===================================================== */

    .right {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 12px;
      color: #fff;
      font-size: 12px;
      font-weight: 500;
    }

    .right svg {
      width: 22px;
      height: 22px;
      color: #fff;
      filter: drop-shadow(0 1px 3px #000c);
    }

    .search {
      display: flex;
      align-items: center;
      gap: 8px;
      height: 38px;
      width: 190px;
      padding: 0 12px;
      border: 1px solid transparent;
      border-radius: 999px;
      background: transparent;
      color: #fff;
      transition: width .3s var(--ease), border-color .2s;
    }

    .search:focus-within {
      width: 240px;
      border-color: rgb(var(--dyn) / .45);
    }

    .search input {
      width: 100%;
      border: 0;
      outline: 0;
      background: transparent;
      color: #fff;
      font: inherit;
      font-size: 12px;
    }

    .search input::placeholder { color: #9a9a9a; }

    .iconlink {
      display: flex;
      align-items: center;
      gap: 7px;
      height: 38px;
      padding: 0 8px;
      border-radius: 999px;
      color: #fff;
      transition: opacity .2s;
    }

    .iconlink:hover { opacity: .8; }

    .search-results {
      position: fixed;
      z-index: 120;
      top: 62px;
      right: max(16px, calc((100vw - 1400px) / 2));
      width: 320px;
      max-height: 430px;
      overflow: auto;
      padding: 8px;
      display: none;
      background: #0d0d0d;
      border: 1px solid #ffffff14;
      border-radius: 12px;
      box-shadow: 0 16px 40px #000c;
    }

    .search-results.open { display: block; animation: fadeIn .2s ease both; }

    .result {
      display: flex;
      gap: 10px;
      padding: 7px;
      border-radius: 8px;
      transition: background .2s;
    }

    .result:hover { background: #171717; }

    .result img {
      width: 35px;
      height: 52px;
      object-fit: cover;
      border-radius: 4px;
      background: #151515;
    }

    .result span { min-width: 0; align-self: center; }

    .result strong {
      display: block;
      font-size: 11px;
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .result small {
      display: block;
      margin-top: 5px;
      font-size: 9.5px;
      color: #777;
    }

    .search-results .empty {
      padding: 14px;
      font-size: 12px;
      color: #777;
    }

    .mobile-nav { display: none; }

    @media (max-width: 760px) {

      .right { gap: 8px; }

      .right > .iconlink {
        width: 44px;
        height: 44px;
        padding: 0;
        justify-content: center;
      }

      .iconlink .lbl { display: none; }

      .search {
        width: 44px;
        height: 44px;
        padding: 0;
        justify-content: center;
        gap: 0;
      }

      .search input { width: 0; padding: 0; }

      .search:focus-within {
        width: min(200px, calc(100vw - 200px));
        padding: 0 12px;
        justify-content: flex-start;
        gap: 8px;
      }

      .search:focus-within input { width: 100%; }

      .right:focus-within > .iconlink { display: none; }

      .search-results { right: 12px; left: 12px; width: auto; top: 58px; }

      .page { margin-bottom: 96px; }

      .mobile-nav {
        position: fixed;
        z-index: 55;
        left: 12px;
        right: 12px;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        height: 58px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        border: 1px solid #ffffff12;
        border-radius: 999px;
        background: #0b0b0b;
        box-shadow: 0 10px 30px #000b;
      }

      .mobile-nav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        color: #8a8a8a;
        font-size: 8px;
        font-weight: 500;
        transition: color .2s;
      }

      .mobile-nav a:active { color: #fff; }

      .mobile-nav svg { width: 18px; height: 18px; }

      body.lights-off .mobile-nav { z-index: 95; }
    }
  
    /* =====================================================
       BARRA MÓVIL (solo íconos) + REPORTAR
    ===================================================== */

    @media (max-width: 760px) {

      .mobile-nav {
        height: 54px;
        background: #0b0b0bb8;
        border-color: #ffffff1a;
      }

      .mobile-nav a {
        width: 52px;
        height: 44px;
        align-items: center;
        justify-content: center;
      }

      .mobile-nav svg { width: 22px; height: 22px; }
    }

    body.modal-open { overflow: hidden; }

    .modal {
      position: fixed;
      inset: 0;
      z-index: 200;
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }

    .modal[hidden] { display: none; }

    .modal-backdrop {
      position: absolute;
      inset: 0;
      background: #000000b8;
      animation: fadeIn .2s ease both;
    }

    .sheet {
      position: relative;
      width: 100%;
      max-width: 520px;
      max-height: 88vh;
      overflow: auto;
      padding: 20px 18px calc(20px + env(safe-area-inset-bottom, 0px));
      border: 1px solid #ffffff14;
      border-radius: 22px 22px 0 0;
      background: #0d0d0d;
      box-shadow: 0 -20px 60px #000c;
      animation: sheetUp .3s var(--ease) both;
    }

    @keyframes sheetUp {
      from { opacity: 0; transform: translateY(24px); }
      to { opacity: 1; transform: none; }
    }

    @media (min-width: 700px) {

      .modal { align-items: center; }

      .sheet { border-radius: 22px; padding-bottom: 20px; }
    }

    .sheet-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .sheet-head h3 { font-size: 17px; font-weight: 700; }

    .sheet-close {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: #ffffff12;
      color: #fff;
    }

    .sheet-close svg { width: 18px; height: 18px; }

    .report-context {
      margin-top: 6px;
      font-size: 12px;
      color: #8f8f8f;
    }

    .reasons { display: grid; gap: 8px; margin: 16px 0 12px; }

    .reason {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      border: 1px solid #ffffff14;
      border-radius: 14px;
      background: #ffffff08;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: border-color .2s, background .2s;
    }

    .reason:hover { border-color: #ffffff30; }

    .reason.on { border-color: rgb(var(--dyn) / .55); background: rgb(var(--dyn) / .1); }

    .reason input {
      appearance: none;
      -webkit-appearance: none;
      flex: none;
      width: 18px;
      height: 18px;
      margin: 0;
      border: 2px solid #ffffff55;
      border-radius: 50%;
    }

    .reason input:checked {
      border-color: var(--red);
      background: radial-gradient(var(--red) 0 42%, transparent 46%);
    }

    #reportComment {
      width: 100%;
      min-height: 78px;
      padding: 12px 14px;
      resize: vertical;
      border: 1px solid #ffffff14;
      border-radius: 14px;
      outline: 0;
      background: #ffffff0a;
      color: #fff;
      font: inherit;
      font-size: 13px;
    }

    #reportComment:focus { border-color: rgb(var(--dyn) / .45); }

    .report-error {
      min-height: 18px;
      margin: 8px 2px 0;
      font-size: 12px;
      color: #ff6b73;
    }

    .report-submit {
      width: 100%;
      height: 46px;
      margin-top: 8px;
      border-radius: 999px;
      background: var(--red);
      color: #fff;
      font: inherit;
      font-size: 13px;
      font-weight: 700;
      transition: transform .2s var(--ease), opacity .2s;
    }

    .report-submit:hover:not(:disabled) { transform: translateY(-1px); }
    .report-submit:active:not(:disabled) { transform: scale(.98); }
    .report-submit:disabled { opacity: .45; cursor: not-allowed; }

    .toast {
      position: fixed;
      z-index: 210;
      left: 50%;
      bottom: calc(86px + env(safe-area-inset-bottom, 0px));
      max-width: calc(100% - 32px);
      padding: 11px 18px;
      border: 1px solid #ffffff14;
      border-radius: 999px;
      background: #111;
      box-shadow: 0 10px 30px #000a;
      font-size: 12px;
      font-weight: 600;
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%, 12px);
      transition: opacity .3s, transform .3s var(--ease);
    }

    .toast.show { opacity: 1; transform: translate(-50%, 0); }
  

/* ===== Barra móvil: sección actual en rojo + badge y efecto de "Mi lista" ===== */
.mobile-nav a{position:relative}
.mobile-nav a.active{color:var(--red)}
.mobile-nav a.active::after{content:"";position:absolute;bottom:3px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--red)}
.iconlink{position:relative;transition:transform .2s var(--ease),opacity .2s}
.iconlink:active{transform:scale(.9)}
.iconlink iconify-icon,.iconlink svg{transition:color .2s,transform .2s var(--ease)}
.iconlink:hover iconify-icon,.iconlink:hover svg{transform:scale(1.08)}
.iconlink.active iconify-icon,.iconlink.active svg{color:var(--red)}
.iconlink[data-count]:not([data-count="0"])::after{content:attr(data-count);position:absolute;top:2px;right:-4px;min-width:16px;height:16px;padding:0 4px;display:grid;place-items:center;border-radius:999px;background:var(--red);color:#fff;font-size:9px;font-weight:700;line-height:1;box-shadow:0 0 0 2px #050505}
@media(max-width:760px){.iconlink[data-count]:not([data-count="0"])::after{top:3px;right:2px}}

/* ===== Color dinámico (assets/js/theme.js): el acento y el tinte salen del backdrop; si no hay color, queda el rojo de siempre ===== */
@property --dyn-r{syntax:"<number>";inherits:true;initial-value:229}
@property --dyn-g{syntax:"<number>";inherits:true;initial-value:9}
@property --dyn-b{syntax:"<number>";inherits:true;initial-value:20}
@property --amb-a{syntax:"<number>";inherits:true;initial-value:0}
:root{--dyn-r:229;--dyn-g:9;--dyn-b:20;--amb-a:0;--dyn:var(--dyn-r) var(--dyn-g) var(--dyn-b);transition:--dyn-r 1.4s ease,--dyn-g 1.4s ease,--dyn-b 1.4s ease,--amb-a 1.4s ease}
@media(prefers-reduced-motion:reduce){:root{transition:none}}

/* El color de acento del sitio (botones, barras, puntos, iconos activos) es el color del backdrop actual.
   Mientras no haya color, o si no se puede calcular, sigue siendo el rojo de siempre. */
:root{--red-soft:rgb(var(--dyn) / .13);--red:rgb(var(--dyn));--red2:rgb(calc(var(--dyn-r) + 26) calc(var(--dyn-g) + 26) calc(var(--dyn-b) + 26))}

.page-bg::after{background:radial-gradient(115% 70% at 50% -5%,rgb(var(--dyn) / calc(var(--amb-a) * 1.4)),transparent 70%),radial-gradient(80% 60% at 0% 100%,rgb(var(--dyn) / calc(var(--amb-a) * .7)),transparent 70%),linear-gradient(#05050066,#050505d0)}
.main-poster{box-shadow:0 14px 40px #0009,0 0 80px rgb(var(--dyn) / calc(var(--amb-a) * .8))}

/* ===== Pantalla completa: solo el video (el iframe), no los servidores ni los botones ===== */
.player:fullscreen,.player:-webkit-full-screen{width:100vw;height:100vh;max-width:none;min-height:0;aspect-ratio:auto;border-radius:0;background:#000}
.player:fullscreen iframe,.player:-webkit-full-screen iframe{width:100%;height:100%}

/* Respaldo para navegadores sin Fullscreen API en elementos (iPhone): el video ocupa toda la pantalla */
.player.fs-fake{position:fixed;inset:0;z-index:250;width:100vw;height:100vh;height:100dvh;max-width:none;min-height:0;aspect-ratio:auto;border-radius:0;background:#000}
body.fs-lock{overflow:hidden}
.fs-exit{display:none;position:absolute;top:calc(10px + env(safe-area-inset-top,0px));right:12px;z-index:6;width:42px;height:42px;place-items:center;border:1px solid #ffffff33;border-radius:50%;background:#000000b3;color:#fff;cursor:pointer}
.fs-exit svg{width:20px;height:20px}
.player.fs-fake .fs-exit{display:grid}

/* ===== Barra móvil: iconos más juntos, caja más oscura y con más sombra ===== */
@media(max-width:760px){
  .mobile-nav{left:50%;right:auto;width:auto;height:52px;padding:0 10px;gap:2px;justify-content:center;transform:translateX(-50%);background:#050505ee;border:1px solid #ffffff14;box-shadow:0 14px 38px #000f,0 4px 14px #000c,inset 0 1px 0 #ffffff10}
  .mobile-nav a{width:48px;height:44px}
}