/* =========================================================
   ENDCORE WEB 1.0 — DETAILS / PLAYER / ADMIN
   ========================================================= */

.detail-view {
  min-height: calc(100vh - 78px);
  position: relative;
  overflow: hidden;
}

.detail-backdrop {
  position: absolute;
  inset: 0 0 auto 0;
  height: min(78vh, 850px);
  background-size: cover;
  background-position: center 20%;
  opacity: .72;
  z-index: 0;
}

.detail-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(4, 9, 19, .98) 0%,
      rgba(4, 9, 19, .77) 40%,
      rgba(4, 9, 19, .24) 72%
    ),
    linear-gradient(
      0deg,
      #040913 0%,
      rgba(4, 9, 19, .78) 20%,
      transparent 58%
    );
}

.detail-content {
  position: relative;
  z-index: 2;

  max-width: 1500px;
  margin: 0 auto;

  padding:
    clamp(55px, 8vw, 110px)
    clamp(24px, 6vw, 90px)
    90px;
}

.detail-back {
  margin-bottom: 42px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.detail-back:hover {
  color: var(--text);
}

.detail-layout {
  display: grid;
  grid-template-columns:
    minmax(170px, 250px)
    minmax(0, 720px);

  gap: clamp(28px, 5vw, 70px);
  align-items: end;
}

.detail-poster {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;

  border-radius: 18px;

  background: var(--surface-strong);

  box-shadow:
    0 30px 70px rgba(0, 0, 0, .42);
}

.detail-logo {
  max-width: min(420px, 80%);
  max-height: 150px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 22px;
}

.detail-title {
  margin: 0 0 15px;

  font-size: clamp(42px, 6vw, 82px);
  letter-spacing: -.055em;
  line-height: .96;
}

.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 15px;

  color: rgba(229, 240, 253, .76);

  font-size: 14px;
}

.detail-overview {
  max-width: 760px;
  margin-top: 23px;

  color: #b7c6d8;

  line-height: 1.65;
  font-size: 15px;
}

.detail-actions {
  margin-top: 30px;

  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.detail-action {
  min-height: 47px;

  padding: 0 20px;

  border-radius: 999px;

  border: 1px solid var(--line-strong);

  background: rgba(10, 22, 39, .72);

  cursor: pointer;
}

.detail-action.primary {
  border: 0;

  background: #edf6ff;
  color: #07111f;

  font-weight: 760;
}

.detail-action.admin {
  color: #b9dcff;
  border-color: rgba(75, 157, 255, .38);
}

.detail-extra {
  position: relative;
  z-index: 2;

  max-width: 1500px;
  margin: 0 auto;

  padding:
    0 clamp(24px, 6vw, 90px)
    90px;
}

.detail-section {
  margin-top: 48px;
}

.detail-section h2 {
  margin: 0 0 17px;

  font-size: 24px;
  letter-spacing: -.025em;
}

.credits-section {
  margin-top: 54px;
}


.credits-subtitle {
  margin:
    18px 0
    10px;

  color:
    rgba(199, 221, 245, .58);

  font-size: 10px;
  font-weight: 750;

  letter-spacing: .10em;

  text-transform: uppercase;
}


.credits-crew-title {
  margin-top: 23px;
}


.credits-row {
  display: grid;

  grid-auto-flow: column;

  grid-auto-columns:
    minmax(180px, 220px);

  gap: 10px;

  overflow-x: auto;

  padding:
    2px
    2px
    12px;
}


.credit-person {
  display: grid;

  grid-template-columns:
    48px
    minmax(0, 1fr);

  gap: 11px;

  align-items: center;

  padding:
    10px;

  border:
    1px solid
    rgba(92, 156, 228, .12);

  border-radius: 13px;

  background:
    rgba(7, 19, 36, .64);
}


.credit-person-photo {
  position: relative;

  width: 48px;
  height: 48px;

  overflow: hidden;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 50% 30%,
      rgba(63, 154, 255, .26),
      rgba(10, 31, 61, .92)
    );

  color:
    rgba(111, 194, 255, .36);
}


.credit-person-photo img {
  position: absolute;
  inset: 0;

  z-index: 2;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


.credit-person-photo span {
  position: absolute;
  inset: 0;

  display: grid;
  place-items: center;

  font-size: 18px;
  font-weight: 800;
}


.credit-person-copy {
  min-width: 0;
}


.credit-person-copy strong,
.credit-person-copy span {
  display: block;

  overflow: hidden;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.credit-person-copy strong {
  color:
    rgba(239, 247, 255, .94);

  font-size: 12px;
}


.credit-person-copy span {
  margin-top: 4px;

  color:
    rgba(132, 192, 249, .65);

  font-size: 9px;
}


/* =========================================================
   SERIES / EPISODE INDEX
   ========================================================= */

.series-episodes-section {
  margin-top: 56px;
}


.episodes-heading {
  margin-bottom: 17px;
}


.episodes-heading h2 {
  margin:
    5px 0 0;

  font-size: 27px;
}


.season-list {
  display: grid;
  gap: 10px;
}


.season-block {
  overflow: hidden;

  border:
    1px solid
    rgba(83, 157, 239, .18);

  border-radius: 17px;

  background:
    rgba(5, 16, 31, .60);
}


.season-summary {
  min-height: 68px;

  display: flex;

  justify-content: space-between;
  align-items: center;

  padding:
    11px
    16px;

  list-style: none;

  cursor: pointer;
}


.season-summary::-webkit-details-marker {
  display: none;
}


.season-summary-title {
  display: flex;

  align-items: center;

  gap: 12px;
}


.season-number-mark {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(75, 174, 255, .24);

  border-radius: 12px;

  background:
    rgba(28, 85, 154, .14);

  color:
    #62bdff;

  font-size: 11px;
  font-weight: 800;
}


.season-summary-title strong,
.season-summary-title span {
  display: block;
}


.season-summary-title strong {
  color: #f1f7ff;
  font-size: 14px;
}


.season-summary-title span {
  margin-top: 3px;

  color:
    rgba(190, 215, 242, .48);

  font-size: 9px;
}


.season-chevron {
  color:
    rgba(91, 186, 255, .55);

  transition:
    transform .18s ease;
}


.season-block[open]
.season-chevron {
  transform: rotate(180deg);
}


.episode-list {
  padding:
    0
    14px
    13px;
}


.episode-list-item {
  display: grid;

  grid-template-columns:
    minmax(190px, 250px)
    minmax(0, 1fr)
    24px;

  gap: 18px;

  align-items: center;

  min-height: 148px;

  padding:
    14px
    5px;

  border-top:
    1px solid
    rgba(95, 155, 220, .09);

  border-radius: 10px;

  cursor: pointer;

  transition:
    background .15s ease;
}


.episode-list-item:first-child {
  border-top: 0;
}


.episode-list-item:hover {
  background:
    rgba(29, 76, 132, .09);
}


.episode-list-item:focus-visible {
  outline:
    1px solid
    rgba(83, 180, 255, .62);

  outline-offset: -1px;
}


.episode-preview {
  position: relative;

  aspect-ratio:
    16 / 9;

  overflow: hidden;

  border:
    1px solid
    rgba(94, 160, 232, .15);

  border-radius: 11px;

  background:
    #071321;

  box-shadow:
    0 9px 27px
    rgba(0, 0, 0, .21);
}


.episode-preview img {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform .22s ease,
    filter .22s ease;
}


.episode-list-item:hover
.episode-preview img {
  transform: scale(1.025);

  filter: brightness(.86);
}


.episode-image-progress {
  position: absolute;

  left: 8px;
  right: 8px;
  bottom: 7px;

  z-index: 4;

  height: 3px;

  overflow: hidden;

  border-radius: 999px;

  background:
    rgba(255, 255, 255, .22);
}


.episode-image-progress span {
  display: block;

  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      #3d8cef,
      #65c7ff
    );

  box-shadow:
    0 0 9px
    rgba(64, 176, 255, .44);
}


.episode-watched-mark {
  position: absolute;

  top: 8px;
  right: 8px;

  z-index: 4;

  width: 24px;
  height: 24px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    rgba(8, 31, 31, .82);

  color:
    #69e7b0;

  font-size: 10px;
}


.episode-copy {
  min-width: 0;
}


.episode-number {
  color:
    rgba(79, 179, 255, .73);

  font-size: 9px;

  font-weight: 800;

  letter-spacing: .10em;

  text-transform: uppercase;
}


.episode-copy h3 {
  margin:
    5px
    0
    0;

  color:
    rgba(243, 248, 255, .97);

  font-size: 18px;

  line-height: 1.18;
}


.episode-duration {
  margin-top: 7px;

  color:
    rgba(192, 215, 239, .53);

  font-size: 10px;
}


.episode-open-arrow {
  color:
    rgba(75, 181, 255, .50);

  font-size: 25px;

  transition:
    transform .15s ease,
    color .15s ease;
}


.episode-list-item:hover
.episode-open-arrow {
  transform:
    translateX(3px);

  color:
    #69c7ff;
}


/* =========================================================
   FUTURE ENDCORE USER REVIEWS
   ========================================================= */

.endcore-community {
  margin-top: 58px;

  padding-top: 27px;

  border-top:
    1px solid
    rgba(91, 151, 220, .10);
}


.community-heading {
  display: flex;

  justify-content: space-between;
  align-items: flex-end;

  gap: 20px;

  margin-bottom: 16px;
}


.community-heading h2 {
  margin:
    5px 0 0;
}


.community-soon {
  padding:
    5px
    8px;

  border:
    1px solid
    rgba(88, 175, 255, .18);

  border-radius: 999px;

  color:
    rgba(105, 192, 255, .58);

  font-size: 8px;

  font-weight: 800;

  letter-spacing: .08em;

  text-transform: uppercase;
}


.community-preview-grid {
  display: grid;

  grid-template-columns:
    minmax(220px, .75fr)
    minmax(300px, 1.25fr);

  gap: 11px;
}


.community-preview-card {
  min-height: 92px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding: 17px;

  border:
    1px solid
    rgba(87, 151, 224, .11);

  border-radius: 14px;

  background:
    rgba(7, 19, 36, .42);
}


.community-preview-card > span {
  color:
    rgba(182, 208, 237, .48);

  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: .08em;
}


.community-preview-card strong {
  margin-top: 8px;

  color:
    rgba(215, 232, 250, .58);

  font-size: 11px;
}


.community-stars {
  margin-top: 8px;

  color:
    rgba(73, 169, 255, .65);

  font-size: 24px;

  letter-spacing: .06em;
}


@media (max-width: 760px) {

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

  .episode-open-arrow {
    display: none;
  }

  .community-preview-grid {
    grid-template-columns:
      1fr;
  }
}


/* PLAYER */

.player-overlay {
  position: fixed;
  inset: 0;

  z-index: 200;

  display: grid;
  place-items: center;

  padding: 24px;

  background:
    rgba(0, 4, 10, .94);

  backdrop-filter: blur(18px);
}

.player-shell {
  width: min(1500px, 100%);
  max-height: 96vh;

  display: flex;
  flex-direction: column;

  border: 1px solid var(--line-strong);

  border-radius: 20px;

  overflow: hidden;

  background: #010306;

  box-shadow:
    0 40px 100px rgba(0, 0, 0, .65);
}

.player-topbar {
  min-height: 58px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding: 0 18px;

  background: #07101d;

  border-bottom: 1px solid var(--line);
}

.player-topbar strong {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.player-close {
  width: 38px;
  height: 38px;

  border: 0;
  border-radius: 50%;

  background: rgba(255, 255, 255, .08);

  cursor: pointer;
}

.endcore-player {
  width: 100%;
  max-height: calc(96vh - 59px);

  display: block;

  background: #000;
}


/* ADMIN */

.admin-view {
  min-height: calc(100vh - 78px);

  padding:
    clamp(60px, 8vw, 115px)
    clamp(24px, 6vw, 90px)
    90px;
}

.admin-heading h1 {
  margin: 10px 0 12px;

  font-size: clamp(44px, 6vw, 78px);
  letter-spacing: -.055em;
}

.admin-heading p {
  color: var(--muted);
}

.admin-grid {
  margin-top: 40px;

  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(220px, 1fr));

  gap: 14px;
}

.admin-card {
  padding: 20px;

  border: 1px solid var(--line);

  border-radius: 17px;

  background:
    rgba(9, 20, 36, .72);
}

.admin-card span,
.admin-card strong {
  display: block;
}

.admin-card span {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.admin-card strong {
  margin-top: 8px;
  font-size: 20px;
}


/* METADATA EDITOR */

.editor-overlay {
  position: fixed;
  inset: 0;

  z-index: 220;

  padding: 30px;

  overflow-y: auto;

  background:
    rgba(1, 5, 11, .96);

  backdrop-filter: blur(20px);
}

.editor-shell {
  max-width: 1150px;

  margin: 0 auto;

  padding-bottom: 60px;
}

.editor-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 25px;

  margin-bottom: 30px;
}

.editor-header h2 {
  margin: 7px 0;
  font-size: 36px;
}

.editor-close {
  min-width: 43px;
  height: 43px;

  border: 1px solid var(--line);

  border-radius: 50%;

  background: var(--surface);

  cursor: pointer;
}

.editor-current {
  padding: 18px;

  margin-bottom: 25px;

  border: 1px solid var(--line);

  border-radius: 15px;

  background: rgba(9, 20, 36, .68);

  color: var(--muted);
}

.metadata-candidates,
.artwork-candidates {
  display: grid;
  gap: 14px;
}


.metadata-candidate {
  min-height: 210px;

  display: grid;

  grid-template-columns:
    132px
    minmax(0, 1fr)
    auto;

  gap: 20px;

  padding: 14px;

  align-items: stretch;

  border:
    1px solid
    rgba(104, 158, 222, .16);

  border-radius: 17px;

  background:
    linear-gradient(
      135deg,
      rgba(10, 25, 46, .88),
      rgba(5, 14, 29, .92)
    );

  transition:
    border-color .16s ease,
    background .16s ease,
    transform .16s ease;
}


.metadata-candidate:hover {
  transform:
    translateY(-1px);

  border-color:
    rgba(83, 173, 255, .30);

  background:
    linear-gradient(
      135deg,
      rgba(12, 32, 59, .94),
      rgba(6, 18, 37, .96)
    );
}


.metadata-candidate.recommended {
  border-color:
    rgba(72, 172, 255, .56);

  box-shadow:
    0 0 30px
    rgba(37, 133, 255, .08);
}


.metadata-candidate-poster {
  position: relative;

  width: 132px;

  aspect-ratio:
    2 / 3;

  align-self: center;

  overflow: hidden;

  border-radius: 12px;

  background:
    linear-gradient(
      145deg,
      #0b2342,
      #050d19
    );

  box-shadow:
    0 12px 28px
    rgba(0, 0, 0, .24);
}


.metadata-candidate-poster img {
  position: absolute;
  inset: 0;

  z-index: 2;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


.metadata-poster-fallback {
  position: absolute;
  inset: 0;

  display: grid;
  place-items: center;

  color:
    rgba(100, 180, 255, .20);

  font-size: 48px;
  font-weight: 800;
}


.metadata-recommended-badge {
  position: absolute;

  left: 7px;
  bottom: 7px;

  z-index: 3;

  padding:
    5px
    7px;

  border:
    1px solid
    rgba(89, 194, 255, .42);

  border-radius: 7px;

  background:
    rgba(4, 17, 34, .88);

  color:
    #7ed4ff;

  font-size: 8px;
  font-weight: 850;

  letter-spacing: .12em;

  box-shadow:
    0 0 12px
    rgba(48, 177, 255, .16);
}


.metadata-candidate-copy {
  min-width: 0;

  display: flex;
  flex-direction: column;

  justify-content: center;
}


.metadata-candidate-heading {
  display: flex;

  justify-content:
    space-between;

  align-items:
    flex-start;

  gap: 16px;
}


.metadata-candidate h3 {
  margin: 0;

  color:
    rgba(241, 248, 255, .97);

  font-size: 20px;
  line-height: 1.15;
}


.metadata-original-title {
  margin-top: 4px;

  color:
    rgba(191, 214, 240, .44);

  font-size: 11px;
}


.metadata-match-score {
  min-width: 58px;

  display: flex;
  flex-direction: column;

  align-items: flex-end;

  color:
    rgba(189, 215, 243, .50);
}


.metadata-match-score strong {
  color:
    rgba(214, 231, 249, .84);

  font-size: 18px;
}


.metadata-match-score span {
  margin-top: 1px;

  font-size: 7px;
  font-weight: 800;

  letter-spacing: .13em;
}


.metadata-match-score.strong strong {
  color:
    #7fcaff;
}


.metadata-match-score.perfect strong {
  color:
    #69dcff;

  text-shadow:
    0 0 12px
    rgba(59, 195, 255, .36);
}


.candidate-meta {
  display: flex;
  flex-wrap: wrap;

  gap: 6px;

  margin-top: 10px;
}


.candidate-meta span {
  padding:
    4px
    7px;

  border:
    1px solid
    rgba(90, 160, 237, .13);

  border-radius: 999px;

  background:
    rgba(28, 74, 127, .10);

  color:
    rgba(126, 195, 255, .76);

  font-size: 10px;
}


.metadata-tmdb-rating {
  color:
    rgba(255, 207, 84, .90)
    !important;
}


.metadata-candidate p {
  max-width: 720px;

  margin:
    13px 0 0;

  color:
    rgba(196, 216, 239, .63);

  font-size: 12px;
  line-height: 1.55;
}


.metadata-candidate
.metadata-no-overview {
  opacity: .62;
  font-style: italic;
}


.metadata-candidate-action {
  display: flex;

  align-items: center;
}


.candidate-apply {
  min-height: 42px;

  padding:
    0
    17px;

  border:
    1px solid
    rgba(78, 170, 255, .28);

  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      rgba(37, 118, 213, .94),
      rgba(46, 71, 170, .94)
    );

  color: white;

  font: inherit;
  font-size: 11px;
  font-weight: 750;

  white-space: nowrap;

  cursor: pointer;
}


.candidate-apply:hover {
  border-color:
    rgba(109, 205, 255, .58);

  box-shadow:
    0 0 20px
    rgba(43, 143, 255, .16);
}


@media (max-width: 720px) {

  .metadata-candidate {
    grid-template-columns:
      90px
      1fr;
  }

  .metadata-candidate-poster {
    width: 90px;
  }

  .metadata-candidate-action {
    grid-column:
      1 / -1;

    justify-content:
      flex-end;
  }
}


.editor-tabs {
  display: flex;
  gap: 7px;

  margin-bottom: 22px;
}

.editor-tab {
  min-height: 39px;

  padding: 0 15px;

  border: 1px solid var(--line);

  border-radius: 999px;

  background: transparent;

  color: var(--muted);

  cursor: pointer;
}

.editor-tab.active {
  color: white;
  background: var(--blue-soft);
  border-color: var(--line-strong);
}

.artwork-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  margin-bottom: 18px;
}

.artwork-reset {
  border: 1px solid var(--line);

  border-radius: 999px;

  padding: 9px 13px;

  background: transparent;
  color: var(--muted);

  cursor: pointer;
}

.artwork-item {
  padding: 14px;

  display: grid;
  grid-template-columns:
    minmax(120px, 220px)
    1fr auto;

  gap: 15px;
  align-items: center;

  border: 1px solid var(--line);

  border-radius: 14px;

  background: rgba(9, 20, 36, .74);
}

.artwork-preview {
  width: 100%;
  max-height: 150px;

  object-fit: contain;

  border-radius: 9px;

  background: #02060b;
}

.artwork-path {
  overflow-wrap: anywhere;

  color: var(--muted);

  font-size: 11px;
}

@media (max-width: 820px) {
  .detail-layout {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .detail-poster {
    max-width: 180px;
  }

  .metadata-candidate {
    grid-template-columns: 1fr;
  }

  .artwork-item {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   ENDCORE WEB — ARTWORK PICKER
   ========================================================= */

.artwork-kind-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  margin-bottom: 22px;
}

.artwork-kind-tab {
  min-height: 42px;

  display: inline-flex;
  align-items: center;
  gap: 9px;

  padding: 0 16px;

  border: 1px solid var(--line);
  border-radius: 999px;

  background: transparent;
  color: var(--muted);

  cursor: pointer;
}

.artwork-kind-tab span {
  padding: 2px 7px;

  border-radius: 999px;

  background: rgba(255,255,255,.06);

  font-size: 11px;
}

.artwork-kind-tab.active {
  background: var(--blue-soft);
  border-color: var(--line-strong);
  color: #fff;
}

.artwork-gallery-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;

  gap: 12px;

  margin-bottom: 18px;

  color: var(--muted);
  font-size: 13px;
}

.artwork-gallery {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(165px, 1fr)
    );

  gap: 15px;
}

.artwork-gallery-backdrop {
  grid-template-columns:
    repeat(
      auto-fill,
      minmax(280px, 1fr)
    );
}

.artwork-choice {
  padding: 0;

  overflow: hidden;

  text-align: left;

  border:
    1px solid var(--line);

  border-radius: 15px;

  background:
    rgba(8, 18, 32, .82);

  color: inherit;

  cursor: pointer;

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.artwork-choice:hover,
.artwork-choice:focus-visible {
  transform:
    translateY(-3px);

  border-color:
    rgba(83, 165, 255, .68);

  box-shadow:
    0 15px 35px rgba(0,0,0,.28);

  outline: none;
}

.artwork-choice.current {
  border-color:
    rgba(83, 165, 255, .8);

  box-shadow:
    0 0 0 1px
    rgba(83, 165, 255, .15);
}

.artwork-choice-image-wrap {
  position: relative;

  width: 100%;

  background: #02060b;
}

.artwork-gallery-poster
.artwork-choice-image-wrap {
  aspect-ratio: 2 / 3;
}

.artwork-gallery-backdrop
.artwork-choice-image-wrap {
  aspect-ratio: 16 / 9;
}

.artwork-gallery-logo
.artwork-choice-image-wrap {
  aspect-ratio: 16 / 9;
}

.artwork-choice-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  background: #02060b;
}

.artwork-gallery-poster
.artwork-choice-image {
  object-fit: cover;
}

.artwork-current-badge {
  position: absolute;

  top: 10px;
  right: 10px;

  padding: 5px 9px;

  border-radius: 999px;

  background:
    rgba(17, 111, 231, .94);

  color: white;

  font-size: 10px;
  font-weight: 750;

  letter-spacing: .04em;

  box-shadow:
    0 6px 20px rgba(0,0,0,.35);
}

.artwork-choice-info {
  padding: 11px 12px 13px;
}

.artwork-choice-info span,
.artwork-choice-info strong {
  display: block;
}

.artwork-choice-info span {
  min-height: 17px;

  color: var(--muted);

  font-size: 10px;
}

.artwork-choice-info strong {
  margin-top: 5px;

  font-size: 12px;
}

.artwork-empty {
  padding: 35px;

  border:
    1px dashed var(--line);

  border-radius: 15px;

  color: var(--muted);

  text-align: center;
}


/* =========================================================
   ENDCORE PLAYER 1.0
   ========================================================= */

.detail-track-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  margin:
    20px 0
    4px;
}

.detail-track-picker,
.player-track-picker {
  display: flex;
  align-items: center;
  gap: 9px;

  min-height: 42px;

  padding:
    0 11px
    0 13px;

  border:
    1px solid
    rgba(112, 173, 255, .22);

  border-radius: 11px;

  background:
    rgba(4, 13, 25, .72);

  backdrop-filter:
    blur(14px);
}

.detail-track-picker > span,
.player-track-picker > span {
  color:
    rgba(166, 205, 255, .72);

  font-size: 9px;
  font-weight: 800;

  letter-spacing:
    .14em;
}

.detail-track-picker select,
.player-track-picker select {
  max-width: 250px;

  border: 0;
  outline: 0;

  background:
    transparent;

  color: #f2f7ff;

  font: inherit;
  font-size: 12px;

  cursor: pointer;
}

.detail-track-picker option,
.player-track-picker option {
  background:
    #07111f;

  color: #f2f7ff;
}


/* Full cinematic overlay */

.player-overlay {
  position: fixed;
  inset: 0;

  z-index: 500;

  display: block;

  padding: 0;

  background:
    #000;
}

.player-shell {
  position: relative;

  width: 100vw;
  height: 100vh;
  max-height: none;

  overflow: hidden;

  border: 0;
  border-radius: 0;

  background:
    #000;

  box-shadow: none;
}

.player-stage {
  position: absolute;
  inset: 0;

  display: grid;
  place-items: center;

  background:
    radial-gradient(
      circle at center,
      #061020 0%,
      #010307 58%,
      #000 100%
    );
}

.endcore-player {
  width: 100%;
  height: 100%;
  max-height: none;

  display: block;

  object-fit: contain;

  background: #000;
}


/* Top overlay */

.player-topbar {
  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  z-index: 6;

  min-height: 92px;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  padding:
    24px
    clamp(
      22px,
      3vw,
      46px
    );

  border: 0;

  background:
    linear-gradient(
      to bottom,
      rgba(0, 7, 17, .94),
      rgba(0, 7, 17, .58) 54%,
      transparent
    );

  transition:
    opacity .25s ease,
    transform .25s ease;
}

.player-heading {
  min-width: 0;

  display: grid;
  gap: 3px;
}

.player-heading > span {
  color:
    rgba(101, 177, 255, .78);

  font-size: 9px;
  font-weight: 850;

  letter-spacing:
    .22em;
}

.player-heading strong {
  max-width:
    min(
      70vw,
      850px
    );

  overflow: hidden;

  color: #f5f9ff;

  font-size:
    clamp(
      17px,
      1.6vw,
      24px
    );

  white-space: nowrap;
  text-overflow: ellipsis;
}

.player-heading small {
  color:
    rgba(185, 209, 239, .52);

  font-size: 10px;

  text-transform:
    uppercase;

  letter-spacing:
    .09em;
}

.player-close {
  position: absolute;

  top: 24px;
  right: clamp(22px, 3vw, 46px);

  z-index: 20;

  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  border:
    1px solid
    rgba(255,255,255,.13);

  border-radius: 50%;

  background:
    rgba(5, 15, 28, .58);

  color: white;

  font-size: 24px;

  cursor: pointer;

  backdrop-filter:
    blur(12px);

  transition:
    background .18s ease,
    transform .18s ease;
}

.player-close:hover {
  background:
    rgba(42, 115, 205, .42);

  transform:
    scale(1.05);
}


/* Bottom EndCore controls */

.player-controls {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  z-index: 6;

  padding:
    80px
    clamp(
      22px,
      3.4vw,
      54px
    )
    28px;

  background:
    linear-gradient(
      to top,
      rgba(0, 5, 13, .98),
      rgba(0, 7, 18, .84) 45%,
      transparent
    );

  transition:
    opacity .25s ease,
    transform .25s ease;
}

.player-shell.controls-hidden {
  cursor: none;
}

.player-shell.controls-hidden
.player-topbar {
  opacity: 0;

  transform:
    translateY(-18px);

  pointer-events: none;
}

.player-shell.controls-hidden
.player-controls {
  opacity: 0;

  transform:
    translateY(18px);

  pointer-events: none;
}


/* Timeline */

.player-timeline {
  display: grid;
  gap: 8px;
}

.player-seek {
  --seek-progress: 0%;

  width: 100%;
  height: 5px;

  margin: 0;

  appearance: none;

  border-radius:
    999px;

  outline: none;

  background:
    linear-gradient(
      to right,
      #5dabff
        0%,
      #5dabff
        var(--seek-progress),
      rgba(255,255,255,.22)
        var(--seek-progress),
      rgba(255,255,255,.22)
        100%
    );

  cursor: pointer;
}

.player-seek::-webkit-slider-thumb {
  width: 15px;
  height: 15px;

  appearance: none;

  border: 2px solid white;
  border-radius: 50%;

  background:
    #66b1ff;

  box-shadow:
    0 0 18px
    rgba(71, 158, 255, .8);
}

.player-seek::-moz-range-thumb {
  width: 13px;
  height: 13px;

  border: 2px solid white;
  border-radius: 50%;

  background:
    #66b1ff;
}

.player-time {
  display: flex;
  align-items: center;
  gap: 6px;

  color:
    rgba(222, 236, 255, .68);

  font-size: 11px;
  font-variant-numeric:
    tabular-nums;
}


/* Main control line */

.player-control-row {
  min-height: 56px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 22px;

  margin-top: 4px;
}

.player-control-group {
  display: flex;
  align-items: center;

  gap: 9px;
}

.player-control-button {
  min-width: 42px;
  height: 42px;

  display: inline-grid;
  place-items: center;

  padding: 0 12px;

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius: 11px;

  background:
    rgba(5, 17, 32, .62);

  color: #edf6ff;

  font-size: 17px;

  cursor: pointer;

  backdrop-filter:
    blur(10px);

  transition:
    background .16s ease,
    border-color .16s ease,
    transform .16s ease;
}

.player-control-button:hover {
  border-color:
    rgba(91, 169, 255, .52);

  background:
    rgba(26, 87, 157, .42);

  transform:
    translateY(-1px);
}

.player-control-button.play {
  width: 50px;
  height: 50px;

  border-radius: 50%;

  background:
    rgba(72, 151, 240, .92);

  border-color:
    rgba(166, 214, 255, .58);

  box-shadow:
    0 0 30px
    rgba(35, 126, 232, .25);
}

.player-control-button.skip {
  position: relative;

  font-size: 20px;
}

.player-control-button.skip span {
  position: absolute;

  font-size: 8px;
  font-weight: 850;
}

.player-volume {
  flex: 1;

  max-width: 210px;

  color:
    rgba(177, 207, 242, .58);

  font-size: 9px;
  font-weight: 800;

  letter-spacing: .1em;
}

.player-volume input {
  width: 100%;
  max-width: 145px;

  accent-color:
    #5aabff;
}

.player-track-group {
  margin-left: auto;
}

.player-track-picker {
  min-height: 42px;

  background:
    rgba(5, 17, 32, .62);
}




/* Small screens */

@media (max-width: 820px) {
  .player-topbar {
    min-height: 72px;

    padding:
      16px
      17px;
  }

  .player-controls {
    padding:
      62px
      14px
      16px;
  }

  .player-control-row {
    flex-wrap: wrap;

    gap: 10px;
  }

  .player-volume {
    display: flex;
  }

  .player-track-group {
    width: 100%;

    margin-left: 0;

    justify-content:
      flex-end;
  }

  .player-track-picker {
    flex: 1;
  }

  .player-track-picker select {
    max-width: 130px;
  }
}


/* =========================================================
   ENDCORE RESUME / WATCH PROGRESS
   ========================================================= */

.detail-resume-progress {
  width:
    min(
      560px,
      100%
    );

  margin:
    18px 0
    14px;

  display: grid;
  gap: 8px;
}

.detail-progress-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  color:
    rgba(188, 213, 242, .66);

  font-size: 10px;
}

.detail-progress-copy > span {
  color:
    rgba(104, 177, 255, .72);

  font-size: 9px;
  font-weight: 850;

  letter-spacing:
    .14em;
}

.detail-progress-copy strong {
  color:
    rgba(226, 239, 255, .86);

  font-size: 11px;
  font-variant-numeric:
    tabular-nums;
}

.detail-progress-track {
  width: 100%;
  height: 5px;

  overflow: hidden;

  border-radius: 999px;

  background:
    rgba(255, 255, 255, .13);
}

.detail-progress-value {
  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      rgba(61, 139, 239, .94),
      rgba(103, 187, 255, .98)
    );

  box-shadow:
    0 0 14px
    rgba(72, 161, 255, .38);
}


/* Episodes now have a separate restart action */

.episode-card-wrap {
  position: relative;

  display: grid;
  gap: 6px;
}

.episode-card-wrap
.episode-card {
  width: 100%;
}

.episode-restart {
  width: 100%;

  padding:
    7px 10px;

  border:
    1px solid
    rgba(112, 173, 255, .16);

  border-radius: 8px;

  background:
    rgba(5, 15, 28, .62);

  color:
    rgba(188, 215, 247, .72);

  font: inherit;
  font-size: 10px;

  cursor: pointer;

  transition:
    background .16s ease,
    color .16s ease,
    border-color .16s ease;
}

.episode-restart:hover {
  border-color:
    rgba(92, 172, 255, .48);

  background:
    rgba(29, 91, 163, .32);

  color: #eef7ff;
}


/* =========================================================
   ENDCORE PLAYER TRACK PICKERS — interaction fix
   ========================================================= */

.player-track-picker {
  position: relative;

  min-width: 190px;

  cursor: pointer;

  transition:
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}

.player-track-picker:hover,
.player-track-picker:focus-within {
  border-color:
    rgba(92, 174, 255, .58);

  background:
    rgba(20, 66, 119, .48);

  box-shadow:
    0 0 0 1px
    rgba(83, 167, 255, .08);
}

.player-track-picker > span {
  flex: 0 0 auto;

  pointer-events: none;
}

.player-track-picker select {
  flex: 1 1 auto;

  width: 100%;
  min-width: 120px;
  height: 38px;

  padding:
    0 28px
    0 8px;

  border: 0;

  outline: 0;

  background:
    transparent;

  color: #f2f7ff;

  cursor: pointer;
}

.player-track-picker select:focus {
  outline: none;
}

.player-track-picker.is-disabled {
  opacity: .42;

  cursor:
    not-allowed;
}

.player-track-picker.is-disabled
select {
  cursor:
    not-allowed;
}


/* EndCore subtitle presentation */

.endcore-player::cue {
  color: #f7fbff;

  background:
    rgba(2, 8, 17, .78);

  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-size: 1.05em;

  font-weight: 600;

  text-shadow:
    0 2px 7px #000;
}


/* =========================================================
   ENDCORE METADATA — MANUAL SEARCH
   ========================================================= */

.metadata-manual-search {
  display: grid;
  gap: 12px;

  margin: 16px 0 20px;
  padding: 14px;

  border:
    1px solid
    rgba(91, 164, 243, .16);

  border-radius: 14px;

  background:
    rgba(24, 63, 111, .10);
}


.metadata-manual-copy {
  display: grid;
  gap: 4px;
}

.metadata-manual-copy strong {
  color:
    rgba(235, 245, 255, .94);

  font-size: 12px;
}

.metadata-manual-copy span {
  color:
    rgba(191, 214, 239, .58);

  font-size: 11px;
  line-height: 1.5;
}


.metadata-manual-controls {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto
    auto;

  gap: 8px;
}


.metadata-manual-controls input {
  min-width: 0;

  height: 40px;

  padding: 0 12px;

  border:
    1px solid
    rgba(91, 164, 243, .18);

  border-radius: 10px;

  outline: none;

  background:
    rgba(0, 8, 20, .52);

  color:
    rgba(238, 247, 255, .96);

  font: inherit;
}


.metadata-manual-controls input:focus {
  border-color:
    rgba(78, 171, 255, .58);
}


.metadata-manual-controls button {
  min-height: 40px;

  padding: 0 14px;

  border:
    1px solid
    rgba(80, 169, 255, .26);

  border-radius: 10px;

  background:
    rgba(38, 102, 174, .24);

  color:
    rgba(236, 246, 255, .94);

  font: inherit;
  font-size: 11px;
  font-weight: 700;

  cursor: pointer;
}


.metadata-manual-controls button:hover {
  background:
    rgba(42, 116, 201, .34);
}


.metadata-search-caption {
  margin: 0 0 12px;

  color:
    rgba(185, 211, 238, .62);

  font-size: 11px;
}


@media (max-width: 640px) {

  .metadata-manual-controls {
    grid-template-columns:
      1fr;
  }

}


/* =========================================================
   ENDCORE SERIES — SEASON CARDS
   ========================================================= */

.series-section-heading {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 17px;
}


.series-section-heading h2 {
  margin: 5px 0 0;
}


.series-season-count {
  color:
    rgba(188, 214, 242, .46);

  font-size: 10px;
}


.series-season-grid {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(150px, 185px)
    );

  gap:
    18px 13px;
}


.series-season-card {
  min-width: 0;

  padding: 0;

  border: 0;

  background: transparent;

  color: inherit;

  text-align: left;

  cursor: pointer;
}


.series-season-poster {
  position: relative;

  aspect-ratio: 2 / 3;

  overflow: hidden;

  margin-bottom: 9px;

  border:
    1px solid
    rgba(91, 159, 234, .14);

  border-radius: 12px;

  background:
    radial-gradient(
      circle at 50% 30%,
      rgba(40, 112, 192, .25),
      #071220 68%
    );

  box-shadow:
    0 12px 30px
    rgba(0, 0, 0, .24);
}


.series-season-poster img {
  position: absolute;
  inset: 0;

  z-index: 2;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform .22s ease,
    filter .22s ease;
}


.series-season-card:hover img {
  transform: scale(1.025);

  filter: brightness(.87);
}


.series-season-poster-fallback {
  position: absolute;
  inset: 0;

  display: grid;
  place-items: center;

  color:
    rgba(92, 181, 255, .20);

  font-size: 40px;
  font-weight: 800;
}


.series-season-episode-count {
  position: absolute;

  top: 7px;
  right: 7px;

  z-index: 4;

  min-width: 24px;
  height: 24px;

  display: grid;
  place-items: center;

  padding: 0 5px;

  border-radius: 999px;

  background:
    rgba(8, 114, 68, .92);

  color: white;

  font-size: 9px;
  font-weight: 800;
}


.series-season-progress {
  position: absolute;

  left: 7px;
  right: 7px;
  bottom: 7px;

  z-index: 4;

  height: 3px;

  overflow: hidden;

  border-radius: 999px;

  background:
    rgba(255, 255, 255, .23);
}


.series-season-progress span {
  display: block;

  height: 100%;

  background:
    linear-gradient(
      90deg,
      #3f8ff4,
      #6acbff
    );
}


.series-season-card > strong,
.series-season-card > span {
  display: block;
}


.series-season-card > strong {
  overflow: hidden;

  color:
    rgba(241, 248, 255, .95);

  font-size: 12px;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.series-season-card > span {
  margin-top: 3px;

  color:
    rgba(185, 209, 236, .45);

  font-size: 9px;
}


/* =========================================================
   ENDCORE SEASON — EPISODE LIST
   ========================================================= */

.season-back {
  margin-bottom: 20px;

  padding: 0;

  border: 0;

  background: transparent;

  color:
    rgba(91, 182, 255, .78);

  font: inherit;
  font-size: 11px;
  font-weight: 700;

  cursor: pointer;
}


.season-view-heading {
  display: flex;

  justify-content: space-between;
  align-items: flex-end;

  gap: 25px;

  margin-bottom: 16px;
}


.season-view-heading h2 {
  margin: 5px 0 0;
}


.season-view-heading p {
  max-width: 720px;

  margin:
    10px
    0
    0;

  color:
    rgba(194, 216, 240, .60);

  font-size: 11px;

  line-height: 1.55;
}


.season-view-heading > span {
  color:
    rgba(185, 210, 239, .46);

  font-size: 10px;

  white-space: nowrap;
}


.season-episode-list {
  display: grid;
}


.season-episode-item {
  width: 100%;

  display: grid;

  grid-template-columns:
    minmax(210px, 270px)
    minmax(0, 1fr)
    150px;

  gap: 18px;

  align-items: center;

  padding:
    14px 5px;

  border: 0;

  border-top:
    1px solid
    rgba(94, 154, 220, .10);

  background: transparent;

  color: inherit;

  text-align: left;

  cursor: pointer;

  transition:
    background .15s ease;
}


.season-episode-item:first-child {
  border-top: 0;
}


.season-episode-item:hover {
  background:
    rgba(31, 79, 137, .10);
}


.season-episode-preview {
  position: relative;

  aspect-ratio: 16 / 9;

  overflow: hidden;

  border-radius: 10px;

  background: #071321;

  box-shadow:
    0 8px 24px
    rgba(0, 0, 0, .20);
}


.season-episode-preview img {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform .20s ease;
}


.season-episode-item:hover
.season-episode-preview img {
  transform: scale(1.025);
}


.season-episode-progress {
  position: absolute;

  left: 7px;
  right: 7px;
  bottom: 6px;

  z-index: 4;

  height: 3px;

  overflow: hidden;

  border-radius: 999px;

  background:
    rgba(255,255,255,.22);
}


.season-episode-progress span {
  display: block;

  height: 100%;

  background:
    linear-gradient(
      90deg,
      #3986e8,
      #68c8ff
    );
}


.season-episode-watched {
  position: absolute;

  top: 7px;
  right: 7px;

  z-index: 4;

  width: 24px;
  height: 24px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    rgba(6, 35, 28, .87);

  color:
    #72e9b4;

  font-size: 10px;
}


.season-episode-copy {
  min-width: 0;
}


.season-episode-number {
  color:
    rgba(74, 177, 255, .73);

  font-size: 9px;

  font-weight: 800;

  letter-spacing: .11em;

  text-transform: uppercase;
}


.season-episode-copy h3 {
  margin:
    5px
    0
    0;

  color:
    rgba(242, 248, 255, .97);

  font-size: 17px;
}


.season-episode-meta {
  display: flex;

  gap: 6px;

  margin-top: 7px;
}


.season-episode-meta span {
  padding:
    3px
    6px;

  border-radius: 999px;

  background:
    rgba(39, 87, 143, .12);

  color:
    rgba(178, 209, 240, .58);

  font-size: 9px;
}


.season-episode-copy p {
  display: -webkit-box;

  max-width: 760px;

  overflow: hidden;

  margin:
    9px
    0
    0;

  color:
    rgba(194, 215, 239, .61);

  font-size: 11px;

  line-height: 1.52;

  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}


.season-episode-community {
  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 3px;
}


.season-episode-community span,
.season-episode-community small {
  color:
    rgba(178, 204, 233, .38);

  font-size: 8px;
}


.season-episode-community strong {
  color:
    rgba(66, 165, 255, .56);

  font-size: 15px;

  letter-spacing: .04em;
}


@media (max-width: 900px) {

  .season-episode-item {
    grid-template-columns:
      190px
      minmax(0, 1fr);
  }

  .season-episode-community {
    display: none;
  }
}


@media (max-width: 620px) {

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

}



/* =========================================================
   ENDCORE DETAILS ACTION GLOW
   ========================================================= */

.detail-actions .detail-action {
  transition:
    transform .16s ease,
    filter .16s ease,
    border-color .16s ease,
    background-color .16s ease,
    box-shadow .16s ease;
}

.detail-actions .detail-action:hover,
.detail-actions .detail-action:focus-visible {
  transform: translateY(-1px);

  filter:
    brightness(1.12);

  border-color:
    rgba(101, 188, 255, .58);

  box-shadow:
    0 0 0 1px rgba(67, 159, 238, .12),
    0 0 19px rgba(44, 139, 224, .22);
}

.detail-actions .detail-action.primary:hover,
.detail-actions .detail-action.primary:focus-visible {
  box-shadow:
    0 0 0 1px rgba(74, 175, 255, .16),
    0 0 24px rgba(38, 145, 235, .30);
}

.detail-actions .detail-action.joinme {
  border-color:
    rgba(70, 165, 255, .28);

  background:
    rgba(28, 101, 175, .18);

  color:
    #c7e4ff;
}

.detail-actions .detail-action.joinme:hover,
.detail-actions .detail-action.joinme:focus-visible {
  background:
    rgba(35, 125, 211, .30);

  border-color:
    rgba(99, 190, 255, .65);

  box-shadow:
    0 0 0 1px rgba(77, 172, 246, .16),
    0 0 24px rgba(44, 148, 235, .32);
}



/* =========================================================
   ENDCORE JOINME J2A2 PANEL
   ========================================================= */

.joinme-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;

  display: flex;
  justify-content: flex-end;

  padding: 72px 22px 22px;

  box-sizing: border-box;

  background:
    rgba(0, 6, 14, .44);

  backdrop-filter:
    blur(5px);
}

.joinme-overlay[hidden] {
  display: none;
}


.joinme-panel {
  width:
    min(
      430px,
      calc(100vw - 28px)
    );

  max-height:
    calc(100vh - 94px);

  overflow-y: auto;

  border:
    1px solid
    rgba(106, 166, 225, .18);

  border-radius:
    18px;

  background:
    linear-gradient(
      180deg,
      rgba(11, 30, 51, .99),
      rgba(4, 16, 29, .99)
    );

  box-shadow:
    0 28px 85px
    rgba(0, 0, 0, .52);

  color:
    #dcecff;
}


.joinme-header {
  position: sticky;
  top: 0;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding:
    17px 18px;

  border-bottom:
    1px solid
    rgba(108, 164, 220, .10);

  background:
    rgba(8, 25, 43, .98);
}


.joinme-header span,
.joinme-header strong {
  display: block;
}

.joinme-header span {
  color:
    #6589aa;

  font-size:
    .62rem;

  font-weight:
    850;

  letter-spacing:
    .11em;
}

.joinme-header strong {
  margin-top:
    2px;

  color:
    #eef8ff;

  font-size:
    1.07rem;
}


.joinme-close {
  width: 35px;
  height: 35px;

  border: 0;
  border-radius: 9px;

  background:
    rgba(94, 137, 179, .11);

  color:
    #a9c1d9;

  font-size:
    1.25rem;

  cursor:
    pointer;
}


.joinme-body {
  padding:
    17px 18px 20px;
}


.joinme-context {
  padding:
    13px 14px;

  border-radius:
    11px;

  background:
    rgba(24, 72, 118, .14);
}

.joinme-context > span,
.joinme-context > strong {
  display: block;
}

.joinme-context > span {
  color:
    #698daf;

  font-size:
    .62rem;

  font-weight:
    850;

  letter-spacing:
    .09em;
}

.joinme-context > strong {
  margin-top:
    3px;

  color:
    #dceeff;

  font-size:
    .84rem;
}


.joinme-section {
  margin-top:
    17px;
}


.joinme-section-title {
  margin-bottom:
    8px;

  color:
    #7899b8;

  font-size:
    .66rem;

  font-weight:
    850;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;
}


.joinme-field span {
  display: block;

  margin-bottom:
    6px;

  color:
    #718da9;

  font-size:
    .67rem;
}


.joinme-field select,
.joinme-code-form input {
  width: 100%;
  min-height: 39px;

  box-sizing: border-box;

  padding:
    0 10px;

  border:
    1px solid
    rgba(103, 153, 204, .18);

  border-radius:
    9px;

  outline:
    none;

  background:
    rgba(2, 13, 25, .70);

  color:
    #d9ecfe;

  font:
    inherit;

  font-size:
    .77rem;
}


.joinme-code-form {
  display: grid;

  grid-template-columns:
    1fr auto;

  gap:
    8px;
}


.joinme-panel button {
  min-height:
    37px;

  padding:
    0 12px;

  border-radius:
    9px;

  font:
    inherit;

  font-size:
    .72rem;

  font-weight:
    800;

  cursor:
    pointer;

  transition:
    filter .16s ease,
    box-shadow .16s ease,
    transform .16s ease;
}


.joinme-panel button:hover {
  transform:
    translateY(-1px);

  filter:
    brightness(1.12);

  box-shadow:
    0 0 18px
    rgba(52, 148, 232, .20);
}


.joinme-primary {
  border:
    1px solid
    rgba(72, 161, 250, .28);

  background:
    rgba(29, 103, 178, .33);

  color:
    #d9edff;
}


.joinme-secondary {
  border:
    1px solid
    rgba(119, 158, 198, .16);

  background:
    rgba(86, 124, 162, .09);

  color:
    #a4bad0;
}


.joinme-danger {
  border:
    1px solid
    rgba(229, 99, 99, .20);

  background:
    rgba(153, 45, 45, .13);

  color:
    #e8aaaa;
}


.joinme-wide {
  width:
    100%;
}


.joinme-room-code {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap:
    12px;

  padding:
    15px;

  border-radius:
    12px;

  background:
    rgba(30, 94, 155, .16);
}


.joinme-room-code span,
.joinme-room-code strong {
  display: block;
}

.joinme-room-code span {
  color:
    #6e92b5;

  font-size:
    .62rem;

  font-weight:
    850;

  letter-spacing:
    .09em;
}

.joinme-room-code strong {
  color:
    #eef8ff;

  font-size:
    1.35rem;

  letter-spacing:
    .15em;
}


.joinme-member,
.joinme-user,
.joinme-invitation {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap:
    10px;

  margin-top:
    7px;

  padding:
    10px 11px;

  border-radius:
    10px;

  background:
    rgba(3, 16, 29, .66);
}


.joinme-user {
  justify-content:
    flex-start;

  cursor:
    pointer;
}


.joinme-member strong,
.joinme-user strong,
.joinme-invitation strong {
  display: block;

  color:
    #cee2f4;

  font-size:
    .76rem;
}


.joinme-member small,
.joinme-user small,
.joinme-invitation small {
  display: block;

  margin-top:
    2px;

  color:
    #647f99;

  font-size:
    .64rem;
}


.joinme-user-list {
  margin-bottom:
    9px;
}


.joinme-inline-actions {
  display: flex;
  gap: 5px;
}


.joinme-message {
  margin-bottom:
    13px;

  padding:
    10px 11px;

  border-radius:
    9px;

  background:
    rgba(45, 104, 162, .13);

  color:
    #9dc4e9;

  font-size:
    .72rem;
}


.joinme-message.error {
  background:
    rgba(155, 50, 50, .14);

  color:
    #e8a4a4;
}


.joinme-help {
  color:
    #6b849d;

  font-size:
    .69rem;

  line-height:
    1.5;
}


.joinme-actions {
  display: flex;

  justify-content: flex-end;

  gap:
    7px;

  margin-top:
    17px;
}


@media (max-width: 650px) {

  .joinme-overlay {
    padding:
      62px 10px 10px;
  }


  .joinme-panel {
    width:
      100%;

    max-height:
      calc(100vh - 72px);
  }


  .joinme-code-form {
    grid-template-columns:
      1fr;
  }
}



/* =========================================================
   ENDCORE JOINME J2B1 REALTIME
   ========================================================= */

.endcore-notification-badge {
  position: absolute;

  top: -5px;
  right: -6px;

  min-width: 17px;
  height: 17px;

  box-sizing: border-box;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 4px;

  border: 2px solid #081522;
  border-radius: 999px;

  background: #d94c5a;
  color: #fff;

  font-size: .54rem;
  font-weight: 900;

  line-height: 1;
}

.endcore-notification-badge[hidden] {
  display: none;
}


.joinme-toast-host {
  position: fixed;

  top: 78px;
  right: 22px;

  z-index: 15000;

  display: grid;
  gap: 10px;

  width:
    min(
      390px,
      calc(100vw - 28px)
    );

  pointer-events: none;
}


.joinme-invite-toast {
  padding: 15px 16px;

  border:
    1px solid
    rgba(83, 168, 245, .26);

  border-radius: 15px;

  background:
    linear-gradient(
      145deg,
      rgba(13, 40, 67, .99),
      rgba(5, 20, 35, .99)
    );

  box-shadow:
    0 22px 60px
    rgba(0, 0, 0, .46),
    0 0 30px
    rgba(44, 143, 231, .12);

  color: #dcecff;

  pointer-events: auto;

  animation:
    joinmeInviteIn
    .22s ease-out;
}


@keyframes joinmeInviteIn {

  from {
    opacity: 0;

    transform:
      translateY(-8px)
      scale(.985);
  }


  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }
}


.joinme-invite-kicker {
  margin-bottom: 5px;

  color: #65aae8;

  font-size: .59rem;
  font-weight: 900;

  letter-spacing: .11em;
}


.joinme-invite-title {
  display: block;

  color: #f0f8ff;

  font-size: .88rem;
}


.joinme-invite-room {
  margin-top: 7px;

  color: #86a6c3;

  font-size: .71rem;
}


.joinme-invite-room b {
  color: #c9e4fb;

  letter-spacing: .08em;
}


.joinme-invite-actions {
  display: flex;
  align-items: center;

  gap: 7px;

  margin-top: 12px;
}


.joinme-invite-actions button {
  min-height: 34px;

  padding: 0 11px;

  border-radius: 8px;

  font: inherit;
  font-size: .68rem;
  font-weight: 800;

  cursor: pointer;

  transition:
    transform .15s ease,
    filter .15s ease,
    box-shadow .15s ease;
}


.joinme-invite-actions button:hover {
  transform:
    translateY(-1px);

  filter:
    brightness(1.13);

  box-shadow:
    0 0 18px
    rgba(49, 149, 236, .22);
}


.joinme-invite-accept {
  border:
    1px solid
    rgba(69, 169, 255, .32);

  background:
    rgba(28, 112, 192, .38);

  color: #e1f1ff;
}


.joinme-invite-decline {
  border:
    1px solid
    rgba(115, 155, 194, .18);

  background:
    rgba(82, 120, 156, .10);

  color: #a3bad0;
}


.joinme-invite-dismiss {
  margin-left: auto;

  width: 34px;

  padding: 0 !important;

  border: 0;

  background: transparent;

  color: #708ba5;

  font-size: 1rem !important;
}


@media (max-width: 650px) {

  .joinme-toast-host {
    top: 66px;
    right: 10px;

    width:
      calc(100vw - 20px);
  }
}



/* =========================================================
   ENDCORE NOTIFICATIONS MANAGEMENT J2B2
   ========================================================= */

.notifications-view {
  width: 100%;

  padding-bottom: 40px;
}


.notifications-view-header {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 18px;
}


.notifications-kicker {
  color: #6491b8;

  font-size: .63rem;
  font-weight: 900;

  letter-spacing: .12em;
}


.notifications-view-header h1 {
  margin:
    3px 0 4px;

  color: #edf7ff;

  font-size: 1.45rem;
}


.notifications-view-header p {
  margin: 0;

  color: #748ca3;

  font-size: .76rem;
}


.notification-mark-all,
.notification-mark-read,
.joinme-notification-join,
.joinme-notification-decline {
  min-height: 35px;

  padding: 0 12px;

  border-radius: 8px;

  font: inherit;

  font-size: .69rem;
  font-weight: 800;

  cursor: pointer;

  transition:
    transform .15s ease,
    filter .15s ease,
    box-shadow .15s ease;
}


.notification-mark-all:hover,
.notification-mark-read:hover,
.joinme-notification-join:hover,
.joinme-notification-decline:hover {
  transform:
    translateY(-1px);

  filter:
    brightness(1.12);

  box-shadow:
    0 0 18px
    rgba(48, 149, 236, .18);
}


.notification-mark-all,
.notification-mark-read {
  border:
    1px solid
    rgba(115, 158, 198, .17);

  background:
    rgba(78, 120, 159, .10);

  color: #a5bbcf;
}


.joinme-notification-join {
  border:
    1px solid
    rgba(67, 170, 255, .30);

  background:
    rgba(28, 110, 190, .35);

  color: #e2f2ff;
}


.joinme-notification-decline {
  border:
    1px solid
    rgba(117, 154, 191, .16);

  background:
    rgba(72, 108, 142, .08);

  color: #9db3c8;
}


.notifications-summary {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 8px;

  margin-bottom: 18px;
}


.notifications-summary > div {
  padding: 12px 13px;

  border:
    1px solid
    rgba(91, 146, 199, .09);

  border-radius: 11px;

  background:
    rgba(7, 26, 44, .42);
}


.notifications-summary strong,
.notifications-summary span {
  display: block;
}


.notifications-summary strong {
  color: #d9eeff;

  font-size: 1.05rem;
}


.notifications-summary span {
  margin-top: 2px;

  color: #69849c;

  font-size: .64rem;
}


.notifications-list {
  display: grid;

  gap: 8px;
}


.endcore-notification {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 18px;

  padding: 14px 15px;

  border:
    1px solid
    rgba(97, 145, 190, .09);

  border-radius: 12px;

  background:
    rgba(5, 20, 34, .45);

  transition:
    border-color .15s ease,
    background-color .15s ease,
    box-shadow .15s ease;
}


.endcore-notification.unread {
  border-color:
    rgba(69, 160, 240, .22);

  background:
    rgba(18, 60, 96, .22);

  box-shadow:
    inset 3px 0 0
    rgba(55, 155, 242, .55);
}


.endcore-notification-main {
  min-width: 0;
}


.endcore-notification-title {
  color: #d8ebfb;

  font-size: .79rem;
  font-weight: 850;
}


.endcore-notification-message {
  margin-top: 4px;

  color: #89a5bd;

  font-size: .71rem;

  line-height: 1.45;
}


.endcore-notification-date {
  margin-top: 5px;

  color: #536d84;

  font-size: .61rem;
}


.endcore-notification-actions {
  display: flex;

  flex-shrink: 0;

  gap: 6px;
}


.notifications-empty {
  padding: 34px 18px;

  border:
    1px dashed
    rgba(100, 148, 194, .12);

  border-radius: 12px;

  color: #69839b;

  text-align: center;
}


@media (max-width: 700px) {

  .notifications-view-header,
  .endcore-notification {
    align-items: stretch;

    flex-direction: column;
  }


  .notifications-summary {
    grid-template-columns: 1fr;
  }


  .endcore-notification-actions {
    flex-wrap: wrap;
  }
}



/* =========================================================
   ENDCORE NOTIFICATIONS CLOSE CLEAR
   ========================================================= */

.notifications-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 7px;

  flex-wrap: wrap;
}


.notification-clear-history,
.notification-close {
  min-height: 35px;

  padding: 0 12px;

  border-radius: 8px;

  font: inherit;

  font-size: .69rem;
  font-weight: 800;

  cursor: pointer;

  transition:
    transform .15s ease,
    filter .15s ease,
    box-shadow .15s ease;
}


.notification-clear-history {
  border:
    1px solid
    rgba(213, 93, 93, .20);

  background:
    rgba(150, 48, 48, .11);

  color: #dca0a0;
}


.notification-close {
  border:
    1px solid
    rgba(108, 156, 199, .17);

  background:
    rgba(74, 112, 148, .09);

  color: #a5bdd2;
}


.notification-clear-history:hover,
.notification-close:hover {
  transform:
    translateY(-1px);

  filter:
    brightness(1.13);

  box-shadow:
    0 0 18px
    rgba(49, 149, 236, .17);
}


/* =========================================================
   ENDCORE NOTIFICATIONS HEADER ACTION POSITION FIX
   ========================================================= */

.notifications-view-header {
  flex-direction: column;

  align-items: flex-start;

  justify-content: flex-start;

  gap: 12px;
}


.notifications-header-actions {
  width: 100%;

  justify-content: flex-start;

  margin: 0;
}


@media (min-width: 900px) {

  .notifications-header-actions {
    width: auto;
  }
}


/* =========================================================
   JOINME HOST-ONLY SEEK
   ========================================================= */

.player-overlay.joinme-seek-locked
.player-seek:disabled {
  cursor: not-allowed;
  opacity: .38;
}


.player-overlay.joinme-seek-locked
.player-control-button.skip:disabled {
  cursor: not-allowed;
  opacity: .34;
}


/* =========================================================
   ENDCORE USER / JOINME AVATARS
   ========================================================= */

.user-avatar {
  position: relative;

  overflow: hidden;

  flex: 0 0 auto;
}


.user-avatar > img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  border-radius: inherit;
}


.joinme-room-activity-layout {
  display: flex;

  align-items: center;

  gap: 12px;
}


.joinme-room-avatar {
  display: grid;

  place-items: center;

  width: 44px;
  height: 44px;

  flex: 0 0 44px;

  overflow: hidden;

  border-radius: 50%;

  border:
    1px solid
    rgba(112, 181, 237, .34);

  background:
    rgba(42, 87, 126, .30);

  font-size: .92rem;
  font-weight: 800;

  color: #d8edff;

  box-shadow:
    0 0 18px
    rgba(42, 145, 224, .12);
}


.joinme-room-avatar > img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


.joinme-room-activity-copy {
  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 3px;
}


/* =========================================================
   ENDCORE NOTIFICATIONS TRUE OVERLAY
   ========================================================= */

.notifications-overlay {
  position: fixed;

  inset: 0;

  z-index: 9500;

  display: flex;

  justify-content: center;

  align-items: flex-start;

  padding:
    72px 26px
    30px;

  overflow: auto;

  background:
    rgba(1, 7, 15, .74);

  backdrop-filter:
    blur(8px);
}


.notifications-overlay[hidden] {
  display: none;
}


.notifications-overlay-panel {
  width:
    min(
      1180px,
      100%
    );

  max-height:
    calc(
      100vh - 105px
    );

  overflow: auto;

  border:
    1px solid
    rgba(78, 149, 208, .22);

  border-radius: 18px;

  background:
    rgba(3, 13, 25, .98);

  box-shadow:
    0 28px 90px
    rgba(0, 0, 0, .56);
}


.notifications-overlay-content {
  padding: 24px;
}


@media (max-width: 720px) {

  .notifications-overlay {
    padding:
      62px 10px
      12px;
  }


  .notifications-overlay-panel {
    max-height:
      calc(
        100vh - 75px
      );

    border-radius: 14px;
  }


  .notifications-overlay-content {
    padding: 15px;
  }
}


/* =========================================================
   ADMIN SETTINGS SIDEBAR
   ========================================================= */

#adminSettingsNavButton {
  margin-top: 2px;
}



/* =========================================================
   ENDCORE USER FAVORITES PLAYLISTS
   ========================================================= */

.user-library-page {
  width: 100%;

  padding-bottom: 52px;
}


.user-library-page > h1,
.playlist-heading h1,
.playlist-detail-heading h1 {
  margin:
    6px 0 0;

  font-size:
    clamp(
      2rem,
      4vw,
      3.3rem
    );
}


.user-library-description {
  margin:
    8px 0 28px;

  color:
    rgba(
      215,
      230,
      244,
      .68
    );
}


.user-library-loading,
.user-library-empty {
  min-height: 160px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  gap: 8px;

  padding: 28px;

  border:
    1px solid
    rgba(
      93,
      154,
      205,
      .16
    );

  border-radius: 16px;

  background:
    rgba(
      5,
      17,
      30,
      .55
    );

  color:
    rgba(
      220,
      235,
      247,
      .68
    );

  text-align: center;
}


.user-media-grid {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(
        165px,
        1fr
      )
    );

  gap: 22px;
}


.user-media-grid
.media-card {
  width: auto;

  min-width: 0;
}


.playlist-heading,
.playlist-detail-heading {
  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 24px;

  margin-bottom: 26px;
}


.playlist-create-form {
  display: flex;

  gap: 10px;

  align-items: center;
}


.playlist-create-form input {
  min-width: 220px;

  padding: 10px 13px;

  border:
    1px solid
    rgba(
      90,
      154,
      209,
      .26
    );

  border-radius: 10px;

  background:
    rgba(
      1,
      10,
      19,
      .88
    );

  color: #eef7ff;
}


.playlist-create-form button,
.playlist-detail-actions button,
.playlist-back {
  padding: 9px 14px;

  border:
    1px solid
    rgba(
      80,
      156,
      219,
      .28
    );

  border-radius: 10px;

  background:
    rgba(
      21,
      87,
      138,
      .22
    );

  color: #dcefff;

  cursor: pointer;
}


.playlist-detail-actions {
  display: flex;

  gap: 9px;
}


.playlist-detail-actions
.danger {
  border-color:
    rgba(
      230,
      91,
      91,
      .28
    );

  color: #ffb3b3;
}


.playlist-grid {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(
        250px,
        1fr
      )
    );

  gap: 16px;
}


.playlist-card {
  min-height: 92px;

  display: flex;

  align-items: center;

  gap: 15px;

  padding: 18px;

  border:
    1px solid
    rgba(
      78,
      145,
      201,
      .17
    );

  border-radius: 14px;

  background:
    linear-gradient(
      145deg,
      rgba(
        8,
        27,
        44,
        .90
      ),
      rgba(
        3,
        13,
        25,
        .96
      )
    );

  color: #e8f5ff;

  text-align: left;

  cursor: pointer;

  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
}


.playlist-card:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(
      68,
      161,
      235,
      .42
    );

  box-shadow:
    0 12px 30px
    rgba(
      0,
      0,
      0,
      .22
    );
}


.playlist-card > div:last-child {
  display: flex;

  flex-direction: column;

  gap: 5px;
}


.playlist-card span {
  color:
    rgba(
      213,
      230,
      244,
      .62
    );
}


.playlist-card-icon {
  width: 44px;
  height: 44px;

  display: grid;

  place-items: center;

  flex: 0 0 44px;

  border-radius: 50%;

  background:
    rgba(
      38,
      129,
      200,
      .18
    );

  color: #8acbff;
}


.playlist-back {
  margin-bottom: 18px;
}


.playlist-remove-item {
  position: absolute;

  top: 8px;
  right: 8px;

  z-index: 3;

  width: 30px;
  height: 30px;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .18
    );

  border-radius: 50%;

  background:
    rgba(
      0,
      0,
      0,
      .74
    );

  color: #fff;

  cursor: pointer;
}


.playlist-picker {
  position: fixed;

  inset: 0;

  z-index: 9700;

  display: grid;

  place-items: center;

  padding: 20px;

  background:
    rgba(
      0,
      6,
      13,
      .72
    );

  backdrop-filter:
    blur(8px);
}


.playlist-picker[hidden] {
  display: none;
}


.playlist-picker-panel {
  width:
    min(
      520px,
      100%
    );

  max-height:
    min(
      680px,
      85vh
    );

  overflow: auto;

  padding: 22px;

  border:
    1px solid
    rgba(
      80,
      154,
      215,
      .24
    );

  border-radius: 17px;

  background:
    rgba(
      3,
      14,
      26,
      .98
    );

  box-shadow:
    0 30px 90px
    rgba(
      0,
      0,
      0,
      .58
    );
}


.playlist-picker-panel > header {
  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 20px;

  margin-bottom: 18px;
}


.playlist-picker-panel h2 {
  margin:
    4px 0 0;
}


.playlist-picker-close {
  width: 36px;
  height: 36px;

  border: 0;

  border-radius: 50%;

  background:
    rgba(
      255,
      255,
      255,
      .06
    );

  color: #fff;

  cursor: pointer;
}


.playlist-picker-list {
  display: flex;

  flex-direction: column;

  gap: 9px;
}


.playlist-picker-list > button {
  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 20px;

  padding: 13px 15px;

  border:
    1px solid
    rgba(
      80,
      154,
      215,
      .18
    );

  border-radius: 11px;

  background:
    rgba(
      9,
      31,
      50,
      .68
    );

  color: #e5f4ff;

  cursor: pointer;

  text-align: left;
}


.playlist-picker-list > button:hover {
  border-color:
    rgba(
      72,
      167,
      240,
      .46
    );

  background:
    rgba(
      19,
      61,
      91,
      .72
    );
}


.playlist-picker-list span {
  color:
    rgba(
      215,
      232,
      245,
      .56
    );
}


@media (max-width: 700px) {

  .playlist-heading,
  .playlist-detail-heading {
    align-items: stretch;

    flex-direction: column;
  }


  .playlist-create-form {
    align-items: stretch;

    flex-direction: column;
  }


  .playlist-create-form input {
    min-width: 0;
  }
}


/* =========================================================
   ENDCORE FAVORITE + WATCHED IDENTITY
   ========================================================= */

/*
 * Poster containers become the anchor for
 * favorite and watched indicators.
 */
.media-poster,
.episode-card-wrap {
  position: relative;
}


/* ---------------------------------------------------------
   ENDCORE FAVORITE MARK — CARD
   --------------------------------------------------------- */

.endcore-card-favorite {
  position: absolute;

  top: 9px;
  left: 9px;

  z-index: 8;

  width: 34px;
  height: 34px;

  display: grid;

  place-items: center;

  padding: 0;

  border:
    1px solid
    rgba(164, 207, 237, .22);

  border-radius: 50%;

  background:
    rgba(2, 11, 20, .78);

  box-shadow:
    0 5px 18px
    rgba(0, 0, 0, .32);

  cursor: pointer;

  opacity: .68;

  transition:
    opacity .16s ease,
    transform .16s ease,
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}


.endcore-card-favorite:hover {
  opacity: 1;

  transform:
    scale(1.07);

  border-color:
    rgba(99, 184, 243, .60);

  background:
    rgba(7, 31, 50, .94);

  box-shadow:
    0 0 20px
    rgba(69, 164, 232, .24);
}


.endcore-card-favorite.is-favorite {
  opacity: 1;

  border-color:
    rgba(94, 195, 255, .84);

  background:
    rgba(12, 67, 103, .90);

  box-shadow:
    0 0 19px
    rgba(48, 169, 242, .42);
}


/* ---------------------------------------------------------
   ENDCORE FAVORITE MARK GLYPH
   --------------------------------------------------------- */

.endcore-favorite-mark {
  width: 19px;
  height: 19px;

  display: grid;

  place-items: center;

  flex: 0 0 19px;
}


.endcore-favorite-mark img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  opacity: .70;

  filter:
    grayscale(.38)
    brightness(1.18);

  transition:
    opacity .16s ease,
    filter .16s ease,
    transform .16s ease;
}


.is-favorite
.endcore-favorite-mark img {
  opacity: 1;

  filter:
    grayscale(0)
    brightness(1.32)
    drop-shadow(
      0 0 5px
      rgba(84, 196, 255, .82)
    );

  transform:
    scale(1.04);
}


/* ---------------------------------------------------------
   WATCHED — GREEN DOT + CHECK
   --------------------------------------------------------- */

.endcore-watched-badge {
  position: absolute;

  right: 9px;
  bottom: 9px;

  z-index: 7;

  width: 24px;
  height: 24px;

  display: grid;

  place-items: center;

  border:
    2px solid
    rgba(219, 255, 231, .84);

  border-radius: 50%;

  background:
    rgb(31, 181, 88);

  color: #ffffff;

  font-size: .76rem;

  font-weight: 900;

  line-height: 1;

  box-shadow:
    0 0 0 2px
    rgba(2, 10, 16, .68),
    0 0 15px
    rgba(34, 201, 96, .42);

  pointer-events: none;
}


/* ---------------------------------------------------------
   DETAILS FAVORITE
   --------------------------------------------------------- */

.endcore-detail-favorite {
  display: inline-flex;

  align-items: center;

  gap: 8px;
}


.endcore-detail-favorite.is-favorite {
  border-color:
    rgba(84, 185, 244, .62);

  background:
    rgba(26, 102, 151, .22);

  box-shadow:
    0 0 18px
    rgba(44, 159, 226, .15);
}


/*
 * Playlist remove control already occupies top-right,
 * so EndCore Favorite deliberately lives top-left.
 */
.user-library-media-card
.endcore-card-favorite {
  left: 9px;
  right: auto;
}


/* ---------------------------------------------------------
   EPISODE CARDS
   --------------------------------------------------------- */

.episode-card-wrap
.endcore-card-favorite {
  top: 8px;
  left: 8px;
}


.episode-card-wrap
.endcore-watched-badge {
  right: 8px;
  bottom: 8px;
}


@media (max-width: 700px) {

  .endcore-card-favorite {
    width: 32px;
    height: 32px;
  }


  .endcore-watched-badge {
    width: 22px;
    height: 22px;

    font-size: .70rem;
  }
}

/* =========================================================
   ENDCORE PEOPLE + COMMUNITY POLISH
   ========================================================= */


/* -------------------------
   PEOPLE
   ------------------------- */

.credits-section {
  margin-top: 64px;
}

.credits-section > .section-kicker {
  margin-bottom: 7px;
}

.credits-section > h2 {
  margin-bottom: 24px;

  font-size:
    clamp(25px, 2.2vw, 31px);

  letter-spacing: -.035em;
}

.credits-subtitle {
  margin:
    24px 0
    13px;

  color:
    rgba(168, 204, 240, .62);

  font-size: 9px;
  font-weight: 820;

  letter-spacing: .16em;
}

.credits-row {
  grid-auto-columns:
    clamp(150px, 12vw, 178px);

  gap: 15px;

  padding:
    3px
    3px
    18px;

  scroll-snap-type:
    x proximity;

  scrollbar-width: none;
}

.credits-row::-webkit-scrollbar {
  display: none;
}

.credit-person {
  display: flex;
  flex-direction: column;

  gap: 0;

  padding: 0;

  border: 0;

  border-radius: 17px;

  background:
    transparent;

  scroll-snap-align: start;

  transition:
    transform .18s ease,
    filter .18s ease;
}

.credit-person:hover {
  transform:
    translateY(-5px);

  filter:
    brightness(1.06);
}

.credit-person-photo {
  width: 100%;
  height: auto;

  aspect-ratio:
    4 / 5;

  overflow: hidden;

  border:
    1px solid
    rgba(107, 176, 255, .14);

  border-radius: 17px;

  background:
    radial-gradient(
      circle at 50% 25%,
      rgba(54, 146, 255, .28),
      rgba(7, 20, 39, .98) 70%
    );

  box-shadow:
    0 15px 32px
    rgba(0, 0, 0, .24);

  transition:
    border-color .18s ease,
    box-shadow .18s ease;
}

.credit-person:hover
.credit-person-photo {
  border-color:
    rgba(103, 183, 255, .32);

  box-shadow:
    0 19px 38px
    rgba(0, 0, 0, .34),
    0 0 28px
    rgba(49, 138, 255, .08);
}

.credit-person-photo img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}

.credit-person-photo > span {
  position: absolute;
  inset: 0;

  display: grid;
  place-items: center;

  color:
    rgba(221, 237, 255, .82);

  font-size: 28px;
  font-weight: 760;
}

.credit-person-photo img + span {
  z-index: -1;
}

.credit-person-copy {
  min-width: 0;

  display: grid;

  gap: 3px;

  padding:
    11px 3px
    2px;
}

.credit-person-copy strong {
  overflow: hidden;

  color:
    rgba(239, 247, 255, .94);

  font-size: 13px;
  font-weight: 680;

  line-height: 1.3;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.credit-person-copy span {
  overflow: hidden;

  color:
    rgba(166, 195, 225, .56);

  font-size: 10px;

  line-height: 1.35;

  text-overflow: ellipsis;
  white-space: nowrap;
}


/* Crew intentionally uses a denser visual language. */

.credits-crew-title {
  margin-top: 34px;
}

.credits-crew-title + .credits-row {
  grid-auto-columns:
    minmax(215px, 255px);

  gap: 11px;
}

.credits-crew-title +
.credits-row
.credit-person {
  display: grid;

  grid-template-columns:
    56px
    minmax(0, 1fr);

  align-items: center;

  gap: 11px;

  padding: 10px;

  border:
    1px solid
    rgba(91, 157, 231, .11);

  border-radius: 14px;

  background:
    linear-gradient(
      135deg,
      rgba(9, 23, 43, .76),
      rgba(5, 16, 31, .52)
    );
}

.credits-crew-title +
.credits-row
.credit-person:hover {
  border-color:
    rgba(92, 176, 255, .25);
}

.credits-crew-title +
.credits-row
.credit-person-photo {
  width: 56px;
  height: 56px;

  aspect-ratio: 1;

  border-radius: 50%;

  box-shadow:
    none;
}

.credits-crew-title +
.credits-row
.credit-person-copy {
  padding: 0;
}


/* -------------------------
   ENDCORE COMMUNITY
   ------------------------- */

.endcore-community {
  position: relative;

  margin-top: 70px;

  padding:
    34px 0
    4px;

  border-top:
    1px solid
    rgba(93, 159, 233, .12);
}

.endcore-community::before {
  content: "";

  position: absolute;

  top: -1px;
  left: 0;

  width: 150px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(68, 160, 255, .78),
      transparent
    );
}

.community-heading {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 24px;

  margin-bottom: 21px;
}

.community-heading-copy h2 {
  margin:
    5px 0
    7px;

  font-size:
    clamp(25px, 2.2vw, 31px);

  letter-spacing: -.035em;
}

.community-heading-copy p {
  margin: 0;

  color:
    rgba(169, 198, 228, .52);

  font-size: 11px;
}

.community-review-action {
  min-height: 35px;

  display: inline-flex;

  align-items: center;

  gap: 7px;

  padding:
    0 13px;

  border:
    1px solid
    rgba(93, 171, 255, .20);

  border-radius: 999px;

  background:
    rgba(12, 29, 52, .42);

  color:
    rgba(191, 220, 249, .78);

  cursor: pointer;

  font-size: 10px;
  font-weight: 690;

  transition:
    transform .16s ease,
    color .16s ease,
    border-color .16s ease,
    background .16s ease;
}

.community-review-action:hover {
  transform:
    translateY(-1px);

  color: #e4f2ff;

  border-color:
    rgba(91, 177, 255, .42);

  background:
    rgba(17, 41, 70, .72);
}

.community-review-action span {
  color:
    #69b9ff;

  font-size: 13px;
}

.community-layout {
  display: grid;

  grid-template-columns:
    minmax(240px, .72fr)
    minmax(420px, 1.28fr);

  gap: 14px;
}

.community-score-card,
.community-feed-card {
  position: relative;

  overflow: hidden;

  border:
    1px solid
    rgba(90, 158, 233, .11);

  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      rgba(9, 24, 45, .74),
      rgba(5, 15, 29, .48)
    );

  box-shadow:
    0 18px 42px
    rgba(0, 0, 0, .12);
}

.community-score-card {
  min-height: 180px;

  padding: 23px;
}

.community-score-card::after {
  content: "";

  position: absolute;

  width: 150px;
  height: 150px;

  right: -65px;
  top: -65px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(49, 143, 255, .13),
      transparent 68%
    );
}

.community-score-label {
  color:
    rgba(168, 200, 233, .55);

  font-size: 9px;
  font-weight: 760;

  letter-spacing: .11em;

  text-transform: uppercase;
}

.community-score-value {
  display: flex;

  align-items: baseline;

  gap: 6px;

  margin-top: 12px;
}

.community-score-value strong {
  color: #f1f8ff;

  font-size: 47px;
  font-weight: 680;

  line-height: 1;

  letter-spacing: -.055em;
}

.community-score-value span {
  color:
    rgba(156, 192, 227, .48);

  font-size: 11px;
}

.community-score-track {
  width: 100%;
  height: 3px;

  margin-top: 20px;

  overflow: hidden;

  border-radius: 999px;

  background:
    rgba(255, 255, 255, .08);
}

.community-score-track span {
  display: block;

  width: 0;
  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      #398eea,
      #7ac4ff
    );
}

.community-score-card p {
  max-width: 270px;

  margin:
    16px 0
    0;

  color:
    rgba(163, 193, 224, .48);

  font-size: 10px;

  line-height: 1.55;
}

.community-feed-card {
  min-height: 180px;

  padding: 20px;
}

.community-feed-heading {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding-bottom: 14px;

  border-bottom:
    1px solid
    rgba(91, 155, 223, .09);
}

.community-feed-heading > div {
  display: grid;

  gap: 3px;
}

.community-feed-heading > div > span {
  color:
    rgba(119, 183, 247, .56);

  font-size: 8px;
  font-weight: 820;

  letter-spacing: .14em;
}

.community-feed-heading strong {
  color:
    rgba(227, 239, 251, .86);

  font-size: 13px;
}

.community-mark {
  width: 31px;
  height: 31px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(76, 168, 255, .23);

  border-radius: 50%;

  color:
    rgba(100, 188, 255, .76);

  font-size: 8px;
  font-weight: 820;

  letter-spacing: .04em;
}

.community-empty-review {
  min-height: 106px;

  display: flex;

  align-items: center;

  gap: 15px;

  padding:
    18px 4px
    4px;
}

.community-quote-mark {
  flex: 0 0 auto;

  width: 45px;
  height: 45px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(74, 161, 255, .14);

  border-radius: 14px;

  background:
    rgba(37, 109, 188, .08);

  color:
    rgba(88, 181, 255, .70);

  font-family: Georgia, serif;

  font-size: 32px;
  line-height: 1;
}

.community-empty-review strong {
  display: block;

  color:
    rgba(220, 235, 250, .76);

  font-size: 12px;
}

.community-empty-review p {
  max-width: 470px;

  margin:
    5px 0
    0;

  color:
    rgba(159, 190, 220, .45);

  font-size: 10px;

  line-height: 1.5;
}


@media (max-width: 900px) {

  .community-layout {
    grid-template-columns:
      1fr;
  }

  .credits-row {
    grid-auto-columns:
      minmax(145px, 43vw);
  }

  .credits-crew-title +
  .credits-row {
    grid-auto-columns:
      minmax(210px, 72vw);
  }
}


@media (max-width: 620px) {

  .community-heading {
    align-items: flex-start;

    flex-direction: column;
  }

  .community-review-action {
    align-self: flex-start;
  }

  .community-score-card,
  .community-feed-card {
    border-radius: 15px;
  }
}




/* =========================================================
   ENDCORE PEOPLE + COMMUNITY TV SCALE + NAV
   ========================================================= */


/* -------------------------
   Credits navigation
   ------------------------- */

.credits-carousel {
  position: relative;
}

.credits-carousel::after {
  content: "";

  position: absolute;

  top: 0;
  right: 0;
  bottom: 18px;

  width: 92px;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(4, 10, 20, .82) 72%,
      rgba(4, 10, 20, .96)
    );
}

.credits-next {
  position: absolute;

  z-index: 8;

  top: 50%;
  right: 13px;

  width: 52px;
  height: 74px;

  display: grid;
  place-items: center;

  padding: 0;

  border:
    1px solid
    rgba(108, 190, 255, .30);

  border-radius: 18px;

  background:
    rgba(7, 20, 38, .82);

  color:
    rgba(226, 242, 255, .94);

  box-shadow:
    0 14px 38px
    rgba(0, 0, 0, .42);

  backdrop-filter:
    blur(15px);

  cursor: pointer;

  font-size: 39px;
  font-weight: 300;

  line-height: 1;

  transform:
    translateY(-50%);

  transition:
    transform .16s ease,
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
}

.credits-next:hover {
  transform:
    translateY(-50%)
    scale(1.06);

  border-color:
    rgba(111, 198, 255, .60);

  background:
    rgba(13, 39, 70, .94);

  box-shadow:
    0 18px 42px
    rgba(0, 0, 0, .50),
    0 0 28px
    rgba(54, 159, 255, .13);
}


/* -------------------------
   Larger Cast
   ------------------------- */

.credits-section > h2 {
  font-size:
    clamp(30px, 2.35vw, 38px);
}

.credits-subtitle {
  margin-top: 28px;

  font-size: 11px;

  letter-spacing: .15em;
}

.credits-row {
  grid-auto-columns:
    clamp(185px, 14vw, 215px);

  gap: 18px;

  padding-bottom: 22px;

  padding-right: 74px;
}

.credit-person-copy {
  gap: 5px;

  padding:
    13px 4px
    4px;
}

.credit-person-copy strong {
  font-size: 15px;

  line-height: 1.32;
}

.credit-person-copy span {
  font-size: 12px;

  line-height: 1.4;
}


/* -------------------------
   Larger Crew
   ------------------------- */

.credits-crew-title {
  margin-top: 39px;
}

.credits-crew-title +
.credits-carousel
.credits-row {
  grid-auto-columns:
    minmax(265px, 310px);

  gap: 14px;
}

.credits-crew-title +
.credits-carousel
.credit-person {
  grid-template-columns:
    66px
    minmax(0, 1fr);

  gap: 14px;

  min-height: 86px;

  padding: 12px 14px;

  border-radius: 17px;
}

.credits-crew-title +
.credits-carousel
.credit-person-photo {
  width: 66px;
  height: 66px;
}

.credits-crew-title +
.credits-carousel
.credit-person-copy strong {
  font-size: 14px;
}

.credits-crew-title +
.credits-carousel
.credit-person-copy span {
  margin-top: 3px;

  font-size: 11px;
}


/* -------------------------
   Community TV readability
   ------------------------- */

.endcore-community {
  margin-top: 78px;

  padding-top: 38px;
}

.community-heading {
  margin-bottom: 27px;
}

.community-heading-copy h2 {
  margin-top: 7px;

  font-size:
    clamp(31px, 2.45vw, 40px);
}

.community-heading-copy p {
  margin-top: 8px;

  font-size: 13px;

  line-height: 1.55;
}

.community-review-action {
  min-height: 42px;

  gap: 8px;

  padding:
    0 17px;

  font-size: 12px;
}

.community-review-action span {
  font-size: 16px;
}

.community-layout {
  grid-template-columns:
    minmax(300px, .78fr)
    minmax(470px, 1.22fr);

  gap: 18px;
}

.community-score-card,
.community-feed-card {
  min-height: 230px;

  border-radius: 20px;
}

.community-score-card {
  padding: 28px;
}

.community-score-label {
  font-size: 11px;

  letter-spacing: .12em;
}

.community-score-value {
  gap: 9px;

  margin-top: 17px;
}

.community-score-value strong {
  font-size: 65px;
}

.community-score-value span {
  font-size: 14px;
}

.community-score-track {
  height: 4px;

  margin-top: 23px;
}

.community-score-card p {
  max-width: 350px;

  margin-top: 20px;

  font-size: 13px;

  line-height: 1.6;
}

.community-feed-card {
  padding: 25px;
}

.community-feed-heading {
  padding-bottom: 18px;
}

.community-feed-heading > div > span {
  font-size: 10px;
}

.community-feed-heading strong {
  margin-top: 2px;

  font-size: 16px;
}

.community-mark {
  width: 39px;
  height: 39px;

  font-size: 10px;
}

.community-empty-review {
  min-height: 142px;

  gap: 19px;

  padding-top: 23px;
}

.community-quote-mark {
  width: 58px;
  height: 58px;

  border-radius: 17px;

  font-size: 40px;
}

.community-empty-review strong {
  font-size: 15px;
}

.community-empty-review p {
  margin-top: 8px;

  font-size: 13px;

  line-height: 1.55;
}


/* -------------------------
   Very large displays / TV
   ------------------------- */

@media (min-width: 1600px) {

  .credits-row {
    grid-auto-columns:
      225px;

    gap: 20px;
  }

  .credit-person-copy strong {
    font-size: 16px;
  }

  .credit-person-copy span {
    font-size: 13px;
  }

  .credits-crew-title +
  .credits-carousel
  .credits-row {
    grid-auto-columns:
      320px;
  }

  .community-heading-copy p,
  .community-score-card p,
  .community-empty-review p {
    font-size: 14px;
  }
}


/* -------------------------
   Smaller screens
   ------------------------- */

@media (max-width: 900px) {

  .credits-next {
    right: 8px;

    width: 46px;
    height: 66px;
  }

  .community-layout {
    grid-template-columns:
      1fr;
  }
}



/* =========================================================
   ENDCORE WIDE DETAILS + CREW REPAIR
   ========================================================= */


/* -------------------------
   Use the available screen
   ------------------------- */

.detail-extra {
  width: 100%;
  max-width: none;

  margin:
    0;

  padding:
    0
    clamp(32px, 4vw, 82px)
    110px;
}


/* -------------------------
   PEOPLE heading scale
   ------------------------- */

.credits-section {
  margin-top: 72px;
}

.credits-section > .section-kicker {
  font-size: 11px;

  letter-spacing: .16em;
}

.credits-section > h2 {
  margin-top: 7px;
  margin-bottom: 28px;

  font-size:
    clamp(34px, 2.5vw, 44px);
}

.credits-subtitle {
  margin-bottom: 15px;

  font-size: 12px;

  letter-spacing: .15em;
}


/* -------------------------
   CAST
   ------------------------- */

.credits-carousel-cast
.credits-row {
  grid-auto-columns:
    clamp(195px, 13.5vw, 230px);

  gap: 20px;

  padding-right: 88px;
}

.credits-carousel-cast
.credit-person-copy strong {
  font-size: 17px;
}

.credits-carousel-cast
.credit-person-copy span {
  margin-top: 2px;

  font-size: 13px;
}


/* -------------------------
   CREW — explicit repair
   ------------------------- */

.credits-crew-title {
  margin-top: 44px;
}

.credits-carousel-crew
.credits-row {
  grid-auto-columns:
    minmax(285px, 330px);

  gap: 15px;

  padding:
    3px
    88px
    22px
    3px;
}

.credits-carousel-crew
.credit-person {
  min-height: 96px;

  display: grid;

  grid-template-columns:
    72px
    minmax(0, 1fr);

  grid-template-rows:
    auto;

  flex-direction: unset;

  align-items: center;

  gap: 15px;

  padding:
    12px
    15px;

  border:
    1px solid
    rgba(98, 168, 240, .15);

  border-radius: 18px;

  background:
    linear-gradient(
      135deg,
      rgba(10, 27, 49, .88),
      rgba(5, 17, 33, .68)
    );

  box-shadow:
    0 14px 32px
    rgba(0, 0, 0, .13);
}

.credits-carousel-crew
.credit-person:hover {
  transform:
    translateY(-3px);

  border-color:
    rgba(95, 181, 255, .32);

  background:
    linear-gradient(
      135deg,
      rgba(13, 35, 62, .94),
      rgba(7, 22, 41, .76)
    );
}

.credits-carousel-crew
.credit-person-photo {
  width: 72px;
  height: 72px;

  aspect-ratio: 1;

  border-radius: 50%;

  box-shadow:
    none;
}

.credits-carousel-crew
.credit-person-copy {
  min-width: 0;

  display: flex;
  flex-direction: column;

  justify-content: center;

  gap: 5px;

  padding: 0;
}

.credits-carousel-crew
.credit-person-copy strong {
  font-size: 16px;

  line-height: 1.25;
}

.credits-carousel-crew
.credit-person-copy span {
  font-size: 13px;

  line-height: 1.35;
}


/* -------------------------
   Navigation arrows
   ------------------------- */

.credits-next {
  right: 18px;

  width: 58px;
  height: 82px;

  border-radius: 20px;

  font-size: 44px;
}

.credits-carousel::after {
  width: 112px;
}


/* -------------------------
   COMMUNITY — larger,
   wider and TV readable
   ------------------------- */

.endcore-community {
  margin-top: 86px;

  padding-top: 43px;
}

.endcore-community
.section-kicker {
  font-size: 11px;

  letter-spacing: .16em;
}

.community-heading {
  margin-bottom: 30px;
}

.community-heading-copy h2 {
  margin:
    8px 0
    9px;

  font-size:
    clamp(36px, 2.7vw, 46px);

  line-height: 1.05;
}

.community-heading-copy p {
  font-size: 15px;

  line-height: 1.55;
}

.community-review-action {
  min-height: 46px;

  padding:
    0 20px;

  font-size: 13px;
}

.community-review-action span {
  font-size: 17px;
}


.community-layout {
  grid-template-columns:
    minmax(330px, .68fr)
    minmax(560px, 1.32fr);

  gap: 20px;
}


.community-score-card,
.community-feed-card {
  min-height: 270px;

  border-radius: 22px;
}


/* Rating */

.community-score-card {
  padding: 32px;
}

.community-score-label {
  font-size: 12px;
}

.community-score-value {
  margin-top: 20px;
}

.community-score-value strong {
  font-size: 72px;
}

.community-score-value span {
  font-size: 16px;
}

.community-score-track {
  height: 5px;

  margin-top: 27px;
}

.community-score-card p {
  max-width: 400px;

  margin-top: 23px;

  font-size: 15px;

  line-height: 1.62;
}


/* Review feed */

.community-feed-card {
  padding: 30px;
}

.community-feed-heading {
  padding-bottom: 21px;
}

.community-feed-heading > div > span {
  font-size: 11px;

  letter-spacing: .14em;
}

.community-feed-heading strong {
  font-size: 18px;
}

.community-mark {
  width: 44px;
  height: 44px;

  font-size: 11px;
}

.community-empty-review {
  min-height: 165px;

  gap: 22px;

  padding-top: 28px;
}

.community-quote-mark {
  width: 64px;
  height: 64px;

  border-radius: 18px;

  font-size: 44px;
}

.community-empty-review strong {
  font-size: 17px;
}

.community-empty-review p {
  max-width: 700px;

  margin-top: 8px;

  font-size: 15px;

  line-height: 1.6;
}


/* -------------------------
   Big desktop / TV output
   ------------------------- */

@media (min-width: 1700px) {

  .detail-extra {
    padding-left:
      clamp(50px, 4.2vw, 92px);

    padding-right:
      clamp(50px, 4.2vw, 92px);
  }

  .credits-carousel-cast
  .credits-row {
    grid-auto-columns:
      235px;
  }

  .credits-carousel-crew
  .credits-row {
    grid-auto-columns:
      345px;
  }

  .credits-carousel-crew
  .credit-person-copy strong {
    font-size: 17px;
  }

  .credits-carousel-crew
  .credit-person-copy span {
    font-size: 14px;
  }

  .community-heading-copy p,
  .community-score-card p,
  .community-empty-review p {
    font-size: 16px;
  }

  .community-feed-heading strong {
    font-size: 19px;
  }
}


/* -------------------------
   Responsive
   ------------------------- */

@media (max-width: 900px) {

  .detail-extra {
    padding:
      0 22px
      80px;
  }

  .community-layout {
    grid-template-columns:
      1fr;
  }

  .credits-carousel-cast
  .credits-row {
    grid-auto-columns:
      minmax(175px, 46vw);
  }

  .credits-carousel-crew
  .credits-row {
    grid-auto-columns:
      minmax(270px, 78vw);
  }
}



/* =========================================================
   ENDCORE REVIEW DIALOG STEP B
   ========================================================= */

body.review-dialog-open {
  overflow: hidden;
}


.review-dialog-overlay {
  position: fixed;

  inset: 0;

  z-index: 500;

  display: grid;
  place-items: center;

  padding: 28px;

  background:
    rgba(1, 6, 13, .78);

  backdrop-filter:
    blur(18px);
}


.review-dialog {
  width:
    min(
      680px,
      100%
    );

  overflow: hidden;

  border:
    1px solid
    rgba(99, 177, 255, .20);

  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      rgba(10, 26, 48, .98),
      rgba(4, 13, 26, .99)
    );

  box-shadow:
    0 34px 90px
    rgba(0, 0, 0, .58),
    0 0 48px
    rgba(43, 137, 245, .08);
}


.review-dialog-header {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 25px;

  padding:
    29px
    31px
    21px;

  border-bottom:
    1px solid
    rgba(94, 157, 225, .10);
}


.review-dialog-header h2 {
  margin:
    7px 0
    0;

  color:
    #eef7ff;

  font-size:
    clamp(
      27px,
      2.3vw,
      34px
    );

  letter-spacing:
    -.035em;
}


.review-dialog-close {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  padding: 0;

  border:
    1px solid
    rgba(108, 177, 244, .15);

  border-radius: 50%;

  background:
    rgba(14, 34, 58, .55);

  color:
    rgba(218, 235, 251, .78);

  cursor: pointer;

  font-size: 27px;
  line-height: 1;
}


.review-dialog-close:hover {
  color: #fff;

  border-color:
    rgba(102, 187, 255, .38);

  background:
    rgba(23, 52, 84, .82);
}


.review-dialog-body {
  display: grid;

  gap: 26px;

  padding:
    27px
    31px
    30px;
}


.review-field {
  display: grid;

  gap: 11px;
}


.review-field > span {
  color:
    rgba(205, 225, 246, .77);

  font-size: 14px;
  font-weight: 700;
}


.review-field small {
  margin-left: 5px;

  color:
    rgba(157, 190, 222, .44);

  font-size: 11px;
  font-weight: 500;
}


.review-rating-input {
  display: flex;

  align-items: center;

  gap: 13px;
}


.review-rating-input input {
  width: 150px;
  height: 66px;

  padding:
    0 18px;

  border:
    1px solid
    rgba(91, 168, 245, .23);

  border-radius: 16px;

  outline: none;

  background:
    rgba(4, 14, 28, .74);

  color:
    #f0f8ff;

  font: inherit;

  font-size: 30px;
  font-weight: 680;
}


.review-rating-input input:focus,
.review-field textarea:focus {
  border-color:
    rgba(80, 176, 255, .66);

  box-shadow:
    0 0 0 3px
    rgba(51, 146, 245, .09);
}


.review-rating-input strong {
  color:
    rgba(166, 198, 229, .54);

  font-size: 17px;
  font-weight: 600;
}


.review-field textarea {
  width: 100%;
  min-height: 155px;

  resize: vertical;

  padding:
    17px 18px;

  border:
    1px solid
    rgba(91, 168, 245, .18);

  border-radius: 17px;

  outline: none;

  background:
    rgba(4, 14, 28, .67);

  color:
    rgba(233, 244, 255, .94);

  font: inherit;

  font-size: 15px;

  line-height: 1.6;
}


.review-field textarea::placeholder,
.review-rating-input input::placeholder {
  color:
    rgba(159, 191, 221, .35);
}


.review-dialog-error {
  padding:
    12px 14px;

  border:
    1px solid
    rgba(255, 99, 111, .20);

  border-radius: 12px;

  background:
    rgba(130, 29, 42, .14);

  color:
    rgba(255, 184, 192, .92);

  font-size: 13px;
}


.review-dialog-actions {
  min-height: 80px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding:
    17px
    31px;

  border-top:
    1px solid
    rgba(94, 157, 225, .10);

  background:
    rgba(2, 10, 21, .30);
}


.review-dialog-actions > div {
  display: flex;

  gap: 10px;
}


.review-dialog-actions button {
  min-height: 43px;

  padding:
    0 18px;

  border-radius: 999px;

  cursor: pointer;

  font: inherit;

  font-size: 13px;
  font-weight: 680;
}


.review-cancel {
  border:
    1px solid
    rgba(113, 165, 217, .16);

  background:
    transparent;

  color:
    rgba(196, 217, 238, .68);
}


.review-save {
  border:
    1px solid
    rgba(100, 187, 255, .36);

  background:
    linear-gradient(
      135deg,
      #1678d7,
      #299be8
    );

  color:
    #f6fbff;
}


.review-delete {
  border:
    1px solid
    rgba(255, 105, 116, .17);

  background:
    rgba(121, 27, 39, .10);

  color:
    rgba(245, 158, 166, .76);
}


.review-save:hover {
  filter:
    brightness(1.10);
}


.review-cancel:hover {
  color: #edf7ff;

  border-color:
    rgba(113, 181, 245, .30);
}


.review-delete:hover {
  color:
    rgba(255, 190, 196, .96);

  border-color:
    rgba(255, 105, 116, .34);

  background:
    rgba(121, 27, 39, .18);
}


.review-dialog-actions
button:disabled {
  opacity: .55;

  cursor: wait;
}


@media (max-width: 620px) {

  .review-dialog-overlay {
    padding: 14px;
  }

  .review-dialog {
    border-radius: 19px;
  }

  .review-dialog-header,
  .review-dialog-body {
    padding-left: 21px;
    padding-right: 21px;
  }

  .review-dialog-actions {
    align-items: stretch;

    flex-direction: column-reverse;

    padding:
      17px
      21px
      22px;
  }

  .review-dialog-actions > div {
    width: 100%;
  }

  .review-dialog-actions button {
    flex: 1;
  }

  .review-delete {
    width: 100%;
  }
}



/* =========================================================
   ENDCORE COMMUNITY LIVE C2
   ========================================================= */


.community-score-meta {
  margin-top: 12px;

  color:
    rgba(143, 188, 229, .62);

  font-size: 14px;

  line-height: 1.4;
}


.community-personal-rating {
  margin-top: 28px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 18px;

  padding-top: 23px;

  border-top:
    1px solid
    rgba(91, 158, 229, .11);
}


.community-personal-rating > div {
  display: grid;

  gap: 5px;
}


.community-personal-rating
> div
> span {
  color:
    rgba(141, 186, 226, .53);

  font-size: 10px;
  font-weight: 780;

  letter-spacing: .12em;
}


.community-personal-rating strong {
  color:
    rgba(234, 245, 255, .92);

  font-size: 20px;

  line-height: 1.2;
}


.community-personal-state {
  padding:
    6px
    10px;

  border:
    1px solid
    rgba(81, 168, 250, .14);

  border-radius: 999px;

  background:
    rgba(28, 91, 153, .08);

  color:
    rgba(132, 196, 248, .61);

  font-size: 10px;
  font-weight: 700;
}


.community-feed-summary {
  display: flex;

  align-items: center;

  gap: 12px;
}


.community-feed-summary
> span:first-child:not(.community-mark) {
  min-width: 32px;
  height: 32px;

  display: grid;
  place-items: center;

  padding:
    0 8px;

  border:
    1px solid
    rgba(92, 167, 239, .14);

  border-radius: 999px;

  color:
    rgba(169, 207, 240, .68);

  font-size: 12px;
  font-weight: 720;
}


.community-review-list {
  max-height: 560px;

  overflow-y: auto;

  margin:
    6px
    -8px
    -7px
    0;

  padding-right: 8px;

  scrollbar-width: thin;

  scrollbar-color:
    rgba(86, 157, 224, .28)
    transparent;
}


.community-review-list::-webkit-scrollbar {
  width: 6px;
}


.community-review-list::-webkit-scrollbar-thumb {
  border-radius: 999px;

  background:
    rgba(86, 157, 224, .28);
}


.community-review-item {
  display: grid;

  grid-template-columns:
    58px
    minmax(0, 1fr);

  gap: 16px;

  padding:
    21px
    4px;

  border-bottom:
    1px solid
    rgba(90, 151, 216, .09);
}


.community-review-item:last-child {
  border-bottom: 0;
}


.community-review-avatar {
  position: relative;

  width: 58px;
  height: 58px;

  overflow: hidden;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(96, 177, 255, .23);

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 50% 30%,
      rgba(62, 155, 255, .30),
      rgba(7, 27, 49, .96)
    );

  color:
    rgba(225, 240, 255, .86);

  font-size: 19px;
  font-weight: 760;
}


.community-review-avatar img {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


.community-review-copy {
  min-width: 0;
}


.community-review-topline {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 16px;
}


.community-review-identity {
  min-width: 0;

  display: grid;

  gap: 4px;
}


.community-review-identity strong {
  overflow: hidden;

  color:
    rgba(235, 245, 255, .93);

  font-size: 16px;
  font-weight: 720;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.community-review-identity span {
  color:
    rgba(147, 182, 216, .48);

  font-size: 11px;
}


.community-review-rating {
  flex: 0 0 auto;

  padding:
    6px
    10px;

  border:
    1px solid
    rgba(82, 178, 255, .20);

  border-radius: 999px;

  background:
    rgba(34, 108, 176, .10);

  color:
    rgba(132, 205, 255, .86);

  font-size: 12px;
  font-weight: 760;
}


.community-review-copy p {
  max-width: 850px;

  margin:
    12px 0
    0;

  color:
    rgba(203, 220, 237, .76);

  font-size: 15px;

  line-height: 1.62;

  white-space: pre-wrap;
}


.community-private-mark {
  flex: 0 0 auto;

  width: 58px;
  height: 58px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(82, 161, 236, .14);

  border-radius: 18px;

  background:
    rgba(29, 88, 145, .07);

  color:
    rgba(104, 183, 247, .62);

  font-size: 31px;
}


/* TV / large display */

@media (min-width: 1600px) {

  .community-score-meta {
    font-size: 16px;
  }

  .community-personal-rating
  > div
  > span {
    font-size: 11px;
  }

  .community-personal-rating strong {
    font-size: 23px;
  }

  .community-personal-state {
    font-size: 11px;
  }

  .community-review-item {
    grid-template-columns:
      64px
      minmax(0, 1fr);

    gap: 18px;

    padding:
      24px
      5px;
  }

  .community-review-avatar {
    width: 64px;
    height: 64px;

    font-size: 21px;
  }

  .community-review-identity strong {
    font-size: 18px;
  }

  .community-review-identity span {
    font-size: 12px;
  }

  .community-review-rating {
    font-size: 13px;
  }

  .community-review-copy p {
    font-size: 16px;
  }
}


@media (max-width: 620px) {

  .community-personal-rating {
    align-items: flex-start;

    flex-direction: column;
  }

  .community-review-item {
    grid-template-columns:
      48px
      minmax(0, 1fr);

    gap: 12px;
  }

  .community-review-avatar {
    width: 48px;
    height: 48px;
  }

  .community-review-topline {
    gap: 10px;
  }

  .community-review-copy p {
    font-size: 14px;
  }
}



/* =========================================================
   ENDCORE COMMUNITY OWN REVIEW
   ========================================================= */

.community-review-name-row {
  min-width: 0;

  display: flex;

  align-items: center;

  gap: 9px;
}


.community-review-name-row strong {
  min-width: 0;
}


.community-own-review-badge {
  flex: 0 0 auto;

  padding:
    4px
    8px;

  border:
    1px solid
    rgba(92, 181, 255, .22);

  border-radius: 999px;

  background:
    rgba(38, 124, 202, .10);

  color:
    rgba(128, 204, 255, .82);

  font-size: 9px;
  font-weight: 760;

  letter-spacing: .04em;

  text-transform: uppercase;
}


@media (min-width: 1600px) {

  .community-own-review-badge {
    font-size: 10px;
  }
}



/* =========================================================
   ENDCORE_PLAYER_LOGO_ARTWORK
   ========================================================= */

.player-title-logo {
  display:
    block;

  width:
    auto;

  height:
    auto;

  max-width:
    min(520px, 52vw);

  max-height:
    88px;

  margin-top:
    5px;

  object-fit:
    contain;

  object-position:
    left center;

  filter:
    drop-shadow(
      0 8px 20px
      rgba(0,0,0,.35)
    );
}


.player-title-logo[hidden] {
  display:
    none !important;
}


@media (max-width: 700px) {

  .player-title-logo {
    max-width:
      62vw;

    max-height:
      64px;
  }
}



/* =========================================================
   ENDCORE_ADMIN_CONTEXT_MEDIA
   ========================================================= */


/* ---------- Context menu ---------- */

.media-admin-context-menu {
  position: fixed;
  z-index: 500;

  width: 310px;

  padding: 10px;

  border:
    1px solid
    rgba(96, 166, 241, .28);

  border-radius: 18px;

  background:
    rgba(5, 13, 25, .98);

  box-shadow:
    0 24px 70px
    rgba(0, 0, 0, .48);

  backdrop-filter:
    blur(24px);
}


.media-admin-context-heading {
  padding:
    10px
    12px
    13px;

  border-bottom:
    1px solid
    rgba(255,255,255,.08);

  margin-bottom: 7px;
}


.media-admin-context-heading span {
  display: block;

  color:
    var(--muted);

  font-size: 10px;
  font-weight: 800;

  letter-spacing: .18em;
}


.media-admin-context-heading strong {
  display: block;

  margin-top: 5px;

  font-size: 18px;
}


.media-admin-context-menu button {
  width: 100%;

  display: grid;

  grid-template-columns:
    34px
    minmax(0, 1fr);

  align-items: center;

  gap: 10px;

  padding:
    11px
    12px;

  border: 0;
  border-radius: 12px;

  background:
    transparent;

  color:
    inherit;

  text-align: left;

  cursor: pointer;
}


.media-admin-context-menu button:hover,
.media-admin-context-menu button:focus-visible {
  background:
    rgba(65, 145, 235, .14);

  outline: none;
}


.media-admin-context-menu button strong,
.media-admin-context-menu button small {
  display: block;
}


.media-admin-context-menu button strong {
  font-size: 14px;
}


.media-admin-context-menu button small {
  margin-top: 3px;

  color:
    var(--muted);

  font-size: 11px;
  line-height: 1.35;
}


.media-admin-context-menu button.danger:hover {
  background:
    rgba(203, 60, 68, .14);
}


.media-admin-context-menu button.danger strong {
  color:
    #ff9a9f;
}


.media-admin-context-icon {
  display: grid;
  place-items: center;

  width: 32px;
  height: 32px;

  border-radius: 9px;

  background:
    rgba(255,255,255,.05);

  font-size: 18px;
}


.media-admin-context-divider {
  height: 1px;

  margin:
    7px
    5px;

  background:
    rgba(255,255,255,.08);
}


/* ---------- Existing metadata/artwork editor enlarged ---------- */

.editor-overlay {
  padding:
    clamp(
      18px,
      3vw,
      42px
    );
}


.editor-shell,
.editor-shell-large {
  width:
    min(
      92vw,
      1500px
    );

  max-width:
    1500px;

  min-height:
    80vh;

  margin:
    0 auto;

  padding-bottom:
    70px;
}


.editor-header h2 {
  font-size:
    clamp(
      38px,
      4vw,
      54px
    );

  line-height: 1.03;
}


.media-admin-editor-intro {
  max-width: 820px;

  margin:
    10px
    0
    0;

  color:
    var(--muted);

  font-size: 16px;
  line-height: 1.6;
}


.editor-tabs {
  gap: 10px;

  margin-bottom: 30px;
}


.editor-tab {
  min-height: 48px;

  padding:
    0
    22px;

  font-size: 14px;
  font-weight: 700;
}


.editor-current {
  padding: 22px;

  font-size: 15px;
}


.metadata-candidates {
  gap: 22px;
}


.metadata-candidate {
  min-height: 330px;

  grid-template-columns:
    220px
    minmax(0, 1fr)
    auto;

  gap: 28px;

  padding: 22px;

  border-radius: 20px;
}


.metadata-candidate-poster {
  width: 220px;

  border-radius: 15px;
}


.metadata-candidate h3 {
  font-size: 27px;
  line-height: 1.12;
}


.metadata-original-title {
  margin-top: 7px;

  font-size: 14px;
}


.metadata-match-score strong {
  font-size: 24px;
}


.metadata-match-score span {
  font-size: 9px;
}


.candidate-meta {
  gap: 8px;

  margin-top: 15px;
}


.candidate-meta span {
  padding:
    6px
    10px;

  font-size: 12px;
}


.metadata-candidate p {
  max-width: 900px;

  margin-top: 18px;

  font-size: 15px;
  line-height: 1.7;
}


.candidate-apply {
  min-height: 50px;

  padding:
    0
    22px;

  font-size: 14px;
}


.artwork-gallery {
  grid-template-columns:
    repeat(
      auto-fill,
      minmax(220px, 1fr)
    );

  gap: 22px;
}


.artwork-gallery-backdrop {
  grid-template-columns:
    repeat(
      auto-fill,
      minmax(360px, 1fr)
    );
}


.artwork-gallery-logo {
  grid-template-columns:
    repeat(
      auto-fill,
      minmax(300px, 1fr)
    );
}


.artwork-gallery-toolbar {
  font-size: 15px;
}


/* ---------- Manual metadata ---------- */

.media-admin-editor-body {
  width: 100%;
}


.manual-metadata-form {
  padding:
    28px;

  border:
    1px solid
    rgba(96, 166, 241, .18);

  border-radius: 22px;

  background:
    rgba(8, 18, 33, .80);
}


.manual-metadata-heading {
  margin-bottom: 30px;
}


.manual-metadata-heading span,
.delete-media-title span {
  color:
    var(--muted);

  font-size: 11px;
  font-weight: 800;

  letter-spacing: .14em;

  text-transform: uppercase;
}


.manual-metadata-heading h3,
.delete-media-title h3 {
  margin:
    8px
    0
    0;

  font-size:
    clamp(
      30px,
      3vw,
      44px
    );

  line-height: 1.08;
}


.manual-metadata-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 22px;
}


.manual-metadata-field {
  display: flex;
  flex-direction: column;

  gap: 9px;
}


.manual-metadata-field span {
  color:
    rgba(218, 232, 248, .78);

  font-size: 14px;
  font-weight: 700;
}


.manual-metadata-field input,
.manual-metadata-field textarea {
  width: 100%;

  box-sizing: border-box;

  border:
    1px solid
    rgba(103, 161, 225, .22);

  border-radius: 13px;

  background:
    rgba(2, 8, 16, .78);

  color:
    white;

  font: inherit;
  font-size: 16px;
}


.manual-metadata-field input {
  min-height: 52px;

  padding:
    0
    15px;
}


.manual-metadata-field textarea {
  min-height: 260px;

  padding:
    15px;

  resize: vertical;

  line-height: 1.65;
}


.manual-metadata-field input:focus,
.manual-metadata-field textarea:focus {
  border-color:
    rgba(82, 176, 255, .65);

  outline: none;
}


.manual-metadata-wide {
  grid-column:
    1 / -1;
}


.manual-metadata-actions {
  display: flex;

  justify-content:
    flex-end;

  gap: 12px;

  margin-top: 30px;
}


.manual-metadata-actions button {
  min-height: 50px;

  padding:
    0
    22px;

  border-radius: 999px;

  font: inherit;
  font-size: 14px;
  font-weight: 750;

  cursor: pointer;
}


.manual-metadata-cancel {
  border:
    1px solid
    var(--line);

  background:
    transparent;

  color:
    var(--muted);
}


.manual-metadata-save {
  border:
    1px solid
    rgba(77, 173, 255, .45);

  background:
    var(--blue-soft);

  color:
    white;
}


.manual-metadata-error {
  margin-top: 20px;

  padding: 15px 17px;

  border:
    1px solid
    rgba(255, 100, 110, .34);

  border-radius: 12px;

  background:
    rgba(150, 32, 40, .14);

  color:
    #ffb4b8;

  font-size: 14px;
}


/* ---------- Delete ---------- */

.delete-media-panel {
  padding:
    30px;

  border:
    1px solid
    rgba(190, 71, 80, .26);

  border-radius: 22px;

  background:
    rgba(24, 10, 15, .70);
}


.delete-media-title {
  margin-bottom: 28px;
}


.delete-media-file-card {
  display: grid;

  gap: 20px;

  padding:
    24px;

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius: 16px;

  background:
    rgba(0,0,0,.22);
}


.delete-media-file-card span {
  display: block;

  margin-bottom: 6px;

  color:
    var(--muted);

  font-size: 12px;
  font-weight: 700;

  text-transform: uppercase;
}


.delete-media-file-card strong {
  display: block;

  font-size: 17px;
  line-height: 1.5;
}


.delete-media-path {
  overflow-wrap:
    anywhere;
}


.delete-media-warning {
  margin-top: 24px;

  padding:
    22px;

  border:
    1px solid
    rgba(236, 91, 101, .30);

  border-radius: 16px;

  background:
    rgba(139, 30, 40, .12);
}


.delete-media-warning strong {
  color:
    #ffb1b5;

  font-size: 18px;
}


.delete-media-warning p {
  max-width: 900px;

  margin:
    10px
    0
    0;

  color:
    rgba(240, 215, 218, .74);

  font-size: 15px;
  line-height: 1.65;
}


.delete-media-confirm {
  display: flex;

  align-items:
    flex-start;

  gap: 13px;

  margin-top: 24px;

  padding:
    18px;

  border-radius: 14px;

  background:
    rgba(255,255,255,.035);

  font-size: 15px;
  line-height: 1.5;

  cursor: pointer;
}


.delete-media-confirm input {
  width: 20px;
  height: 20px;

  margin-top: 1px;
}


.delete-media-execute {
  border:
    1px solid
    rgba(255, 95, 105, .42);

  background:
    rgba(181, 43, 52, .92);

  color:
    white;
}


.delete-media-execute:disabled {
  opacity: .42;

  cursor:
    not-allowed;
}


@media (max-width: 900px) {

  .editor-shell,
  .editor-shell-large {
    width:
      94vw;
  }


  .metadata-candidate {
    grid-template-columns:
      170px
      1fr;
  }


  .metadata-candidate-poster {
    width:
      170px;
  }


  .metadata-candidate-action {
    grid-column:
      1 / -1;

    justify-content:
      flex-end;
  }


  .manual-metadata-grid {
    grid-template-columns:
      1fr;
  }


  .manual-metadata-wide {
    grid-column:
      auto;
  }
}


/* =========================================================
   ENDCORE COMMUNITY SIDE PANEL V2
   ========================================================= */

.detail-extra-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

.detail-extra-main,
.detail-extra-side {
  min-width: 0;
}

.detail-extra-layout.has-community
  .detail-extra-main
  .detail-section:first-child,
.detail-extra-layout.has-community
  .detail-extra-side
  .detail-section:first-child {
  margin-top: 0;
}

@media (min-width: 1280px) {
  .detail-extra-layout.has-community {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(340px, 420px);
    gap: clamp(28px, 3vw, 44px);
  }

  .detail-extra-layout.has-community
    .detail-extra-side {
    position: sticky;
    top: 92px;
    align-self: start;
  }
}

.endcore-community-side {
  margin-top: 0;
}

.community-side-card {
  position: relative;
  display: grid;
  gap: 18px;
  padding: 22px;
  border-radius: 28px;
  border: 1px solid rgba(84, 159, 255, .28);
  background:
    linear-gradient(
      180deg,
      rgba(10, 28, 52, .94) 0%,
      rgba(6, 16, 31, .96) 100%
    );
  box-shadow:
    0 22px 70px rgba(0, 0, 0, .34),
    inset 0 1px 0 rgba(255, 255, 255, .04);
  overflow: hidden;
}

.community-side-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at top right,
      rgba(61, 144, 255, .18),
      transparent 36%
    );
  pointer-events: none;
}

.community-side-header,
.community-side-hero,
.community-side-copy,
.community-side-actions,
.community-personal-summary,
.community-feed-card.compact {
  position: relative;
  z-index: 1;
}

.community-side-header {
  display: grid;
  gap: 6px;
}

.community-side-kicker {
  color: #a9d3ff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.community-side-header h2 {
  margin: 0;
  font-size: clamp(24px, 2.2vw, 34px);
  letter-spacing: -.03em;
}

.community-side-hero {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(7, 21, 42, .72);
  border: 1px solid rgba(81, 152, 244, .16);
}

.community-side-score-shell {
  display: flex;
  align-items: center;
  gap: 14px;
}

.community-side-score-icon {
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background:
    linear-gradient(
      180deg,
      rgba(69, 154, 255, .28),
      rgba(33, 93, 167, .16)
    );
  color: #7cc3ff;
  font-size: 30px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    0 12px 24px rgba(22, 84, 161, .18);
}

.community-side-score-copy {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.community-side-score-copy strong {
  font-size: clamp(40px, 3vw, 58px);
  line-height: .94;
  letter-spacing: -.05em;
}

.community-side-score-copy span {
  color: rgba(226, 238, 252, .72);
  font-size: 16px;
}

.community-side-meta {
  display: grid;
  gap: 12px;
}

.community-side-meta-line {
  color: rgba(226, 238, 252, .8);
  font-size: 14px;
  line-height: 1.4;
}

.community-avatar-cluster {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.community-avatar-chip {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(
      180deg,
      rgba(82, 148, 235, .32),
      rgba(34, 74, 130, .52)
    );
  border: 1px solid rgba(151, 201, 255, .18);
  color: #f4f9ff;
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
}

.community-avatar-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.community-avatar-chip.is-count {
  width: auto;
  min-width: 46px;
  padding: 0 12px;
  background: rgba(14, 35, 64, .9);
  color: #c5e4ff;
}

.community-side-copy {
  margin: 0;
  color: rgba(219, 234, 251, .8);
  font-size: 14px;
  line-height: 1.6;
}

.community-side-actions {
  display: flex;
}

.endcore-community-side
  .community-review-action.side-primary {
  width: 100%;
  justify-content: center;
  border: 0;
  border-radius: 16px;
  padding: 15px 18px;
  background:
    linear-gradient(
      180deg,
      #2d8fff 0%,
      #1465d8 100%
    );
  color: #f8fbff;
  font-weight: 760;
  box-shadow:
    0 14px 26px rgba(20, 101, 216, .28),
    inset 0 1px 0 rgba(255, 255, 255, .18);
}

.endcore-community-side
  .community-review-action.side-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

.community-personal-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(9, 24, 43, .82);
  border: 1px solid rgba(104, 164, 241, .12);
}

.community-personal-summary span {
  display: block;
  margin-bottom: 4px;
  color: rgba(184, 212, 244, .72);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.community-personal-summary strong {
  font-size: 15px;
}

.community-personal-summary-score {
  color: #dff0ff;
  font-size: 20px;
  font-weight: 760;
  letter-spacing: -.03em;
}

.community-feed-card.compact {
  margin-top: 4px;
}

.endcore-community-side .community-review-list {
  display: grid;
  gap: 14px;
  max-height: 620px;
  overflow: auto;
  padding-right: 4px;
}

.endcore-community-side .community-review-item {
  background: rgba(10, 23, 42, .88);
  border: 1px solid rgba(98, 150, 224, .12);
}

.endcore-community-side .community-feed-heading {
  margin-bottom: 14px;
}

.endcore-community-side .community-empty-review {
  min-height: 118px;
}

@media (max-width: 1279px) {
  .detail-extra-layout.has-community
    .detail-extra-side {
    position: static;
  }
}/* =========================================================
   ENDCORE COMMUNITY HERO LAYOUT V3
   ========================================================= */

/*
 * The Community panel belongs to the Details hero,
 * not beside Seasons/Cast.
 */
.detail-content,
.detail-extra {
  max-width: 1680px;
}


/*
 * Movies / Series / Episodes with EndCore Community:
 *
 * poster | metadata/actions | community
 */
@media (min-width: 1420px) {

  .detail-layout.has-community {
    grid-template-columns:
      minmax(180px, 245px)
      minmax(430px, 1fr)
      minmax(350px, 420px);

    gap:
      clamp(
        26px,
        2.5vw,
        42px
      );

    align-items: start;
  }

  .detail-community-hero {
    min-width: 0;
    align-self: start;
  }

}


/*
 * Community never adds empty space to Seasons/Cast.
 */
.detail-extra-main {
  display: block;
}


/*
 * Medium desktop / laptop:
 * poster + metadata first,
 * community becomes a wide card below them,
 * before Seasons/Cast.
 */
@media (
  min-width: 920px
)
and (
  max-width: 1419px
) {

  .detail-layout.has-community {
    grid-template-columns:
      minmax(170px, 230px)
      minmax(0, 1fr);

    align-items: start;
  }

  .detail-layout.has-community
  .detail-community-hero {
    grid-column:
      1 / -1;

    width: 100%;
    max-width: 760px;

    margin-top: 6px;
  }

}


/*
 * Small screens:
 * every block flows naturally.
 */
@media (max-width: 919px) {

  .detail-layout.has-community {
    grid-template-columns:
      minmax(0, 1fr);
  }

  .detail-community-hero {
    width: 100%;
  }

}


/*
 * Side card no longer needs sticky positioning because
 * it now begins at the hero itself.
 */
.detail-community-hero
.endcore-community-side {
  margin-top: 0;
}

.detail-community-hero
.community-side-card {
  width: 100%;
}


/*
 * First six comments remain compact.
 * All additional reviews already exist in the DOM,
 * but only appear when the user expands the feed.
 */
.community-review-list:not(
  .is-expanded
)
.community-review-item:nth-child(
  n + 7
) {
  display: none;
}


/*
 * Expansion should grow the page naturally rather than
 * forcing the user into a tiny inner scrollbar.
 */
.endcore-community-side
.community-review-list {
  max-height: none;
  overflow: visible;
}


/* View all / Show less */
.community-expand-comments {
  width: 100%;

  margin-top: 14px;
  padding: 12px 15px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  border-radius: 14px;

  border:
    1px solid
    rgba(
      105,
      176,
      255,
      .18
    );

  background:
    rgba(
      18,
      52,
      88,
      .44
    );

  color: #bfe2ff;

  font: inherit;
  font-size: 13px;
  font-weight: 700;

  cursor: pointer;

  transition:
    background 150ms ease,
    border-color 150ms ease,
    transform 150ms ease;
}

.community-expand-comments:hover {
  background:
    rgba(
      27,
      76,
      126,
      .56
    );

  border-color:
    rgba(
      105,
      176,
      255,
      .34
    );

  transform:
    translateY(-1px);
}

.community-expand-arrow {
  opacity: .72;
}


/*
 * The obsolete lower-grid side rules from V2 become
 * inert, because .detail-extra-side is no longer emitted.
 */
.detail-extra-layout {
  display: block;
}/* =========================================================
   ENDCORE COMMUNITY PAGE GRID V4
   ========================================================= */

/*
 * Community and the actual Details content must have
 * independent vertical flow.
 *
 * A tall Community card must never push Seasons/Cast down.
 */
.detail-page-grid {
  width: 100%;
}

.detail-page-main {
  min-width: 0;
}


/* ---------------------------------------------------------
   LARGE DESKTOP
   --------------------------------------------------------- */

@media (min-width: 1280px) {

  .detail-page-grid.has-community {
    display: grid;

    grid-template-columns:
      minmax(0, 1fr)
      clamp(
        440px,
        28vw,
        540px
      );

    column-gap:
      clamp(
        28px,
        2.5vw,
        46px
      );

    align-items: start;
  }


  /*
   * Move the area Jonas circled toward the left.
   *
   * Previously max-width + auto margins + 6vw padding
   * consumed a lot of useful horizontal space.
   */
  .detail-page-main
  .detail-content {
    max-width: none;
    margin: 0;

    padding-left:
      clamp(
        34px,
        3vw,
        58px
      );

    padding-right: 10px;

    /*
     * Seasons now starts almost immediately after
     * the hero instead of after the Community height.
     */
    padding-bottom: 20px;
  }


  .detail-page-main
  .detail-extra {
    max-width: none;
    margin: 0;

    padding-left:
      clamp(
        34px,
        3vw,
        58px
      );

    padding-right: 10px;
    padding-bottom: 90px;
  }


  /*
   * Poster + title/overview have more usable room too.
   */
  .detail-page-main
  .detail-layout {
    grid-template-columns:
      minmax(190px, 235px)
      minmax(0, 820px);

    gap:
      clamp(
        26px,
        2.4vw,
        42px
      );

    align-items: start;
  }


  /*
   * Right column.
   *
   * It no longer participates in the height of the
   * Seasons/Cast column.
   */
  .detail-community-hero {
    min-width: 0;

    padding-top:
      clamp(
        108px,
        8vw,
        138px
      );

    padding-right:
      clamp(
        28px,
        3vw,
        52px
      );

    padding-bottom: 50px;

    position: sticky;
    top: 0;

    align-self: start;
  }


  .detail-community-hero
  .community-side-card {
    width: 100%;
    max-width: none;
  }

}


/* ---------------------------------------------------------
   COMMUNITY COMMENT WIDTH
   --------------------------------------------------------- */

/*
 * Widening the panel fixes most of the deformation,
 * but also explicitly give review text a sensible layout.
 */
.endcore-community-side
.community-review-item {
  display: grid;

  grid-template-columns:
    42px
    minmax(0, 1fr);

  gap: 13px;

  align-items: start;

  padding: 14px;
}


.endcore-community-side
.community-review-avatar {
  width: 42px;
  height: 42px;
}


.endcore-community-side
.community-review-copy {
  min-width: 0;
}


.endcore-community-side
.community-review-topline {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 12px;
}


.endcore-community-side
.community-review-identity {
  min-width: 0;
}


.endcore-community-side
.community-review-name-row {
  min-width: 0;
}


.endcore-community-side
.community-review-copy p {
  width: 100%;

  margin:
    9px
    0
    0;

  text-align: left;

  line-height: 1.48;

  overflow-wrap: break-word;
  word-break: normal;
}


/*
 * Prevent rating/date from crushing the comment text.
 */
.endcore-community-side
.community-review-rating {
  flex: 0 0 auto;
}


/* ---------------------------------------------------------
   SEASONS + CAST
   --------------------------------------------------------- */

/*
 * They now belong entirely to the left column.
 */
.detail-page-main
.series-library-shell {
  margin-top: 28px;
}


.detail-page-main
.people-section,
.detail-page-main
.cast-section {
  margin-top: 42px;
}


/* ---------------------------------------------------------
   MEDIUM SCREENS
   --------------------------------------------------------- */

@media (
  min-width: 860px
)
and (
  max-width: 1279px
) {

  .detail-page-grid.has-community {
    display: block;
  }


  .detail-page-main
  .detail-content,
  .detail-page-main
  .detail-extra {
    max-width: none;

    margin: 0;

    padding-left:
      clamp(
        28px,
        4vw,
        54px
      );

    padding-right:
      clamp(
        28px,
        4vw,
        54px
      );
  }


  .detail-community-hero {
    padding:
      20px
      clamp(
        28px,
        4vw,
        54px
      )
      60px;
  }


  .detail-community-hero
  .community-side-card {
    max-width: 760px;
  }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 859px) {

  .detail-page-grid.has-community {
    display: block;
  }


  .detail-community-hero {
    padding:
      16px
      20px
      50px;
  }


  .detail-community-hero
  .community-side-card {
    width: 100%;
  }

}/* =========================================================
   ENDCORE COMMUNITY WIDTH + FULL CAST V5
   ========================================================= */


/* ---------------------------------------------------------
   COMMUNITY WIDTH
   --------------------------------------------------------- */

/*
 * Give comments enough horizontal room to read naturally.
 */
@media (min-width: 1500px) {

  .detail-page-grid.has-community {
    grid-template-columns:
      minmax(0, 1fr)
      clamp(
        500px,
        31vw,
        620px
      );

    column-gap:
      clamp(
        24px,
        2vw,
        38px
      );
  }

}


@media (
  min-width: 1280px
)
and (
  max-width: 1499px
) {

  .detail-page-grid.has-community {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(
        440px,
        500px
      );

    column-gap: 26px;
  }

}


/* ---------------------------------------------------------
   COMMUNITY REVIEW CARDS
   --------------------------------------------------------- */

.detail-community-hero
.community-side-card {
  padding: 24px;
}


.detail-community-hero
.community-review-item {
  grid-template-columns:
    44px
    minmax(0, 1fr);

  gap: 14px;

  padding:
    16px
    17px;
}


.detail-community-hero
.community-review-copy {
  min-width: 0;
  width: 100%;
}


.detail-community-hero
.community-review-topline {
  width: 100%;

  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 16px;
}


.detail-community-hero
.community-review-copy p {
  display: block;

  width: 100%;
  max-width: none;

  margin:
    10px
    0
    0;

  padding: 0;

  color:
    rgba(
      226,
      237,
      250,
      .86
    );

  text-align: left;

  line-height: 1.55;

  overflow-wrap: anywhere;
}


.detail-community-hero
.community-review-rating {
  flex: 0 0 auto;
}


/* ---------------------------------------------------------
   CAST RETURNS TO FULL WIDTH
   --------------------------------------------------------- */

.detail-cast-fullwidth {
  position: relative;

  z-index: 2;

  width: 100%;

  max-width: 1680px;

  margin:
    0
    auto;

  padding:
    0
    clamp(
      34px,
      3vw,
      58px
    )
    90px;
}


.detail-cast-fullwidth
.detail-section {
  margin-top: 42px;
}


/*
 * Let the cast rail use the complete Details width.
 */
.detail-cast-fullwidth
.people-rail,
.detail-cast-fullwidth
.cast-rail,
.detail-cast-fullwidth
.credits-rail {
  width: 100%;
  max-width: none;
}


/* ---------------------------------------------------------
   SERIES
   --------------------------------------------------------- */

/*
 * Seasons remains in the left column while Community
 * occupies the right. This is the only section constrained
 * by the Community card.
 */
.detail-page-main
.series-library-shell {
  width: 100%;
}


/* ---------------------------------------------------------
   TABLET / MOBILE
   --------------------------------------------------------- */

@media (max-width: 1279px) {

  .detail-cast-fullwidth {
    padding:
      0
      clamp(
        28px,
        4vw,
        54px
      )
      70px;
  }

}


@media (max-width: 720px) {

  .detail-cast-fullwidth {
    padding:
      0
      20px
      55px;
  }

}
/* =========================================================
   ENDCORE COMMUNITY INDEPENDENT RAIL V6
   ========================================================= */

/*
 * Desktop architecture:
 *
 * Community is visually attached to Details but does NOT
 * determine the height of the left content column.
 *
 * Therefore:
 *   Hero -> Seasons -> Cast
 * flows naturally on the left.
 *
 * Community can grow horizontally without pushing Cast down.
 */
@media (min-width: 1380px) {

  .detail-page-grid.has-community {
    display: block;

    position: relative;

    width: 100%;

    /*
     * Override the previous V4/V5 grid.
     */
    grid-template-columns: none;
    column-gap: 0;
  }


  /*
   * Reserve horizontal room for Community only in
   * Hero + Seasons.
   */
  .detail-page-grid.has-community
  .detail-page-main {
    width:
      calc(
        100% -
        clamp(
          590px,
          38vw,
          690px
        )
      );

    min-width: 0;
  }


  /*
   * Community is removed from normal vertical flow.
   *
   * Its RIGHT edge stays where it already looks good.
   * Increasing width therefore makes it grow LEFTWARD.
   */
  .detail-page-grid.has-community
  .detail-community-hero {
    position: absolute;

    top:
      clamp(
        70px,
        5vw,
        92px
      );

    right:
      clamp(
        22px,
        2vw,
        38px
      );

    width:
      clamp(
        560px,
        36vw,
        660px
      );

    min-width: 0;

    padding: 0;

    z-index: 4;

    align-self: auto;
  }


  /*
   * Kill sticky behavior inherited from V4/V5.
   */
  .detail-page-grid.has-community
  .detail-community-hero {
    position: absolute;
  }


  /*
   * The left block Jonas marked should stay close
   * to the left edge instead of being centered.
   */
  .detail-page-grid.has-community
  .detail-content {
    max-width: none;

    margin: 0;

    padding-left:
      clamp(
        20px,
        1.8vw,
        34px
      );

    padding-right:
      clamp(
        18px,
        1.5vw,
        28px
      );

    padding-bottom: 16px;
  }


  .detail-page-grid.has-community
  .detail-extra {
    max-width: none;

    margin: 0;

    padding-left:
      clamp(
        20px,
        1.8vw,
        34px
      );

    padding-right:
      clamp(
        18px,
        1.5vw,
        28px
      );

    padding-bottom: 22px;
  }


  /*
   * Poster + metadata remain comfortable even after
   * giving Community more room.
   */
  .detail-page-grid.has-community
  .detail-layout {
    grid-template-columns:
      minmax(175px, 220px)
      minmax(0, 1fr);

    gap:
      clamp(
        24px,
        2vw,
        34px
      );
  }


  /*
   * The little "1 season" counter is redundant here
   * and visually competes with Community.
   */
  .detail-page-grid.has-community
  .series-season-count {
    display: none;
  }


  /*
   * Seasons may use only the available left column.
   * This is intentionally the only content constrained
   * horizontally by Community.
   */
  .detail-page-grid.has-community
  .series-library-shell {
    width: 100%;

    margin-top: 26px;
  }


  /* =======================================================
     CAST & CREW
     ======================================================= */

  /*
   * Cast exists OUTSIDE detail-page-grid after V5.
   *
   * Because Community is now absolute, the grid height is
   * determined only by Hero + Seasons.
   *
   * So Cast appears immediately after Seasons.
   */
  .detail-cast-fullwidth {
    width: 100%;

    max-width: none;

    margin: 0;

    padding:
      0
      clamp(
        20px,
        1.8vw,
        34px
      )
      90px;

    position: relative;

    z-index: 2;
  }


  .detail-cast-fullwidth
  .detail-section {
    margin-top: 34px;
  }


  /*
   * Do not artificially constrain the people rail.
   */
  .detail-cast-fullwidth
  .people-section,
  .detail-cast-fullwidth
  .people-rail,
  .detail-cast-fullwidth
  .credits-rail,
  .detail-cast-fullwidth
  .cast-rail {
    width: 100%;
    max-width: none;
  }


  /* =======================================================
     COMMUNITY WIDTH / COMMENT COMPOSITION
     ======================================================= */

  .detail-community-hero
  .community-side-card {
    width: 100%;

    max-width: none;

    padding: 22px;

    gap: 14px;

    border-radius: 26px;
  }


  /*
   * Wider score header.
   */
  .detail-community-hero
  .community-side-hero {
    grid-template-columns:
      minmax(150px, auto)
      minmax(0, 1fr);

    align-items: center;

    gap: 20px;

    padding: 17px 19px;
  }


  /*
   * Comments become normal horizontal text cards rather
   * than tall narrow blocks.
   */
  .detail-community-hero
  .community-review-item {
    display: grid;

    grid-template-columns:
      44px
      minmax(0, 1fr);

    gap: 14px;

    padding:
      14px
      16px;
  }


  .detail-community-hero
  .community-review-copy {
    width: 100%;
    min-width: 0;
  }


  .detail-community-hero
  .community-review-topline {
    width: 100%;

    display: flex;

    align-items: flex-start;

    justify-content:
      space-between;

    gap: 18px;
  }


  .detail-community-hero
  .community-review-identity {
    min-width: 0;
  }


  .detail-community-hero
  .community-review-copy p {
    width: 100%;

    max-width: none;

    margin:
      8px
      0
      0;

    padding: 0;

    text-align: left;

    line-height: 1.5;

    overflow-wrap:
      break-word;

    word-break:
      normal;
  }


  .detail-community-hero
  .community-review-rating {
    flex: 0 0 auto;
  }


  /*
   * Don't waste vertical space between Community blocks.
   */
  .detail-community-hero
  .community-personal-summary {
    padding:
      13px
      16px;
  }


  .detail-community-hero
  .community-feed-card.compact {
    margin-top: 0;
  }


  .detail-community-hero
  .community-review-list {
    gap: 10px;
  }

}


/* =========================================================
   VERY WIDE DESKTOP
   ========================================================= */

@media (min-width: 1800px) {

  .detail-page-grid.has-community
  .detail-page-main {
    width:
      calc(
        100% - 720px
      );
  }


  .detail-page-grid.has-community
  .detail-community-hero {
    width: 680px;

    right: 36px;
  }

}


/* =========================================================
   BELOW DESKTOP
   ========================================================= */

/*
 * Below 1380px we intentionally keep the safer stacked
 * responsive behavior from V4/V5.
 */
@media (max-width: 1379px) {

  .detail-page-grid.has-community
  .series-season-count {
    display: inline-flex;
  }

}



/* =========================================================
   ENDCORE COMMUNITY COMPACT + EXPANDED V7
   ========================================================= */


/* ---------------------------------------------------------
   CAST CLEARANCE
   --------------------------------------------------------- */

/*
 * JS measures the real compact Community card.
 *
 * Cast starts after whichever is taller:
 * the normal left content OR the Community compact card.
 */
@media (min-width: 1380px) {

  .detail-page-grid.has-community {
    min-height:
      max(
        540px,
        var(
          --community-compact-clearance,
          540px
        )
      );
  }


  /*
   * Keep the cast rail comfortably separated without
   * sending it downstairs.
   */
  .detail-cast-fullwidth
  .detail-section {
    margin-top: 38px;
  }

}


/* ---------------------------------------------------------
   REMOVE OBSOLETE REVIEW HEADING
   --------------------------------------------------------- */

.endcore-community-side
.community-feed-heading {
  display: none !important;
}


/*
 * With the duplicated heading gone, comments can begin
 * almost immediately.
 */
.endcore-community-side
.community-feed-card.compact {
  padding-top: 8px;
}


/* ---------------------------------------------------------
   COMPACT COMMENT WINDOW
   --------------------------------------------------------- */

/*
 * No fixed "six reviews" rule anymore.
 *
 * The window is height based. Reviews continue naturally
 * until they run out of the designed compact space.
 */
.detail-community-hero:not(
  .is-community-expanded
)
.community-review-list {
  max-height: 275px !important;

  overflow: hidden !important;
}


/*
 * Cancel the old nth-child rule from V3.
 * Every review participates in scrollHeight measurement.
 */
.detail-community-hero
.community-review-list:not(
  .is-expanded
)
.community-review-item:nth-child(
  n + 7
) {
  display: grid !important;
}


/* ---------------------------------------------------------
   VIEW ALL
   --------------------------------------------------------- */

.community-expand-comments[hidden] {
  display: none !important;
}


.detail-community-hero
.community-expand-comments {
  margin-top: 12px;
}


/* ---------------------------------------------------------
   EXPANDED COMMUNITY
   --------------------------------------------------------- */

/*
 * When View all is pressed the card becomes a dedicated
 * floating reading panel.
 *
 * It does NOT change document flow.
 * Therefore it cannot push Seasons or Cast.
 */
@media (min-width: 1000px) {

  .detail-community-hero
  .community-side-card {
    transition:
      width 180ms ease,
      box-shadow 180ms ease,
      transform 180ms ease;
  }


  .detail-community-hero.is-community-expanded {
    position: fixed !important;

    top: 5vh !important;
    right: 4vw !important;

    width:
      min(
        780px,
        90vw
      ) !important;

    max-height: 90vh;

    padding: 0 !important;

    z-index: 1000 !important;
  }

}
@media (min-width: 1000px) {

  .detail-community-hero.is-community-expanded
  .community-side-card {
    width: 100%;

    max-width: none;

    max-height: 90vh;

    overflow: hidden;

    box-shadow:
      0
      35px
      110px
      rgba(
        0,
        0,
        0,
        .72
      ),
      0
      0
      0
      1px
      rgba(
        89,
        174,
        255,
        .28
      );
  }


  .detail-community-hero.is-community-expanded
  .community-review-list {
    max-height:
      calc(
        90vh - 350px
      ) !important;

    overflow-y:
      auto !important;

    overflow-x:
      hidden !important;

    padding-right: 7px;
  }


  .detail-community-hero.is-community-expanded
  .community-review-item {
    padding:
      16px
      18px;
  }


  .detail-community-hero.is-community-expanded
  .community-review-copy p {
    font-size: 14px;

    line-height: 1.6;
  }

}


/* ---------------------------------------------------------
   MOBILE / TABLET EXPANSION
   --------------------------------------------------------- */

@media (max-width: 999px) {

  .detail-community-hero.is-community-expanded
  .community-review-list {
    max-height: 65vh !important;

    overflow-y:
      auto !important;
  }

}

/* =========================================================
   ENDCORE_SEASON_LANDSCAPE_RAIL_V1
   ========================================================= */

/*
 * The Season browser is intentionally content-focused.
 * Community belongs to Series and Episode Details.
 */
.detail-view.is-season-view
.detail-page-grid.has-community {
  grid-template-columns:
    minmax(0, 1fr);
}

.detail-view.is-season-view
.detail-page-main {
  width: 100%;
  max-width: none;
}

.detail-view.is-season-view
.endcore-community-side,
.detail-view.is-season-view
.detail-community-hero,
.detail-view.is-season-view
.credits-section {
  display: none !important;
}


/*
 * Horizontal cinematic Episode rail.
 */
.season-episode-list {
  display: flex;

  gap: 18px;

  width: 100%;

  overflow-x: auto;
  overflow-y: hidden;

  padding:
    4px
    2px
    20px;

  scroll-snap-type:
    x proximity;

  scrollbar-width:
    thin;
}


.season-episode-item,
.season-episode-item:first-child {
  flex:
    0
    0
    clamp(
      330px,
      30vw,
      420px
    );

  display: flex;

  flex-direction:
    column;

  align-items:
    stretch;

  gap: 0;

  overflow: hidden;

  padding:
    0
    0
    15px;

  border:
    1px solid
    rgba(91, 159, 234, .16);

  border-radius:
    14px;

  background:
    rgba(7, 19, 33, .62);

  color: inherit;

  text-align: left;

  scroll-snap-align:
    start;

  box-shadow:
    0 13px 32px
    rgba(0, 0, 0, .20);

  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}


.season-episode-item:hover {
  transform:
    translateY(-3px);

  border-color:
    rgba(91, 176, 255, .36);

  background:
    rgba(15, 39, 68, .76);

  box-shadow:
    0 18px 40px
    rgba(0, 0, 0, .28);
}


.season-episode-item:focus-visible {
  outline:
    2px solid
    rgba(85, 177, 255, .72);

  outline-offset:
    3px;
}


.season-episode-preview {
  width: 100%;

  aspect-ratio:
    16 / 9;

  border-radius:
    0;

  box-shadow:
    none;
}


.season-episode-item:hover
.season-episode-preview img {
  transform:
    scale(1.035);
}


.season-episode-copy {
  min-width: 0;

  min-height:
    160px;

  padding:
    14px
    15px
    3px;
}


.season-episode-number {
  font-size:
    9px;
}


.season-episode-copy h3 {
  margin:
    5px
    0
    0;

  font-size:
    17px;

  line-height:
    1.25;
}


.season-episode-meta {
  margin-top:
    8px;
}


.season-episode-copy p {
  display:
    -webkit-box;

  max-width:
    none;

  overflow:
    hidden;

  margin:
    10px
    0
    0;

  font-size:
    10px;

  line-height:
    1.52;

  -webkit-line-clamp:
    3;

  -webkit-box-orient:
    vertical;
}


@media (max-width: 900px) {

  .season-episode-item,
  .season-episode-item:first-child {
    flex-basis:
      min(
        370px,
        74vw
      );
  }
}


@media (max-width: 620px) {

  .season-episode-item,
  .season-episode-item:first-child {
    flex-basis:
      86vw;
  }

  .season-episode-copy {
    min-height:
      145px;
  }
}

/* =========================================================
   ENDCORE_COMMUNITY_REVIEW_COMMENT_V1
   Base styling for the independent review-comment node.
   ========================================================= */

.community-review-comment {
  display: block;

  width: 100%;
  min-width: 0;
  max-width: none;

  margin: 9px 0 0;
  padding: 0;

  color:
    rgba(203, 220, 237, .76);

  font-size: 15px;

  line-height: 1.62;

  text-align: left;
  text-indent: 0;

  white-space: pre-line;

  overflow-wrap: break-word;
  word-break: normal;
}

@media (min-width: 1600px) {
  .community-review-comment {
    font-size: 16px;
  }
}


/* =========================================================
   ENDCORE_VIDEO_CINEMATIC_DETAILS_STYLE_V1

   Video / Other uses its own frame as a cinematic hero.
   Movie / Series Details remain untouched.
   ========================================================= */

.detail-page-main.endcore-video-cinematic-details {
  position: relative;

  min-height:
    clamp(540px, 72vh, 820px);

  overflow: hidden;

  isolation: isolate;

  background:
    #030914;
}


/*
 * Actual video frame.
 */
.detail-page-main.endcore-video-cinematic-details::before {
  content: "";

  position: absolute;

  z-index: -3;

  inset: 0;

  background-image:
    var(
      --endcore-video-detail-bg,
      none
    );

  background-size:
    cover;

  background-position:
    center center;

  background-repeat:
    no-repeat;

  transform:
    scale(1.025);

  opacity:
    .78;
}


/*
 * Readability layer:
 *
 * strong on the left where title/actions live,
 * lighter toward the image focal area.
 */
.detail-page-main.endcore-video-cinematic-details::after {
  content: "";

  position: absolute;

  z-index: -2;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(2, 7, 18, .97) 0%,
      rgba(2, 7, 18, .88) 30%,
      rgba(2, 7, 18, .58) 58%,
      rgba(2, 7, 18, .32) 78%,
      rgba(2, 7, 18, .52) 100%
    ),
    linear-gradient(
      0deg,
      rgba(2, 7, 18, .94) 0%,
      rgba(2, 7, 18, .28) 48%,
      rgba(2, 7, 18, .44) 100%
    );
}


/*
 * Keep every real Details element above artwork.
 */
.detail-page-main.endcore-video-cinematic-details
> * {
  position: relative;

  z-index: 1;
}


/*
 * The normal Detail layout is:
 *
 *   portrait | information
 *
 * Video removes that portrait column.
 */
.endcore-video-cinematic-details
.endcore-video-cinematic-layout {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr) !important;

  width:
    100%;

  max-width:
    1080px;

  gap:
    0 !important;
}


/*
 * The first direct child is the normal poster/artwork
 * column. It is deliberately absent for native Video.
 */
.endcore-video-cinematic-details
.endcore-video-cinematic-layout
> :first-child {
  display:
    none !important;
}


/*
 * Also cover known artwork class names so this remains
 * resilient if the internal Detail markup is refined.
 */
.endcore-video-cinematic-details
:is(
  .detail-poster,
  .detail-poster-wrap,
  .detail-poster-column,
  .detail-artwork,
  .detail-artwork-column
) {
  display:
    none !important;
}


/*
 * Video titles should not dominate the entire viewport.
 */
.endcore-video-cinematic-details
:is(
  .detail-title,
  .detail-layout h1,
  .detail-content h1
) {
  max-width:
    min(900px, 18ch);

  margin-bottom:
    14px;

  font-size:
    clamp(
      34px,
      4vw,
      62px
    ) !important;

  line-height:
    1.02 !important;

  letter-spacing:
    -.035em;

  text-wrap:
    balance;
}


/*
 * Compact metadata/actions against the hero.
 */
.endcore-video-cinematic-details
.detail-meta {
  max-width:
    760px;
}


.endcore-video-cinematic-details
.detail-actions {
  margin-top:
    20px;

  gap:
    11px;
}


.endcore-video-cinematic-details
.detail-action {
  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);
}


/*
 * Prevent editorial poster/backdrop areas below the hero
 * from creating unnecessary empty geometry for Video.
 */
.endcore-video-cinematic-details
.detail-extra {
  background:
    linear-gradient(
      180deg,
      rgba(3, 9, 20, .36),
      rgba(3, 9, 20, .92)
    );
}


@media (max-width: 760px) {

  .detail-page-main.endcore-video-cinematic-details {
    min-height:
      620px;
  }


  .detail-page-main.endcore-video-cinematic-details::after {
    background:
      linear-gradient(
        0deg,
        rgba(2, 7, 18, .98) 0%,
        rgba(2, 7, 18, .72) 58%,
        rgba(2, 7, 18, .38) 100%
      );
  }


  .endcore-video-cinematic-details
  :is(
    .detail-title,
    .detail-layout h1,
    .detail-content h1
  ) {
    max-width:
      100%;

    font-size:
      clamp(
        30px,
        9vw,
        46px
      ) !important;
  }
}


/* =========================================================
   ENDCORE_VIDEO_CINEMATIC_ROOT_STYLE_V2

   Root-scoped Video Details.
   Does not depend on JS finding rendered descendants.
   ========================================================= */

#viewRoot.endcore-video-details-view
.detail-page-main {
  position: relative;

  isolation: isolate;

  min-height:
    clamp(560px, 76vh, 860px);

  overflow: hidden;

  background:
    #020814;
}


#viewRoot.endcore-video-details-view
.detail-page-main::before {
  content: "";

  position: absolute;

  z-index: -3;

  inset: 0;

  background-image:
    var(
      --endcore-video-detail-bg,
      none
    );

  background-repeat:
    no-repeat;

  background-position:
    center center;

  background-size:
    cover;

  transform:
    scale(1.02);

  opacity:
    .86;
}


#viewRoot.endcore-video-details-view
.detail-page-main::after {
  content: "";

  position: absolute;

  z-index: -2;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(2, 8, 20, .96) 0%,
      rgba(2, 8, 20, .88) 27%,
      rgba(2, 8, 20, .60) 51%,
      rgba(2, 8, 20, .30) 75%,
      rgba(2, 8, 20, .42) 100%
    ),
    linear-gradient(
      0deg,
      rgba(2, 8, 20, .96) 0%,
      rgba(2, 8, 20, .22) 56%,
      rgba(2, 8, 20, .38) 100%
    );
}


#viewRoot.endcore-video-details-view
.detail-page-main
> * {
  position: relative;

  z-index: 1;
}


/*
 * Kill the movie poster geometry completely.
 */
#viewRoot.endcore-video-details-view
.detail-layout {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr) !important;

  gap:
    0 !important;

  width:
    100%;

  max-width:
    1080px;
}


#viewRoot.endcore-video-details-view
.detail-layout
> :first-child {
  display:
    none !important;
}


#viewRoot.endcore-video-details-view
:is(
  .detail-poster,
  .detail-poster-wrap,
  .detail-poster-column,
  .detail-artwork,
  .detail-artwork-column
) {
  display:
    none !important;
}


/*
 * Video title: deliberately calmer than Movie Details.
 */
#viewRoot.endcore-video-details-view
:is(
  .detail-title,
  .detail-content h1,
  .detail-layout h1
) {
  width:
    auto !important;

  max-width:
    min(
      840px,
      19ch
    ) !important;

  margin-bottom:
    12px !important;

  font-size:
    clamp(
      32px,
      3vw,
      50px
    ) !important;

  line-height:
    1.04 !important;

  letter-spacing:
    -.025em !important;

  text-wrap:
    balance;
}


#viewRoot.endcore-video-details-view
.detail-meta {
  max-width:
    720px;
}


#viewRoot.endcore-video-details-view
.detail-actions {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    10px;

  max-width:
    950px;

  margin-top:
    18px;
}


#viewRoot.endcore-video-details-view
.detail-action {
  backdrop-filter:
    blur(15px);

  -webkit-backdrop-filter:
    blur(15px);
}


@media (max-width: 760px) {

  #viewRoot.endcore-video-details-view
  .detail-page-main {
    min-height:
      640px;
  }


  #viewRoot.endcore-video-details-view
  .detail-page-main::after {
    background:
      linear-gradient(
        0deg,
        rgba(2, 8, 20, .98) 0%,
        rgba(2, 8, 20, .72) 58%,
        rgba(2, 8, 20, .32) 100%
      );
  }


  #viewRoot.endcore-video-details-view
  :is(
    .detail-title,
    .detail-content h1,
    .detail-layout h1
  ) {
    max-width:
      100% !important;

    font-size:
      clamp(
        28px,
        8vw,
        42px
      ) !important;
  }
}


/* =========================================================
   ENDCORE_VIDEO_CINEMATIC_VISUAL_FIX_V3

   V2 correctly removed the poster but its negative pseudo
   element z-index placed the artwork behind the host surface.

   V3:
   - makes the still visible
   - keeps overlay above artwork
   - keeps real content above both
   - gives long Video titles useful horizontal space
   ========================================================= */

#viewRoot.endcore-video-details-view
.detail-page-main {
  position:
    relative !important;

  isolation:
    isolate;

  overflow:
    hidden;

  background:
    #020713;
}


/* Actual video still */
#viewRoot.endcore-video-details-view
.detail-page-main::before {
  z-index:
    0 !important;

  opacity:
    .88 !important;

  transform:
    scale(1.015);

  background-position:
    center center !important;

  background-size:
    cover !important;
}


/* Cinematic readability overlay */
#viewRoot.endcore-video-details-view
.detail-page-main::after {
  z-index:
    1 !important;

  background:
    linear-gradient(
      90deg,
      rgba(2, 7, 18, .94) 0%,
      rgba(2, 7, 18, .80) 27%,
      rgba(2, 7, 18, .48) 52%,
      rgba(2, 7, 18, .18) 76%,
      rgba(2, 7, 18, .30) 100%
    ),
    linear-gradient(
      0deg,
      rgba(2, 7, 18, .88) 0%,
      rgba(2, 7, 18, .12) 55%,
      rgba(2, 7, 18, .32) 100%
    )
    !important;
}


/* Real Details UI */
#viewRoot.endcore-video-details-view
.detail-page-main
> * {
  position:
    relative;

  z-index:
    2 !important;
}


/*
 * Long file-oriented Video titles need width, not movie-scale
 * typography constrained to a few characters.
 */
#viewRoot.endcore-video-details-view
:is(
  .detail-title,
  .detail-content h1,
  .detail-layout h1
) {
  width:
    auto !important;

  max-width:
    min(
      1050px,
      34ch
    ) !important;

  font-size:
    clamp(
      30px,
      2.6vw,
      46px
    ) !important;

  line-height:
    1.05 !important;

  letter-spacing:
    -.025em !important;

  text-wrap:
    pretty;
}


/*
 * Keep content comfortably readable without turning it into
 * a narrow left-hand column.
 */
#viewRoot.endcore-video-details-view
.detail-layout {
  width:
    100% !important;

  max-width:
    1180px !important;
}


#viewRoot.endcore-video-details-view
.detail-meta,
#viewRoot.endcore-video-details-view
.detail-actions {
  max-width:
    1080px !important;
}


/* =========================================================
   ENDCORE_VIDEO_REAL_BACKGROUND_STYLE_V4

   Native Video Details now uses an actual IMG layer.
   ========================================================= */

#viewRoot.endcore-video-details-view
.detail-page-main
> .endcore-video-detail-background-image {
  position:
    absolute !important;

  z-index:
    0 !important;

  inset:
    0 !important;

  width:
    100% !important;

  height:
    100% !important;

  display:
    block !important;

  object-fit:
    cover !important;

  object-position:
    center 42% !important;

  opacity:
    .92 !important;

  pointer-events:
    none !important;

  user-select:
    none;

  transform:
    scale(1.012);
}


/*
 * V1-V3 pseudo artwork is no longer needed.
 * Leave only the real IMG as artwork owner.
 */
#viewRoot.endcore-video-details-view
.detail-page-main::before {
  background-image:
    none !important;

  opacity:
    0 !important;
}


/*
 * Readability overlay stays immediately above artwork.
 */
#viewRoot.endcore-video-details-view
.detail-page-main::after {
  z-index:
    1 !important;

  background:
    linear-gradient(
      90deg,
      rgba(2, 7, 18, .92) 0%,
      rgba(2, 7, 18, .77) 28%,
      rgba(2, 7, 18, .45) 53%,
      rgba(2, 7, 18, .14) 78%,
      rgba(2, 7, 18, .25) 100%
    ),
    linear-gradient(
      0deg,
      rgba(2, 7, 18, .86) 0%,
      rgba(2, 7, 18, .10) 58%,
      rgba(2, 7, 18, .28) 100%
    )
    !important;
}


/*
 * Everything except the background image remains above
 * artwork and overlay.
 */
#viewRoot.endcore-video-details-view
.detail-page-main
> :not(.endcore-video-detail-background-image) {
  position:
    relative;

  z-index:
    2 !important;
}


/* =========================================================
   ENDCORE_VIDEO_HERO_FINE_POLISH_V6
   ========================================================= */

/*
 * Show the real preview at its natural crop.
 * No artificial zoom.
 */
#viewRoot.endcore-video-details-view
.detail-page-main
> .endcore-video-detail-background-image {
  transform:
    none !important;

  opacity:
    1 !important;

  object-position:
    center center !important;
}


/*
 * Global overlay is intentionally subtle now.
 * Darkness belongs around the copy, not across the artwork.
 */
#viewRoot.endcore-video-details-view
.detail-page-main::after {
  background:
    linear-gradient(
      90deg,
      rgba(2, 7, 18, .34) 0%,
      rgba(2, 7, 18, .16) 34%,
      rgba(2, 7, 18, .04) 70%,
      rgba(2, 7, 18, .02) 100%
    ),
    linear-gradient(
      0deg,
      rgba(2, 7, 18, .42) 0%,
      rgba(2, 7, 18, .05) 44%,
      rgba(2, 7, 18, .18) 100%
    )
    !important;
}


/*
 * Local readability field around title / metadata / actions.
 * It deliberately dissolves into the artwork rather than
 * appearing as a rectangular panel.
 */
#viewRoot.endcore-video-details-view
.detail-layout {
  position:
    relative;

  box-sizing:
    border-box;

  padding:
    25px 42px 30px 32px !important;

  margin-left:
    -32px;

  border-radius:
    26px;

  background:
    linear-gradient(
      90deg,
      rgba(2, 7, 18, .76) 0%,
      rgba(2, 7, 18, .60) 42%,
      rgba(2, 7, 18, .25) 72%,
      rgba(2, 7, 18, 0) 100%
    );

  backdrop-filter:
    blur(2px);

  -webkit-backdrop-filter:
    blur(2px);
}


/*
 * More restrained title scale.
 */
#viewRoot.endcore-video-details-view
:is(
  .detail-title,
  .detail-content h1,
  .detail-layout h1
) {
  max-width:
    min(900px, 32ch)
    !important;

  font-size:
    clamp(
      30px,
      2.35vw,
      43px
    )
    !important;

  line-height:
    1.055
    !important;
}


/* =========================================================
   ENDCORE_VIDEO_BACK_VISIBLE_V1
   ========================================================= */

#viewRoot.endcore-video-details-view
:is(
  .detail-back-button,
  .detail-back-link,
  .detail-page-back a,
  .detail-page-back button
) {
  display:
    inline-flex !important;

  align-items:
    center;

  gap:
    8px;

  padding:
    10px 16px;

  border-radius:
    14px;

  color:
    #dff1ff !important;

  font-weight:
    700;

  font-size:
    17px;

  line-height:
    1;

  text-decoration:
    none !important;

  background:
    linear-gradient(
      180deg,
      rgba(10, 18, 34, .70) 0%,
      rgba(10, 18, 34, .54) 100%
    );

  border:
    1px solid rgba(93, 170, 255, .28);

  box-shadow:
    0 10px 26px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255,255,255,.04);

  text-shadow:
    0 0 12px rgba(115, 194, 255, .22);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);

  opacity:
    1 !important;

  transition:
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease,
    color .18s ease;
}

#viewRoot.endcore-video-details-view
:is(
  .detail-back-button,
  .detail-back-link,
  .detail-page-back a,
  .detail-page-back button
):hover {
  color:
    #ffffff !important;

  background:
    linear-gradient(
      180deg,
      rgba(18, 32, 58, .88) 0%,
      rgba(12, 24, 46, .74) 100%
    );

  border-color:
    rgba(110, 196, 255, .46);

  box-shadow:
    0 12px 30px rgba(0, 0, 0, .26),
    0 0 0 1px rgba(92, 181, 255, .12) inset,
    0 0 18px rgba(60, 145, 255, .16);

  transform:
    translateY(-1px);
}

#viewRoot.endcore-video-details-view
:is(
  .detail-back-button,
  .detail-back-link,
  .detail-page-back a,
  .detail-page-back button
):focus-visible {
  outline:
    2px solid rgba(132, 205, 255, .72);

  outline-offset:
    2px;
}


/* =========================================================
   ENDCORE_VIDEO_BACK_EXACT_V2
   Exact selector: #detailBackButton.detail-back
   ========================================================= */

#viewRoot.endcore-video-details-view
#detailBackButton.detail-back {
  display:
    inline-flex !important;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    42px !important;

  margin:
    0 0 28px 0 !important;

  padding:
    0 17px !important;

  border:
    1px solid rgba(111, 190, 255, .34) !important;

  border-radius:
    14px !important;

  background:
    linear-gradient(
      180deg,
      rgba(4, 12, 27, .82) 0%,
      rgba(3, 10, 24, .68) 100%
    )
    !important;

  color:
    rgba(245, 250, 255, .96) !important;

  font-size:
    16px;

  font-weight:
    700;

  line-height:
    1;

  letter-spacing:
    -.01em;

  cursor:
    pointer;

  opacity:
    1 !important;

  box-shadow:
    0 8px 24px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 0 0 1px rgba(58, 151, 255, .04);

  text-shadow:
    0 0 12px rgba(89, 179, 255, .20);

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);

  transition:
    transform 140ms ease,
    background 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
}


#viewRoot.endcore-video-details-view
#detailBackButton.detail-back:hover {
  background:
    linear-gradient(
      180deg,
      rgba(12, 31, 58, .94) 0%,
      rgba(6, 20, 42, .86) 100%
    )
    !important;

  border-color:
    rgba(111, 203, 255, .62) !important;

  color:
    #ffffff !important;

  transform:
    translateY(-1px);

  box-shadow:
    0 10px 28px rgba(0, 0, 0, .32),
    0 0 18px rgba(50, 142, 255, .18),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}


#viewRoot.endcore-video-details-view
#detailBackButton.detail-back:active {
  transform:
    translateY(0);
}


#viewRoot.endcore-video-details-view
#detailBackButton.detail-back:focus-visible {
  outline:
    2px solid rgba(117, 205, 255, .86);

  outline-offset:
    3px;
}