@charset "UTF-8";

/* ========== DESIGN SYSTEM: PROJECT.md 2.1 ========== */
:root {
  --bg-primary: #081420;
  --bg-secondary: #173651;
  --bg-tertiary: #183956;
  --bg-input: #040c14;
  --accent: #E50914;
  --accent-hover: #B0070F;
  --text-primary: #FFFFFF;
  --text-secondary: #D5D5D5;
  --text-muted: #A3A3A3;
  --text-accent: #BDBCBC;
  --rating-kp: #F60;
  --rating-imdb: #F5C518;
  --rating-inactive: #5B5B5B;
  --badge-date: #ffac00;
  --badge-reply: #b30000;
  --dot-new: #E50914;
  /* Цифра сезона на главной — мягче основного акцента, тот же красный тон */
  --season-digit: #f06b76;
  --seas-qu-gold: #f2c61c;
  --seas-qu-gold-text: #0f0f0f;
  /* Градиентная линия разделителей */
  --border-gradient: linear-gradient(270deg, rgba(250, 180, 84, 0.13) 0%, var(--accent) 11.64%, var(--accent) 47.57%, var(--accent) 89.33%, rgba(250, 180, 84, 0.13) 100%);
  /* Вертикальный ритм: см. logic/PROJECT.md §2 */
  --section-gap-y: 22px;
  --block-padding-y: 18px;
  --social-block-padding-y: 20px;
  /* Ниже этой ширины вьюпорта макет не сжимается — горизонтальный скролл (как на game-walk.ru) */
  --layout-min-width: 280px;
}

/* ========== MAIN PAGE: content-markup, season cards, series-info ========== */
.content-markup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 286px);
  grid-template-rows: max-content max-content;
  grid-template-areas: "page-title series-info" "main-content series-info";
  margin-top: 16px;
  max-width: 1200px;
  width: 100%;
}

/* Главная: узкий десктоп как game-walk (≤1000px) */
@media (min-width: 870px) and (max-width: 1000px) {
  .content-markup {
    grid-template-columns: minmax(0, 1fr) minmax(212px, 267px);
  }

  .content-markup .series-info {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .content-markup .series-info.seas-si-vert-l {
    padding-left: 20px;
  }

  .content-markup .series-info > .poster-wrap img {
    max-height: 358px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: top center;
  }

  .content-markup .series-info .quality-block {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 8px;
  }

  .content-markup .series-info .quality-heading {
    flex: 1 1 100%;
    margin-right: 0;
    text-align: center;
  }

  .content-markup .series-info .quality-badges {
    justify-content: center;
    width: 100%;
  }

  .content-markup .series-info .series-chars .param,
  .content-markup .series-info .series-chars .param-value {
    font-size: 14px;
  }
}

/* Главная «полка» ≤870px (см. конец файла: min-width:870px перебивает грид на ровно 870px и закрывает subpixel между 869 и 870) */
@media (max-width: 870px) {
  .content-markup {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "page-title"
      "series-info"
      "main-content";
    row-gap: 0;
    margin-top: 10px;
  }

  .content-markup > .page-title {
    margin-right: 0;
  }

  .content-markup .main-content {
    margin: var(--section-gap-y) 18px 0 0;
  }

  .content-markup .series-info {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin-top: 0;
    padding: 0 0 10px;
    display: grid;
    grid-template-columns: 184px 1fr 1fr;
    grid-template-rows: repeat(2, max-content) minmax(72px, auto);
    column-gap: 20px;
    row-gap: 10px;
    align-items: start;
    grid-template-areas:
      "poster-wrap series-chars series-chars"
      "poster-wrap show-rate show-rate"
      "poster-wrap device-block quality-block";
  }

  .content-markup .series-info > .poster-wrap {
    padding-bottom: 0;
    min-width: 0;
    align-self: start;
    justify-content: flex-start;
  }

  .content-markup .series-info > .poster-wrap img {
    max-height: 270px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: top center;
  }

  .content-markup .series-info > .series-chars {
    width: 100%;
    max-width: none;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 10px;
    border-top: none;
    -o-border-image: none;
    border-image: none;
    min-width: 0;
  }

  .content-markup .series-info > .show-rate {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: max-content;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    min-width: 0;
    width: 100%;
    align-items: stretch;
  }

  .content-markup .series-info > .show-rate > div:not(:last-child) {
    margin-bottom: 12px;
  }

  .content-markup .series-info > .device-block {
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    min-width: 0;
    border-top: none;
    -o-border-image: none;
    border-image: none;
  }

  .content-markup .series-info > .quality-block {
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    min-width: 0;
    border-top: none;
    -o-border-image: none;
    border-image: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  .content-markup .series-info .quality-heading {
    margin: 0;
    text-align: center;
    font-size: 14px;
  }

  .content-markup .series-info .quality-badges {
    justify-content: center;
  }

  .content-markup .series-info .quality-badge-img--hd720,
  .content-markup .series-info .quality-badge-img--hd1080 {
    height: 64px;
  }

  .content-markup .series-info .device-item img {
    width: 30px;
    height: 30px;
  }

  .content-markup .series-info .device-caption {
    font-size: 12px;
  }

  .content-markup .series-info .device-block .device-label {
    font-size: 14px;
  }

  .content-markup .series-info .show-rate .mark-scale-kp,
  .content-markup .series-info .show-rate .mark-scale-imdb {
    max-width: 100%;
  }
}

/* Главная «полка»: Кинопоиск и IMDb в одну горизонтальную строку */
@media (min-width: 681px) and (max-width: 869px) {
  .content-markup .series-info > .show-rate {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 14px;
    align-items: end;
  }

  .content-markup .series-info > .show-rate > div:not(:last-child) {
    margin-bottom: 0;
  }

  .content-markup .series-info .show-rate .mark-scale-kp,
  .content-markup .series-info .show-rate .mark-scale-imdb {
    max-width: none;
    min-width: 0;
  }
}

@media (max-width: 680px) {
  .content-markup .series-info {
    grid-template-rows: repeat(2, max-content) minmax(73px, auto);
    grid-template-areas:
      "poster-wrap series-chars series-chars"
      "poster-wrap show-rate show-rate"
      "quality-block device-block device-block";
  }

  .content-markup .series-info > .quality-block {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
    gap: 6px;
  }

  .content-markup .series-info > .device-block {
    width: 100%;
    max-width: none;
  }
}

/* Главная «полка» 561–679px: show-rate и шкалы на всю ширину ряда, правый край как у series-chars */
@media (min-width: 561px) and (max-width: 679px) {
  .content-markup .series-info > .show-rate {
    grid-column: 2 / -1;
    justify-self: stretch;
    width: 100%;
    max-width: none;
    min-width: 0;
    justify-items: stretch;
    box-sizing: border-box;
  }

  .content-markup .series-info .show-rate .mark-scale-kp,
  .content-markup .series-info .show-rate .mark-scale-imdb {
    max-width: none;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
}

@media (max-width: 520px) {
  .content-markup .series-info {
    grid-template-columns: 161px 1fr 1fr;
  }

  .content-markup .series-info > .poster-wrap img {
    max-height: 236px;
  }
}

@media (max-width: 420px) {
  .content-markup .series-info {
    column-gap: 10px;
  }
}

@media (max-width: 410px) {
  .content-markup .series-info {
    grid-template-columns: 148px 1fr 1fr;
  }

  .content-markup .series-info > .poster-wrap img {
    max-height: 217px;
  }

  .content-markup .series-info .show-rate .sc-graph {
    height: 6px;
  }
}

@media (max-width: 400px) {
  .content-markup .series-info {
    grid-template-columns: 133px 1fr 1fr;
  }

  .content-markup .series-info > .poster-wrap img {
    max-height: 195px;
  }

  .content-markup .series-info .series-chars .s-par:not(:first-child) {
    margin-top: 10px;
  }
}

.content-markup > .page-title {
  grid-area: page-title;
  margin-top: 0;
  margin-right: 18px;
  margin-bottom: 0;
  padding-bottom: 4px;
}

.content-markup > .page-title h1 {
  margin: 0;
  padding: 0;
  line-height: 1.25;
}

.content-markup .main-content {
  grid-area: main-content;
  margin: 0 18px 0 0;
  min-width: 0;
}
.content-markup .series-info {
  grid-area: series-info;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.content-markup .series-info.seas-si-vert-l {
  padding-left: 20px;
  box-sizing: border-box;
}

/* После базового padding-left:20px — иначе это правило шло ниже по файлу и перебивало max-width:869px */
@media (max-width: 869px) {
  .content-markup .series-info.seas-si-vert-l {
    padding-left: 0;
  }
}

.series-info {
  display: grid;
  grid-template-rows: repeat(5, max-content);
  grid-template-areas: "poster-wrap" "series-chars" "show-rate" "device-block" "quality-block";
  padding: 0 0 0 18px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.content-markup .series-info .vote-block {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.content-markup .series-info .vote-block .rating {
  width: min(320px, 100%);
  max-width: 100%;
  box-sizing: border-box;
}

.content-markup .series-info .show-rate .mark-scale-kp,
.content-markup .series-info .show-rate .mark-scale-imdb {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.content-markup .series-info > .poster-wrap {
  padding-bottom: 6px;
}

.content-markup .series-info .series-chars .s-par:not(:first-child) {
  margin-top: 14px;
}

.content-markup .series-info .series-chars .s-par {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 12px;
  align-items: baseline;
}

.content-markup .series-info .series-chars .param {
  min-width: 0;
  box-sizing: border-box;
  line-height: 1.45;
  font-weight: 700;
  color: var(--text-primary);
}

.content-markup .series-info .series-chars .param-value {
  min-width: 0;
  box-sizing: border-box;
  line-height: 1.45;
  text-align: right;
  font-weight: 400;
  color: var(--text-primary);
  overflow-wrap: break-word;
}

.content-markup .series-info .show-rate .mark-scale-kp {
  margin-bottom: 0;
}

@media (min-width: 870px) {
  /* Постер и текстовый блок на всю ширину колонки (не legacy 317px и не flex-end) */
  .content-markup .series-info > .poster-wrap {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    align-items: stretch;
  }

  .content-markup .series-info > .poster-wrap picture {
    display: block;
    width: 100%;
    max-width: 100%;
  }

  .content-markup .series-info > .poster-wrap img {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    object-position: top center;
    display: block;
  }

  .content-markup .series-info > .series-chars {
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    padding-top: 14px;
    padding-bottom: 12px;
    border-top: 1px solid transparent;
    -o-border-image: var(--border-gradient);
    border-image: var(--border-gradient);
    border-image-slice: 1;
    border-image-width: 1px 0 0 0;
  }

  .content-markup .series-info > .show-rate {
    margin-top: 0;
    padding-top: 14px;
    padding-bottom: 6px;
    border-top: 1px solid transparent;
    -o-border-image: var(--border-gradient);
    border-image: var(--border-gradient);
    border-image-slice: 1;
    border-image-width: 1px 0 0 0;
  }

  .content-markup .series-info .show-rate > div:not(:last-child) {
    margin-bottom: 18px;
  }

  .content-markup .series-info > .device-block {
    margin-top: 0;
    padding-top: 14px;
    padding-bottom: 12px;
    border-top: 1px solid transparent;
    -o-border-image: var(--border-gradient);
    border-image: var(--border-gradient);
    border-image-slice: 1;
    border-image-width: 1px 0 0 0;
  }

  .content-markup .series-info > .quality-block {
    margin-top: 0;
    padding-top: 12px;
    padding-bottom: 8px;
    border-top: 1px solid transparent;
    -o-border-image: var(--border-gradient);
    border-image: var(--border-gradient);
    border-image-slice: 1;
    border-image-width: 1px 0 0 0;
  }
}

.content-markup .series-info .device-block {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.content-markup .series-info .device-block .device-label {
  width: 100%;
  text-align: center;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--text-primary);
}

.content-markup .series-info .device-icons {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 12px;
  padding: 0 2px;
  list-style: none;
}

.content-markup .series-info .device-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 0 1 25%;
  min-width: 0;
  text-align: center;
}

.content-markup .series-info .device-item img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.content-markup .series-info .device-caption {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

/* Рейтинги в сайдбаре: как на референсе — лёгкий шрифт, тонкая рамка и перегородки у шкалы */
.content-markup .series-info .show-rate .mark-scale-kp,
.content-markup .series-info .show-rate .mark-scale-imdb {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  grid-template-rows: auto auto;
  grid-template-areas: "sc-title sc-mark" "sc-graph sc-graph";
  width: 100%;
  /* max-width:100% — фиксированный max ниже перебивал медиазапросы «полки» (561–869px) */
  max-width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;
  row-gap: 5px;
  column-gap: 10px;
  align-items: end;
}

.content-markup .series-info .show-rate .sc-title {
  grid-area: sc-title;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: #fff;
  min-width: 0;
}

.content-markup .series-info .show-rate .sc-mark {
  grid-area: sc-mark;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.03em;
  color: #fff;
}

.content-markup .series-info .show-rate .sc-graph {
  grid-area: sc-graph;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 7px;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 0;
  overflow: hidden;
  align-items: stretch;
}

.content-markup .series-info .show-rate .sc-graph > div {
  margin: 0 !important;
}

.content-markup .series-info .show-rate .graph-part-kp {
  flex: 1 1 0;
  min-width: 0;
  width: auto !important;
  height: 100% !important;
  min-height: 0;
  box-sizing: border-box;
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 0;
}

.content-markup .series-info .show-rate .graph-part-kp:last-child {
  border-right: none;
}

/* Блок качества: как на референсе — жирная подпись слева, крупные бейджи справа, больше воздуха до иконок */
.content-markup .series-info .quality-block {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
}

.content-markup .series-info .quality-heading {
  margin: 0 20px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.25;
  flex: 0 1 46%;
  min-width: 0;
}

.content-markup .series-info .quality-badges {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}

.content-markup .series-info .quality-badge-img {
  display: block;
  width: auto;
  height: 78px;
  max-width: 100%;
  flex-shrink: 0;
  object-fit: contain;
  object-position: center;
  vertical-align: middle;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
}

.content-markup .series-info .quality-badge-img--hd720,
.content-markup .series-info .quality-badge-img--hd1080 {
  height: 78px;
  width: auto;
}

@media (max-width: 360px) {
  .content-markup .series-info {
    grid-template-columns: 107px 1fr 1fr;
  }

  .content-markup .series-info > .poster-wrap img {
    max-height: 157px;
  }

  .content-markup .series-info .quality-block {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .content-markup .series-info .quality-heading {
    flex: 1 1 100%;
    margin-right: 0;
  }

  .content-markup .series-info .quality-badges {
    justify-content: flex-start;
    width: 100%;
  }

  .content-markup .series-info .quality-badge-img--hd720,
  .content-markup .series-info .quality-badge-img--hd1080 {
    height: 64px;
  }
}

.seasons-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 10px;
}

/* Главная, карточки сезонов: одна колонка только при ≤357px; с 358px — два столбца */
@media (max-width: 357px) {
  .seasons-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* Главная: карточка сезона целиком увеличивается; подпись по центру; цифра — голубая */
.content-markup .seasons-row {
  overflow: visible;
}

.content-markup .season-container {
  min-width: 0;
  padding: 6px 4px 10px;
  margin: -2px -2px;
  transition: transform 0.45s ease;
  transform-origin: 50% 35%;
}

.content-markup .season-container:hover {
  transform: scale(1.06);
}

.content-markup .season-name {
  margin-top: 10px;
  text-align: center;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
}

.content-markup .season-name a {
  color: var(--text-primary);
  transition: color 0.25s, filter 0.25s;
}

.content-markup .season-name a:hover {
  color: var(--text-primary);
}

.content-markup .season-name .season-num {
  color: var(--season-digit);
  font-weight: 800;
}

/* FullHD на карточках сезона: поверх hover-оверлея, Netflix/ST */
.content-markup .s-prev-wrap .seas-qu {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  pointer-events: none;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(165deg, #2a0a0c 0%, var(--accent) 42%, #7a0408 100%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 3px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 2px 10px rgba(229, 9, 20, 0.45);
}

/* Плей и затемнение при наведении на всю карточку, не только на превью */
.content-markup .s-prev-wrap:hover::after {
  content: none !important;
}

.content-markup .season-container:hover .s-prev-wrap::after {
  content: "Смотреть онлайн";
  position: absolute;
  inset: 0;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 82px;
  background: url(../img/epi-play-button.svg) center 32% no-repeat;
  background-size: 64px 64px;
  background-color: rgba(0, 0, 0, 0.5);
  color: var(--text-primary);
  font-weight: 700;
  font-size: 16px;
  pointer-events: none;
  z-index: 2;
}

.content-markup .s-prev-wrap:hover img {
  transform: none !important;
  filter: none !important;
}

.content-markup .season-container:hover .s-prev-wrap img {
  filter: brightness(0.5) !important;
}

@media (max-width: 930px) {
  .content-markup .season-name {
    font-size: 18px;
  }

  .content-markup .season-container:hover {
    transform: scale(1.04);
  }
}

.season-container {
  min-width: 0;
}

.s-prev-wrap {
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
  aspect-ratio: 410 / 231;
  background: var(--bg-input);
}

.s-prev-wrap a {
  display: block;
  width: 100%;
  height: 100%;
}

.s-prev-wrap picture {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
}

.s-prev-wrap img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.5s, filter 0.3s;
}

.s-prev-wrap:hover img {
  transform: scale(1.08);
  filter: brightness(0.5);
}

.s-prev-wrap:hover::after {
  content: "Смотреть онлайн";
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 82px;
  background: url(../img/epi-play-button.svg) center 32% no-repeat;
  background-size: 64px 64px;
  background-color: rgba(0,0,0,0.5);
  color: var(--text-primary);
  font-weight: 700;
  font-size: 16px;
  pointer-events: none;
}

.seas-qu {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--accent);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 2px;
}

.season-name {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.season-name a {
  color: inherit;
  transition: color 0.3s;
}

.season-name a:hover {
  color: var(--accent);
}

.all-seasons-title {
  height: 30px;
  display: grid;
  grid-template-columns: auto 1fr -webkit-max-content;
  grid-template-columns: auto 1fr max-content;
  margin-bottom: 10px;
}

.all-seasons-title h2 {
  margin: 0;
  padding-right: 10px;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}

.device-block {
  grid-area: device-block;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}

.device-block .device-label {
  width: 100%;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-secondary);
}

.device-block img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.lg-wrap img {
  width: auto;
  height: auto;
  max-width: 176px;
  max-height: 56px;
}

.quality-block {
  grid-area: quality-block;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 0;
}

.mark-scale-kp {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-template-rows: 1fr 13px;
  grid-template-areas: "sc-title sc-mark" "sc-graph sc-graph";
  width: 317px;
  height: 36px;
}

.mark-scale-kp .graph-part-kp {
  width: 30px;
  height: 9px;
  background: var(--rating-inactive);
}

.mark-scale-kp .gp-active-kp {
  background: var(--rating-kp);
}

/* Шкала IMDb на главной (тот же layout, другой цвет) */
.show-rate .mark-scale-imdb .gp-active-kp {
  background: var(--rating-imdb);
}

/* ========== EPISODE PAGE: content-markup-series, tabs, player, controller ========== */
.content-markup-series {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 286px);
  grid-template-rows: 28px max-content max-content auto auto auto;
  grid-template-areas:
    "bread-wrap     ep-ser-block"
    "page-title     ep-ser-block"
    "player-block   ep-ser-block"
    "main-content   ep-ser-block"
    "social-block   ep-ser-block"
    "comment-block  ep-ser-block";
  margin-top: 16px;
  max-width: 1200px;
  width: 100%;
}

.content-markup-series .bread-wrap { grid-area: bread-wrap; }
.content-markup-series .page-title { grid-area: page-title; }

.content-markup-series > .bread-wrap {
  height: auto;
  min-height: 0;
  align-self: stretch;
}

.content-markup-series > .page-title {
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 4px;
}

.content-markup-series > .page-title h1 {
  margin: 0;
  padding: 0;
  line-height: 1.25;
}
.content-markup-series .main-content {
  grid-area: main-content;
  min-width: 0;
}

/* Плеер страницы серии: единая «панель» — сегменты озвучки, видео, сегменты навигации (как на референсе, палитра сайта) */
.content-markup-series .player-block {
  grid-area: player-block;
  margin: 0 18px 16px 0;
  background: var(--bg-input);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}

.content-markup-series .player-block .tabs-video {
  display: flex;
  flex-direction: column;
}

.content-markup-series .player-block .tabs-videonav {
  margin: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: var(--bg-secondary);
}

.content-markup-series .player-block .tabs-videonav li {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  border-bottom: none;
  padding: 14px 10px;
  box-sizing: border-box;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.content-markup-series .player-block .tabs-videonav li:last-child {
  border-right: none;
}

.content-markup-series .player-block .tabs-videonav li:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.content-markup-series .player-block .tabs-videonav li.selected,
.content-markup-series .player-block .tabs-videonav li.selected:hover {
  color: var(--accent);
  font-weight: 700;
  background: rgba(229, 9, 20, 0.12);
  box-shadow: inset 0 -2px 0 0 var(--accent);
}

.content-markup-series .player-block .videobox {
  background: #000;
}

.content-markup-series .player-block .episodes-controller {
  display: flex;
  margin-top: 0;
  padding: 0;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: var(--bg-secondary);
}

.content-markup-series .player-block .episodes-controller > div {
  flex: 1;
  min-width: 0;
  padding: 14px 6px;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
}

.content-markup-series .player-block .episodes-controller > div:last-child {
  border-right: none;
}

.content-markup-series .player-block .episodes-controller a {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  display: inline-block;
  text-align: center;
}

.content-markup-series .player-block .episodes-controller a span {
  display: inline-block;
  max-width: 100%;
}

.content-markup-series .player-block .episodes-controller a:hover {
  color: var(--accent);
}

.content-markup-series .player-block .episodes-controller .nav-disabled span {
  color: var(--text-muted);
}

.content-markup-series > .social-block {
  grid-area: social-block;
}

.content-markup-series > .comment-block {
  grid-area: comment-block;
}

.ep-ser-block {
  grid-area: ep-ser-block;
  padding: 0 0 0 18px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border-left: 1px solid transparent;
  -o-border-image: linear-gradient(326deg, rgba(250, 180, 84, 0.13) 0%, var(--accent) 11.64%, var(--accent) 47.57%, var(--accent) 89.33%, rgba(250, 180, 84, 0.13) 100%);
  border-image: linear-gradient(326deg, rgba(250, 180, 84, 0.13) 0%, var(--accent) 11.64%, var(--accent) 47.57%, var(--accent) 89.33%, rgba(250, 180, 84, 0.13) 100%);
  border-image-width: 0 0 0 1px;
  border-image-slice: 1;
}

/* Сайдбар серий на странице эпизода: заголовок по центру; разделитель снизу как у .hor-l6 / .t-line */
.content-markup-series .ep-ser-block .all-series-title {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  min-height: 30px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  box-sizing: border-box;
  border-bottom: 1px solid transparent;
  -o-border-image: var(--border-gradient);
  border-image: var(--border-gradient);
  border-image-width: 0 0 1px 0;
  border-image-slice: 1;
}

.content-markup-series .ep-ser-block .all-series-title h2 {
  padding-right: 0;
  text-align: center;
}

.content-markup-series .ep-ser-block .season-series-block {
  width: 100%;
  box-sizing: border-box;
}

/* У hor-l6 на блоке серий — нижний разделитель под списком; оставляем линию только под .all-series-title */
.content-markup-series .ep-ser-block .season-series-block.hor-l6 {
  border-bottom: 0;
  -o-border-image: none;
  border-image: none;
  border-image-width: 0;
  border-image-slice: 0;
}

.content-markup-series .ep-ser-block .ec-epi-prev-wrap {
  width: 100%;
  max-width: 100%;
}

.content-markup-series .ep-ser-block .ec-epi-prev-wrap img,
.content-markup-series .ep-ser-block .ec-epi-prev-wrap .epi-preview {
  width: 100%;
  height: auto;
  max-width: 100%;
}

.tabs-video {
  width: 100%;
}

.tabs-videonav {
  display: flex;
  list-style: none;
  margin: 0 0 10px 0;
  padding: 0;
  gap: 0;
  border-bottom: 1px solid var(--bg-tertiary);
}

.tabs-videonav li {
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.3s, border-color 0.3s;
}

.tabs-videonav li:hover,
.tabs-videonav li.selected {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.videobox {
  width: 100%;
}

.video-responsive {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #000;
  overflow: hidden;
}

.video-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.episodes-controller {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--bg-tertiary);
}

.episodes-controller > div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.episodes-controller a {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color 0.3s;
}

.episodes-controller a:hover {
  color: var(--accent);
}

.series-prev,
.series-next,
.series-list,
.season-list-link {
  text-align: center;
}

.episodes-controller .nav-disabled span {
  color: var(--text-muted);
  cursor: default;
}

.all-series-title {
  height: 30px;
  display: grid;
  grid-template-columns: auto 1fr max-content;
  margin-bottom: 10px;
}

.all-series-title h2 {
  margin: 0;
  padding-right: 10px;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}

.ser-episode-title h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}

.footer-info {
  max-width: 1200px;
  margin: 0 auto;
}

/* T12: комментарии (API) */
.comments-feed {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  min-width: 0;
  max-width: 100%;
}

.comment-item {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--bg-secondary);
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.comment-item-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 6px;
}

.comment-item-meta-start {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.comment-item-author {
  color: var(--text-primary);
  font-size: 14px;
}

.comment-item-date {
  color: var(--text-muted);
  font-size: 12px;
}

.comment-item-content {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-wrap: break-word;
  word-break: break-word;
}

.comment-item--pending {
  border-style: dashed;
  opacity: 0.95;
}

.comment-item-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  border: 1px solid var(--accent);
  border-radius: 4px;
}

.comments-empty {
  color: var(--text-muted);
  font-size: 14px;
}

.comment-status {
  margin: 10px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.comment-status.is-error {
  color: #ff8b8b;
}

.comment-turnstile {
  margin-top: 10px;
  /* Без grid-column виджет попадает только в 1-ю колонку (1fr); iframe Turnstile ~300px и раздвигает сетку за экран. */
  grid-column: 1 / -1;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.comment-turnstile iframe {
  max-width: 100%;
  vertical-align: top;
}

@media (max-width: 459px) {
  .lg-wrap img {
    max-width: 104px;
    max-height: 38px;
  }
}


/* ========== BASE / RESET / LAYOUT (extracted from legacy minified block) ========== */
html  {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  min-width: var(--layout-min-width);
  overflow-x: auto;
}

body  {
  margin: 0;
  background: var(--bg-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  min-width: var(--layout-min-width);
}

body img  {
  max-width: 100%;
  height: auto;
}

body a  {
  text-decoration: none;
}

main  {
  display: block;
}

hr  {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre  {
  font-family: monospace, monospace;
  font-size: 1em;
}

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

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

abbr[title]  {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

b,strong  {
  font-weight: bolder;
}

code,kbd,samp  {
  font-family: monospace, monospace;
  font-size: 1em;
}

small  {
  font-size: 80%;
}

sub,sup  {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub  {
  bottom: -0.25em;
}

sup  {
  top: -0.5em;
}

img  {
  border-style: none;
}

button,input,optgroup,select,textarea  {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
  outline:none;
}

button,input  {
  overflow: visible;
}

button,select  {
  text-transform: none;
}

button,[type=button],[type=reset],[type=submit]  {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}

button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner  {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring  {
  outline: 1px dotted ButtonText;
}

fieldset  {
  padding: 0.35em 0.75em 0.625em;
}

legend  {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress  {
  vertical-align: baseline;
}

textarea  {
  overflow: auto;
}

[type=checkbox],[type=radio]  {
  box-sizing: border-box;
  padding: 0;
}

[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button  {
  height: auto;
}

[type=search]  {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration  {
  -webkit-appearance: none;
  appearance: none;
}

::-webkit-file-upload-button  {
  -webkit-appearance: button;
  appearance: button;
  font: inherit;
}

::-webkit-scrollbar  {
  width: 0 !important;
}

img[data-lazy-src]  {
  opacity: 0;
}

img.lazyloaded  {
  transition: opacity .3s linear 0.2s;
  opacity: 1;
}

#main-parent  {
  overflow-y: scroll !important;
}

#main-parent::-webkit-scrollbar  {
  width: 5px !important;
}

#main-parent::-webkit-scrollbar-thumb  {
  background-color: var(--accent) !important;
  border-radius: 5px !important;
}

#main-parent::-webkit-scrollbar-track  {
  box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset !important;
  -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset !important;
  border-radius: 5px !important;
}

details  {
  display: block;
}

summary  {
  display: list-item;
}

template  {
  display: none;
}

[hidden]  {
  display: none;
}

.wrapper  {
  display: grid;
  grid-template-rows: 70px 1fr -webkit-max-content;
  grid-template-rows: 70px 1fr max-content;
  justify-items: center;
  min-height: 100%;
  padding: 0 20px;
}

header  {
  width: 100%;
  margin: auto 0;
}

.tbox  {
  position: relative;
  display: grid;
  grid-template-columns: 176px 1fr;
  max-width: 1200px;
  height: 70px;
  margin: 0 auto;
}

.hor-l1, .hor-l2, .hor-l3, .hor-l4, .hor-l5, .hor-l7  {
  border-bottom: 1px solid transparent;
  -o-border-image: var(--border-gradient);
  border-image: var(--border-gradient);
  border-image-width: 0 0 1px 0;
  border-image-slice: 1;
}

.hor-l6  {
  border-bottom: 1px solid transparent;
  -o-border-image: var(--border-gradient);
  border-image: var(--border-gradient);
  border-image-width: 0 0 1px 0;
  border-image-slice: 1;
}

.hor-l-t-f  {
  border-top: 1px solid transparent;
  -o-border-image: var(--border-gradient);
  border-image: var(--border-gradient);
  border-image-width: 1px 0 1px 0;
  border-image-slice: 1;
}

.footer.hor-l-t-f  {
  border-image-width: 1px 0 0 0;
}

.seas-si-vert-l  {
  border-left: 1px solid transparent;
  -o-border-image: linear-gradient(326deg, rgba(250, 180, 84, 0.13) 0%, var(--accent) 11.64%, var(--accent) 47.57%, var(--accent) 89.33%, rgba(250, 180, 84, 0.13) 100%);
  border-image: linear-gradient(326deg, rgba(250, 180, 84, 0.13) 0%, var(--accent) 11.64%, var(--accent) 47.57%, var(--accent) 89.33%, rgba(250, 180, 84, 0.13) 100%);
  border-image-width: 0 0 0 1px;
  border-image-slice: 1;
}

.seas-si-vert-l2  {
  border-left: 1px solid transparent;
  -o-border-image: linear-gradient(36deg, rgba(250, 180, 84, 0.13) 0%, var(--accent) 11.64%, var(--accent) 47.57%, var(--accent) 89.33%, rgba(250, 180, 84, 0.13) 100%);
  border-image: linear-gradient(36deg, rgba(250, 180, 84, 0.13) 0%, var(--accent) 11.64%, var(--accent) 47.57%, var(--accent) 89.33%, rgba(250, 180, 84, 0.13) 100%);
  border-image-width: 0 0 0 1px;
  border-image-slice: 1;
}

.navi  {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
}

.lg-wrap  {
  display: flex;
  align-items: center;
}

.lg-wrap img  {
  display: block;
}

#menu__toggle  {
  opacity: 0;
  visibility: hidden;
}

#menu__toggle:checked + .menu__btn > span  {
  transform: rotate(45deg);
  background-color: var(--accent);
  width: 100%;
}

#menu__toggle:checked + .menu__btn > span::before  {
  top: 0;
  transform: rotate(0deg);
  background-color: var(--accent);
  width: 100%;
}

#menu__toggle:checked + .menu__btn > span::after  {
  top: 0;
  transform: rotate(90deg);
  background-color: var(--accent);
  width: 100%;
}

#menu__toggle:checked ~ .menu  {
  top: 0 !important;
  z-index: 3;
}

.menu__btn  {
  display: flex;
  align-items: center;
  position: absolute;
  width: 34px;
  height: 31px;
  cursor: pointer;
  z-index: 4;
}

.menu__btn > span,.menu__btn > span::before,.menu__btn > span::after  {
  display: block;
  position: absolute;
  width: 80%;
  right: 0;
  height: 5px;
  background-color: #fff;
  transition-duration: 0.25s;
  border-radius: 1px;
}

.menu__btn > span::before  {
  content: "";
  top: -13px;
  width: 120%;
}

.menu__btn > span::after  {
  content: "";
  top: 13px;
  width: 120%;
}

.menu  {
  display: flex;
  align-items: center;
  position: absolute;
  top: -110%;
  right: 40px;
  max-width: 600px;
  height: 100%;
  overflow-y: scroll;
  margin: 0;
  padding: 0;
  list-style: none;
  transition-duration: 0.25s;
  overflow: visible;
  text-transform: uppercase;
}

.menu-item-has-children a  {
  z-index: 999;
}

.sub-menu  {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 37px;
  padding: 0;
  margin-top: 33px;
  right: 0;
  z-index: 998;
  background: #183956;
  border-top: 1px solid transparent;
  -o-border-image: linear-gradient(263deg, rgba(250, 180, 84, 0.13) 0%, var(--accent) 11.64%, var(--accent) 47.57%, var(--accent) 89.33%, rgba(250, 180, 84, 0.13) 100%);
  border-image: linear-gradient(263deg, rgba(250, 180, 84, 0.13) 0%, var(--accent) 11.64%, var(--accent) 47.57%, var(--accent) 89.33%, rgba(250, 180, 84, 0.13) 100%);
  border-image-width: 1px 0 0 0;
  border-image-slice: 1;
}

.sub-menu li  {
  padding: 10px 24px;
}

.menu-item  {
  display: flex;
  padding: 0 24px;
  height: 100%;
  color: #333;
  text-decoration: none;
  transition-duration: 0.25s;
  font-size: 18px;
  font-weight: 700;
}

.menu-item-has-children:hover .sub-menu  {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.menu-item a  {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.menu a:hover  {
  color: var(--accent);
  transform: scale(1.1);
  transition: transform .3s
}

.menu a  {
  transition: 0.3s;
}

.content  {
  width: 1200px;
}

.bread-wrap  {
  display: flex;
  align-items: center;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  min-height: 26px;
  height: auto;
  margin: 0 18px 0 0;
}

.breadcrumbs  {
  list-style: none;
  padding: 0;
  margin: 0;
  white-space: nowrap;
  overflow: auto;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  line-height: 1.25;
}

.breadcrumbs li  {
  position: relative;
  display: inline-block;
  font-size: 16px;
  font-weight: 100;
  color: #fff;
}

.breadcrumbs li  {
  margin-right: 20px;
}

.breadcrumbs li:not(:first-child)  {
  margin-left: 20px;
}

.breadcrumbs a  {
  text-decoration: none;
}

.breadcrumbs a:visited  {
  color: #fff;
}

.breadcrumbs li:not(:first-child):before  {
  content: '';
  left: -24px;
  top: 50%;
  width: 0px;
  height: 0;
  border-style: solid;
  border-width: 6px;
  border-color: transparent transparent transparent var(--accent);
  position: absolute;
  transform: translateY(-50%);
}

.bread-current  {
  color: #D5D5D5 !important;
}

.content-markup-season  {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 286px);
  grid-template-rows: 36px -webkit-max-content -webkit-max-content auto -webkit-max-content -webkit-max-content -webkit-max-content;
  grid-template-rows: 36px max-content max-content auto max-content max-content max-content;
  grid-template-areas: "bread-wrap season-info" "contvp season-info" "page-title season-info" "main-content season-info" "main-content season-desc-block" "social-block season-desc-block" "comment-block season-desc-block";
  margin-top: 16px;
}

.content-markup-season .season-desc-block {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.contvp  {
  grid-area: contvp;
  margin: 0 18px 0 0;
}

.social-block  {
  display: flex;
  flex-direction: row;
  justify-content: center;
  grid-area: social-block;
  padding: 15px 0;
  margin: 0 18px 0 0;
  height: 38px;
}

.share-title  {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  color: #fff;
  font-weight: 500;
  font-size: 16px;
}

.share-icons  {
  display: flex;
}

.share-icons a  {
  display: flex;
  align-items: center;
  justify-content: center;
  background: no-repeat 50%;
  background-size: 100% 100%;
  width: 34px;
  height: 34px;
  margin-right: 10px;
  background: #0b1c20;
  transition: 0.3s;
}

.share-icons a:hover  {
  background: var(--accent);
  border: 2px solid #fff;
}

.share-icons a:hover div  {
  transition: 0.3s;
  transform: scale(1.2);
}

.share-icons .vk  {
  border: 2px solid #0077FF;
  border-radius: 6px;
}

.share-icons .f-vk  {
  background-image: url(../img/fa-vk.svg);
  width: 21px;
  height: 12px;
}

.share-icons .ok  {
  border: 2px solid #EB722E;
  border-radius: 6px;
}

.share-icons .f-ok  {
  background-image: url(../img/fa-ok.svg);
  width: 12px;
  height: 20px;
}

.share-icons .wa  {
  border: 2px solid #65BC54;
  border-radius: 6px;
}

.share-icons .f-wa  {
  background-image: url(../img/fa-wa.svg);
  width: 20px;
  height: 20px;
}

.share-icons .tg  {
  border: 2px solid #64A9DC;
  border-radius: 6px;
}

.share-icons .f-tg  {
  background-image: url(../img/fa-tg.svg);
  width: 17px;
  height: 14px;
}

.comment-block  {
  grid-area: comment-block;
  margin: 0 18px 13px 0;
}

.depth-3 .reply  {
  display: none;
}

.season-desc-block  {
  position: relative;
  grid-area: season-desc-block;
  width: 317px;
  padding: 0 0 0 18px;
}

.season-desc-content  {
  position: relative;
  background: #173651;
  font-size: 16px;
  color: #fff !important;
  font-weight: 100;
  box-sizing: border-box;
  padding: 20px 10px;
  margin-top: 30px;
  line-height: 1.5;
}

.season-desc-content p  {
  margin: 0;
}

.season-desc-block .season-desc-content:before  {
  content: url(../img/sd-block-icon.svg);
  position: absolute;
  top: -22px;
  left: 50%;
  margin-left: -54px;
}

.series-desc-block .series-desc-content:before  {
  content: url(../img/sd-block-icon.svg);
  position: absolute;
  top: -18px;
  left: 50%;
  margin-left: -54px;
}

.page-title  {
  grid-area: page-title;
  margin: 0 18px 0 0;
}

.page-title h1  {
  font-size: 26px;
  color: #fff;
  font-weight: 700;
  margin: 0;
}

.season-info  {
  grid-area: season-info;
  display: grid;
  grid-template-rows: repeat(4, -webkit-max-content);
  grid-template-rows: repeat(4, max-content);
  grid-template-areas: "season-title" "poster-wrap" "user-rating" "series-chars";
  padding: 0 0 0 18px;
}

.season-title  {
  grid-area: season-title;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 317px;
  margin-bottom: 10px;
  font-style: italic;
  text-align: center;
  color: #fff;
  font-weight: 300;
  font-size: 16px;
}

.season-title span  {
  color: var(--accent);
}

.user-rating  {
  display: flex;
  align-items: end;
  grid-area: user-rating;
  height: 92px;
}

.vote-block  {
  position: relative;
  --rating-star-width: 26px;
  --rating-star-height: 26px;
  width: 317px;
  height: 76px;
}

.rating-text  {
  position: relative;
  display: flex;
  right: 0;
}

.rat-val  {
  font-size: 30px;
  color: #fff;
  font-weight: 900;
  position: absolute;
  right: 29px;
  top: -12px;
}

.val-counter  {
  position: absolute;
  top: 1px;
  left: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 300;
}

.val-counter b  {
  padding-left: 3px;
  font-weight: 900;
}

.ep-rat-max  {
  position: absolute;
  right: 0;
  font-size: 16px;
  font-weight: 900;
  color: #A3A3A3;
}

.vote-block .rating  {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  height: 40px;
  display: flex;
  flex-direction: row-reverse;
  align-items: stretch;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
}

.vote-block .rating li  {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  height: 100%;
  float: none;
  position: relative;
  text-indent: -9999px;
  cursor: pointer;
}

.vote-block ol.show-current li  {
  position: relative;
}

.vote-block.disabled .rating li:hover,.vote-block.disabled .rating li:hover ~ li  {
  cursor: default;
}

.vote-block ol.show-current  {
  position: absolute;
  left: 0;
  top: 33px;
  width: 100%;
  box-sizing: border-box;
  height: 40px;
  background-color: var(--bg-primary);
  isolation: isolate;
}

.vote-block ol.show-current li:not(.current) {
  z-index: 2;
  box-sizing: border-box;
  --star-fill: 0%;
}

.vote-block ol.show-current li:not(.current)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../img/star-outline-cell.svg) center center / var(--rating-star-width) var(--rating-star-height) no-repeat;
}

.vote-block ol.show-current li:not(.current)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../img/star-fill-cell.svg) center center / var(--rating-star-width) var(--rating-star-height) no-repeat;
  clip-path: inset(0 calc(100% - var(--star-fill)) 0 0);
}

.vote-block ol.show-current li.current  {
  position: absolute;
  width: 0;
  height: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.vote-block ol.show-current li.current span  {
  display: none;
}

.vote-block .rating li:hover,
.vote-block .rating li:hover ~ li  {
  cursor: pointer;
}

.poster-wrap  {
  grid-area: poster-wrap;
  display: flex;
  justify-content: end;
  padding-bottom: 10px;
}

.series-chars  {
  width: 317px;
  grid-area: series-chars;
  margin-top: 10px;
  padding-bottom: 10px;
}

.series-chars .s-par:not(:first-child)  {
  margin-top: 20px;
}

.s-par  {
  display: flex;
}

.param  {
  font-weight: 300;
  font-size: 16px;
  color: #fff;
  width: 147px;
}

.param-value  {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  color: #D5D5D5;
  font-size: 16px;
  font-weight: 300;
}

.cast-crew  {
  padding-bottom: 5px;
}

.show-rate  {
  grid-area: show-rate;
  margin-top: 10px;
  padding-bottom: 10px;
}

.show-rate .mark-scale-kp  {
  margin-bottom: 20px;
}

.sc-title, .sc-mark  {
  color: #fff;
  font-weight: 300;
  font-size: 16px;
}

.sc-title  {
  grid-area: sc-title;
}

.sc-mark  {
  display: flex;
  grid-area: sc-mark;
  justify-content: flex-end;
}

.sc-graph  {
  display: flex;
  padding: 2px;
  grid-area: sc-graph;
  background: #fff;
  border-radius: 2px;
}

.sc-graph div:not(:last-child)  {
  margin-right: 2px;
}

.mark-scale-mc {
  display: grid;
  grid-template-columns: -webkit-max-content 1fr;
  grid-template-columns: max-content 1fr;
  grid-template-rows: 1fr 13px;
  grid-template-areas: "sc-title sc-mark" "sc-graph sc-graph";
  width: 317px;
  height: 36px;
}

.graph-part-mc  {
  width: 30px;
  height: 9px;
  background: #5B5B5B;
}

.gp-active-mc  {
  background: #66CC33;
}

.st-last-mc, .st-last-mc2, .st-last-mc3, .st-last-mc5  {
  background-image: linear-gradient(to right, #66CC33 10%, #5B5B5B 10%, #5B5B5B 100%);
}

.st-last-mc4  {
  background-image: linear-gradient(to right, #66CC33 40%, #5B5B5B 40%, #5B5B5B 100%);
}

.st-last-mc6  {
  background-image: linear-gradient(to right, #66CC33 30%, #5B5B5B 30%, #5B5B5B 100%);
}

.st-last-mc7  {
  background-image: linear-gradient(to right, #66CC33 80%, #5B5B5B 80%, #5B5B5B 100%);
}

.st-last-mc8  {
  background-image: linear-gradient(to right, #66CC33 50%, #5B5B5B 50%, #5B5B5B 100%);
}

.main-content  {
  grid-area: main-content;
  line-height: 1.5;
  margin: 0 18px 0 0;
  box-sizing: border-box;
  border-top: 1px solid transparent;
  -o-border-image: var(--border-gradient);
  border-image: var(--border-gradient);
  border-image-width: 1px 0 0 0;
  border-image-slice: 1;
}

.main-content p  {
  font-size: 16px;
  color: #D5D5D5;
  font-weight: 500;
}

blockquote  {
  font-size: 16px;
  color: #fff;
  font-style: italic;
  font-weight: 300;
  background: #173651;
  margin: 0;
  box-sizing: border-box;
  padding: 10px 10px 10px 37px;
  overflow: hidden;
}

blockquote p  {
  position: relative;
  color: #fff!important;
  margin: 0;
  z-index: 2;
}

blockquote p:before  {
  content: '\201C';
  top: -36px;
  left: -41px;
  width: 0;
  height: 0;
  display: inline-block;
  color: var(--accent);
  font-size: 84px;
  position: absolute;
}

blockquote p:after  {
  position: absolute;
  bottom: 129px;
  right: -20px;
  z-index: -1;
  content: '\201C';
  width: 0;
  height: 40px;
  display: inline-block;
  color: #2d5272;
  font-size: 251px;
  transform: scale(-1, 1);
}

.text-title h2  {
  margin: 0;
  padding-right: 10px;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}

.seasons-series-title  {
  height: 30px;
  display: grid;
  grid-template-columns: auto 1fr -webkit-max-content;
  grid-template-columns: auto 1fr max-content;
  margin-bottom: 10px;
}

.seasons-series-title h2  {
  margin: 0;
  padding-right: 10px;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}

.sub-title h2  {
  margin: 10px 0 0 0;
  padding-right: 10px;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}

.t-line  {
  border-top: 1px solid transparent;
  -o-border-image: var(--border-gradient);
  border-image: var(--border-gradient);
  border-image-width: 0 0 1px 0;
  border-image-slice: 1;
  margin: auto 0;
  position: relative;
}

.seasons-number  {
  display: flex;
  align-items: center;
  padding-left: 10px;
  color: #fff;
  font-weight: 100;
  font-size: 16px;
}

.series-row  {
  -webkit-box-orient: vertical;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

/* Нижний разделитель .hor-l6 здесь не нужен — линия у заголовка блока серий (.t-line / .seasons-series-title) */
.series-row.hor-l6 {
  border-bottom: 0;
  -o-border-image: none;
  border-image: none;
  border-image-width: 0;
  border-image-slice: 0;
}

.episode-card  {
  margin: 10px 1.1%;
  max-width: 31%;
  min-width: 0;
}

.num-about-block  {
  padding-left: 20px;
  position: relative;
  font-size: 16px;
  color: #D5D5D5;
  font-weight: 500;
}

.num-about-block  {
  counter-reset: my-awesome-counter;
  list-style: none;
  padding-left: 40px;
  
}

.num-about-block li  {
  margin: 0 0 0.5rem 0;
  counter-increment: my-awesome-counter;
  position: relative;
  
}

.num-about-block li::before  {
  content: counter(my-awesome-counter);
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  position: absolute;
  --size: 20px;
  left: calc(-1 * var(--size) - 10px);
  line-height: var(--size);
  width: var(--size);
  height: var(--size);
  top: 0;
  background: var(--accent);
  border-radius: 50%;
  text-align: center;
  font-weight: 500;
  
}

.about-block  {
  list-style: none;
  padding-left: 40px;
  position: relative;
  font-size: 16px;
  color: #D5D5D5;
  font-weight: 500;
}

.about-block li:before  {
  padding-right: 7px;
  content: '\2713';
  display: inline-block;
  color: var(--accent);
  font-size: 20px;
  position: absolute;
  padding-right: 7px;
  left: 10px;
}

.about-block li:not(:first-child)  {
  padding-top: 7px;
}

.ec-epi-prev-wrap  {
  position: relative;
  overflow: hidden;
  width: fit-content;
  max-width: 100%;
  box-shadow: 0 1px 4px rgba(0,0,0,.3), -13px 0 7px -13px rgba(0,0,0,.8), 13px 0 7px -13px rgba(0,0,0,.8), 0 0 20px rgba(0,0,0,.1) inset;
  -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.3), -13px 0 7px -13px rgba(0,0,0,.8), 13px 0 7px -13px rgba(0,0,0,.8), 0 0 20px rgba(0,0,0,.1) inset;
}

.ec-epi-prev-link  {
  display: block;
  max-width: 100%;
  line-height: 0;
}

.ec-epi-prev-wrap picture  {
  display: block;
  max-width: 100%;
}

.ec-epi-prev-wrap img,
.ec-epi-prev-wrap .epi-preview  {
  display: block;
  max-width: 100%;
  height: auto;
  width: auto;
  transition: 0.5s;
}

.ec-epi-prev-link:hover img  {
  transform: scale(1.1);
}

.ec-epi-prev-link:hover:before  {
  content: url(../img/epi-play-button.svg);
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  margin: auto;
  left: 0;
  height: 100%;
  right: 0;
  z-index: 2;
  padding-right: 10px;
}

.ec-epi-prev-link:hover .epi-preview  {
  filter: brightness(0.5);
}

.ec-epi-params {
  min-width: 0;
}

.ec-epi-name  {
  display: flex;
  justify-content: start;
  text-align: start;
  margin-top: -4px;
}

.ec-epi-name span  {
  color: var(--accent);
  font-weight: 400;
  font-size: 16px;
}

.ec-epi-number  {
  position: relative;
  flex-shrink: 0;
  /* ::after с right:-9px и шириной 4px вылезает за padding-box — иначе на узкой ширине наезжает на .ec-epi-time */
  padding-right: 2px;
}

.ec-epi-link  {
  color: #fff !important;
  font-size: 16px;
  font-weight: 400;
  white-space: nowrap;
}

.ec-epi-link::after  {
  content: '';
  position: absolute;
  top: 11px;
  right: -9px;
  display: inline-block;
  width: 4px;
  height: 4px;
  -moz-border-radius: 7.5px;
  -webkit-border-radius: 7.5px;
  border-radius: 7.5px;
  background-color: #E50914
}

.ec-epi-info  {
  display: flex;
  flex-wrap: nowrap;
  justify-content: start;
  align-items: baseline;
  padding-right: 12px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.ec-epi-info::-webkit-scrollbar {
  display: none;
}

.ec-epi-time  {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  white-space: nowrap;
  color: #D5D5D5;
  font-size: 12px;
  font-weight: 400;
  padding-left: 12px;
}

.mp-tb  {
  margin-top: 20px;
}

.alert-mes  {
  color: #0095aa;
  font-weight: 400;
}

.footer  {
  width: 1200px;
  padding: 20px 0 20px 0;
  margin-top: 10px;
  text-align: center;
}

.footer p  {
  color: #BDBCBC;
  font-size: 16px;
  font-weight: 100;
  margin: 4px 0;
}

.footer span  {
  color: #fff;
  font-weight: 700;
  font-size: 16px;
}

.comment-reply-title  {
  position: relative;
  font-size: 18px;
  color: #fff;
  font-weight: 700;
  margin-bottom: 0;
}

.text-title h3  {
  position: relative;
  font-size: 18px;
  color: #fff;
  font-weight: 600;
  margin-bottom: 0;
}

.comments-title h2  {
  color: #fff;
  font-size: 22px;
  font-weight: 900;
}

.comments-list  {
  list-style: none;
  padding: 0;
}

.children  {
  list-style: none;
}

.comment-data  {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-top: 0.5em;
  width: 320px;
}

.comment-author  {
  font-size: 16px;
  color: #fff;
  font-weight: 700;
  padding-right: 6px;
}

.comment-date  {
  font-size: 16px;
  height: 19px;
  font-weight: 300;
  color: #505050;
  background: #ffac00;
  padding: 0 5px;
  margin-right: 6px;
  border-radius: 2px;
}

.reply  {
  font-size: 16px;
  height: 19px;
  font-weight: 300;
  color: #fff;
  background: #b30000;
  padding: 0 5px;
  cursor: pointer;
  border-radius: 2px;
}

#cancel-comment-reply-link  {
  font-size: 16px;
  font-weight: 300;
  color: #fff;
  background: #b30009;
  padding: 0 5px;
  cursor: pointer;
  border-radius: 2px;
  margin-left: 7px;
}

.reply:hover  {
  background: #a70000;
}

.comment_block p  {
  color: #D5D5D5;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
}

.comment-form  {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 110px;
  grid-template-columns: minmax(0, 1fr) 110px;
  grid-template-rows: repeat(2,-webkit-max-content);
  grid-template-rows: repeat(2,max-content);
  grid-template-areas: 'comment-form-author form-submit' 'comment-form-comment comment-form-comment';
  margin-top: 1em;
  grid-gap: 10px;
  max-width: 100%;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.comment-form-comment  {
  grid-area: comment-form-comment;
}

.comment-form-author  {
  grid-area: comment-form-author;
}

.comment-form-email  {
  grid-area: comment-form-email;
}

.form-submit  {
  grid-area: form-submit;
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: end;
}

.form-sub-title  {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
}

.form-sub-title:after  {
  content: '*';
  color: #c10035;
  font-size: 1em;
  padding-left: 3px;
}

.form-sub-desc  {
  color: #fff;
  opacity: .8;
  font-size: 12px;
}

.comment-form input[type=text]  {
  box-sizing: border-box;
  width: 100%;
  padding: 0 0 0 7px;
}

.comment-form input[type=email]  {
  box-sizing: border-box;
  width: 100%;
  padding: 0 0 0 7px;
}

.data-area  {
  margin-top: 5px;
  height: 34px;
}

.data-area  {
  background-color: #040c14;
  border: 1px solid var(--accent);
  border-radius: 5px;
  color: #fff;
}

.comment-form textarea[placeholder]  {
  padding-top: 10px;
  padding-left: 10px;
}

.comment-form textarea  {
  resize: vertical;
  min-height: 150px;
  width: 100%;
  margin-top: 5px;
  background-color: #040c14;
  border: 1px solid var(--accent);
  border-radius: 5px;
  color: #fff;
  box-sizing: border-box;
}

.submit  {
  padding: 8px;
  background-color: var(--accent);
  color: #fff;
  border-radius: 2px;
  cursor: pointer;
  border: none;
  font-weight: 100;
  text-transform: uppercase;
}

.submit:hover  {
  background: var(--accent-hover);
}

@media (max-width: 1240px)  {
  .content  {
    width: 100%;
  }

  .footer  {
    width: 100%;
    
  }

  
}

@media (max-width: 1000px)  {
  .content-markup-season  {
    /* Как на главной (.content-markup): одна ширина правой колонки */
    grid-template-columns: minmax(0, 1fr) minmax(212px, 267px);
  }

  .user-rating  {
    height: 72px;
  }

  .vote-block  {
    --rating-star-width: 20px;
    --rating-star-height: 20px;
    width: 244px;
    height: 56px;
  }

  .vote-block .rating  {
    height: 30px;
  }

  .vote-block ol.show-current  {
    top: 22px;
    height: 30px;
  }

  .vote-block ol.show-current li.current span  {
    height: 30px;
  }

  .content-markup-season  {
    grid-template-rows: 36px max-content max-content auto max-content max-content max-content;
    
  }

  .sub-menu li  {
    padding: 10px 10px;
  }

  .menu-item  {
    padding: 0 10px;
    font-size: 16px;
    
  }

  /* Только сайдбар сезона: 100% колонки (244px ломал узкую колонку и давал вылезание) */
  .content-markup-season .season-info .poster-wrap,
  .content-markup-season .season-info .series-chars,
  .content-markup-season .season-info .show-rate {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .content-markup-season .season-info .mark-scale-mc,
  .content-markup-season .season-info .mark-scale-rt {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .content-markup-season .season-info > .season-title {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .season-desc-block  {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .param, .param-value  {
    font-size: 14px;
    
  }

  .ec-epi-link  {
    font-size: 14px;
    
  }

  .ec-epi-name span  {
    font-size: 14px;
    
  }

  .ec-epi-name span  {
    font-size: 14px;
    
  }

  
}

@media (max-width: 930px)  {
  .epi-name span  {
    font-size: 14px;
    
  }

  /* Двухколоночный десктоп главной: две строки грида; не трогаем ≤869px (там три строки: заголовок — полка — контент) */
  @media (min-width: 870px) {
    .content-markup  {
      grid-template-rows: -webkit-max-content -webkit-max-content;
      grid-template-rows: max-content max-content;
    }
  }

  .page-title h1  {
    font-size: 24px;
    
  }

  .all-seasons-title  {
    height: 23px;
    
  }

  .seasons-series-title  {
    height: 23px;
    margin-bottom: 10px;
    
  }

  .all-seasons-title h2  {
    font-size: 18px;
    
  }

  .seasons-series-title h2  {
    font-size: 18px;
    
  }

  .sub-title h2  {
    font-size: 18px;
    
  }

  .text-title h2  {
    font-size: 18px;
  }

  .ser-episode-title h2  {
    font-size: 18px;
    
  }

  .all-series-title  {
    height: 23px;
    
  }

  .all-series-title h2  {
    font-size: 18px;
    
  }

  
}

@media (max-width: 870px)  {
  .season-desc-content  {
    margin-top: 10px;
  }

  .user-rating  {
    justify-content: center;
    margin: 10px 0;
    height: 92px;
  }

  .vote-block  {
    --rating-star-width: 26px;
    --rating-star-height: 26px;
    width: 317px;
    height: 75px;
    margin-top: 18px;
  }

  .vote-block .rating  {
    height: 40px;
  }

  .vote-block ol.show-current  {
    top: 33px;
  }

  .vote-block ol.show-current li.current span  {
    height: 40px;
  }

  .social-block  {
    margin: 20px 0 0 0;
    
  }

  .tl-hide  {
    display: block;
    
  }

  .menu-item  {
    font-size: 14px;
    
  }

  .bread-wrap  {
    margin: 0;
    
  }

  .content-markup-season  {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 36px -webkit-max-content -webkit-max-content repeat(5, -webkit-max-content);
    grid-template-rows: 36px max-content max-content repeat(5, max-content);
    grid-template-areas: "bread-wrap" "contvp" "page-title" "season-info" "main-content" "social-block" "comment-block" "season-desc-block";
    margin-top: 16px;
    
  }

  .season-info  {
    grid-area: season-info;
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: repeat(3, -webkit-max-content);
    grid-template-rows: repeat(3, max-content);
    grid-template-areas: "poster-wrap series-chars" "season-title series-chars" "user-rating user-rating";
    padding: 0;
    -moz-column-gap: 20px;
    column-gap: 20px;
    
  }

  .season-title  {
    font-size: 14px;
    
  }

  .season-info .mark-scale-mc,
  .season-info .mark-scale-rt {
    width: 100%;
    margin: 0 auto;
    margin-top: 10px;
    padding-bottom: 10px;
  }

  .ses-rate-col  {
    -moz-column-gap: 20px;
    column-gap: 20px;
    
  }

  .graph-part-mc  {
    width: 38px;
    
  }

  .season-title  {
    margin-bottom: 0;
    width: 100%;
    
  }

  .main-content  {
    margin: 0 18px 0 0;
    
  }

  /* Главная: «полка» .series-info — в блоке max-width:870px (.content-markup .series-info), без старого season-info шаблона */

  .hor-l2, .hor-l3, .hor-l4  {
    border-bottom: none;
    border-image-width: 0;
    
  }

  .page-title h1  {
    margin-bottom: 15px;
    
  }

  .seas-si-vert-l, .seas-si-vert-l2  {
    border-left: none;
    border-image-width: 0;
    
  }

  .season-desc-block  {
    width: 100%;
    padding: 0;
    
  }

  .si-vert-l  {
    border-left: none;
    border-image-width: 0;
    
  }

  .poster-wrap  {
    width: 100%;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    justify-content: start;
    padding-bottom: 0;
    
  }

  .series-chars  {
    width: 100%;
    margin-top: 0;
    
  }

  /* Две колонки шкал — только страница сезона (.ses-rate-col), не главная */
  .season-info .show-rate.ses-rate-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 0;
    width: 100%;
    align-items: flex-end;
  }

  .comment-block  {
    grid-area: comment-block;
    margin: 0 0 13px 0;
    
  }

  .content-markup-series {
    grid-template-columns: 1fr;
    grid-template-rows: 28px max-content max-content max-content max-content max-content max-content;
    grid-template-areas:
      "bread-wrap"
      "page-title"
      "player-block"
      "main-content"
      "social-block"
      "comment-block"
      "ep-ser-block";
  }

  .content-markup-series > .social-block,
  .content-markup-series > .comment-block {
    margin-left: 0;
    margin-right: 0;
  }

  .ep-ser-block {
    border-left: none;
    border-image-width: 0;
    padding-left: 0;
    width: 100%;
    margin-top: 10px;
  }

  .content-markup-series .player-block {
    margin-left: 0;
    margin-right: 0;
    border-radius: 6px;
  }

  .content-markup-series .player-block .tabs-videonav li {
    padding: 12px 6px;
    font-size: 14px;
  }

  .content-markup-series .player-block .episodes-controller > div {
    padding: 12px 4px;
  }

  .content-markup-series .player-block .episodes-controller a {
    font-size: 12px;
  }

  .content-markup-series .season-series-block .series-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 2.2%;
    row-gap: 20px;
  }

  .content-markup-series .season-series-block.hor-l6 .series-row .episode-card {
    margin: 0;
    max-width: none;
    width: 100%;
    min-width: 0;
  }

  .content-markup-series .episode-head-row .vote-block {
    width: 317px;
    max-width: min(317px, 100%);
    flex-shrink: 0;
    min-width: 0;
    box-sizing: border-box;
  }

  .content-markup-series .episode-head-row .vote-block .rating {
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
  }

}

/* ≤869px: у блока .main-content убрать отступ 18px справа (все страницы) */
@media (max-width: 869px) {
  .main-content {
    margin-right: 0;
  }

  .content-markup .main-content {
    margin-right: 0;
  }

  .content-markup-season > .main-content,
  .content-markup-series > .main-content {
    margin-right: 0;
  }
}

@media (max-width: 768px)  {
  .comment-data  {
    width: 255px;
  }

  .tbox  {
    grid-template-columns: 154px 1fr;
  }

  .content-markup-season,
  .content-markup-series {
    margin-top: 0;
  }

  .content-markup-season  {
    grid-template-rows: 25px -webkit-max-content -webkit-max-content repeat(4, -webkit-max-content);
    grid-template-rows: 25px max-content max-content repeat(4, max-content);
    
  }

  .content-markup-season .page-title  {
    margin: 16px 0 0 0;
    
  }

  .breadcrumbs  {
    margin-top: 0;
    
  }

  .share-title  {
    font-size: 14px;
    
  }

  .num-about-block  {
    font-size: 14px;
  }

  .num-about-block li::before  {
    font-size: .8rem;
    --size: 18px;
  }

  .main-content p  {
    font-size: 14px;
    
  }

  .about-block  {
    font-size: 14px;
    
  }

  .footer p  {
    font-size: 14px;
    
  }

  .all-series-title  {
    margin-bottom: 10px;
    
  }

  .breadcrumbs li  {
    font-size: 14px;
    
  }

  .season-desc-content  {
    font-size: 14px;
    
  }

  .form-sub-title  {
    font-size: 14px;
  }

  .comment-author  {
    font-size: 14px;
  }

  .comment-date  {
    font-size: 14px;
  }

  .reply  {
    font-size: 14px;
  }

  .comment_block p  {
    font-size: 14px;
  }

  
}

@media (max-width: 680px)  {
  .series-chars  {
    width: 100%;
    margin: 0 auto;
    padding-bottom: 0;
    
  }

  .season-info .show-rate.ses-rate-col {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    padding-bottom: 0;
  }

  .ses-rate-col  {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    
  }

  .season-info .show-rate .mark-scale-mc,
  .season-info .show-rate .mark-scale-rt {
    margin-bottom: 10px;
  }

  
}

@media (max-width: 590px)  {
  .episode-card  {
    margin: 10px 1.1%;
    max-width: 47.8%;
    
  }

  .ec-epi-link  {
    font-size: 14px;
    
  }

  .ec-epi-name span  {
    font-size: 14px;
    
  }

  .ec-epi-link  {
    font-size: 13px;
    
  }

  .ec-epi-name span  {
    font-size: 13px;
    
  }

  .content-markup-series .season-series-block .series-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  
}

@media (max-width: 420px) {
  .content-markup-series .season-series-block .series-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 570px)  {
  .ec-epi-link  {
    font-size: 12px;
    
  }

  .ec-epi-name span  {
    font-size: 12px;
    
  }

  
}

@media (max-width: 520px)  {
  .page-title h1  {
    font-size: 20px;
    
  }

  .series-chars  {
    width: 100%;
    margin: 0 auto;
    padding-bottom: 0;
    
  }

  .season-info .show-rate.ses-rate-col {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }

  .graph-part-mc  {
    width: 46px;
    
  }

  
}

@media (max-width: 500px)  {
  .sc-title, .sc-mark  {
    font-size: 14px;
    
  }

  
}

@media (max-width: 480px)  {
  .comment-author  {
    font-size: 12px;
  }

  .season-info  {
    grid-template-columns: 160px 1fr;
    grid-area: season-info;
    /* Первая строка — по высоте постера (2:3), не квадрат колонки: иначе 350–480px постер вылезает вниз */
    grid-template-rows: -webkit-max-content repeat(3, -webkit-max-content);
    grid-template-rows: max-content repeat(3, max-content);
    
  }

  .sub-menu  {
    top: 27px;
    right: 40px;
  }

  .season-title  {
    justify-content: flex-start;
    
  }

  .ss-par:not(:first-child)  {
    margin-top: 10px !important;
    
  }

  .mark-scale-mc {
    margin-top: 0;
    padding-bottom: 0;
  }

  .menu  {
    flex-direction: column;
    
  }

  .comment-reply-title small  {
    position: absolute;
    top: 40px;
    right: 0;
  }

  
}

@media (max-width: 459px)  {
  .wrapper  {
    grid-template-rows: 60px 1fr -webkit-max-content;
    grid-template-rows: 60px 1fr max-content;
    
  }

  .tbox  {
    grid-template-columns: 114px 1fr;
    height: 60px;
    
  }

  .wrapper  {
    padding: 0 10px;
    
  }

  .param, .param-value  {
    font-size: 13px;
    
  }

  
}

@media (max-width: 420px)  {
  .season-info  {
    -moz-column-gap: 10px;
    column-gap: 10px;
    
  }

  
}

@media (max-width: 410px)  {
  .mark-scale-mc {
    grid-template-rows: 15px 11px;
    height: 26px;
  }

  .graph-part-mc  {
    height: 7px;
    
  }

  
}

@media (max-width: 400px)  {
  .season-info  {
    grid-template-columns: 130px 1fr;
    grid-template-rows: -webkit-max-content repeat(3, -webkit-max-content);
    grid-template-rows: max-content repeat(3, max-content);
    
  }

  .season-title  {
    font-size: 14px;
    
  }

  .param, .param-value  {
    font-size: 12px;
    
  }

  .sc-title, .sc-mark  {
    font-size: 12px;
    
  }

  .ec-epi-link  {
    font-size: 13px;
    
  }

  .ec-epi-name span  {
    font-size: 13px;
    
  }

  
}

@media (max-width: 375px)  {
  .children  {
    list-style: none;
    padding-left: 20px;
  }

  .user-rating  {
    height: 72px;
  }

  .vote-block  {
    --rating-star-width: 20px;
    --rating-star-height: 20px;
    width: 244px;
    height: 56px;
  }

  .vote-block .rating  {
    height: 30px;
  }

  .vote-block ol.show-current  {
    top: 22px;
    height: 30px;
  }

  .vote-block ol.show-current li.current span  {
    height: 30px;
  }

  
}

@media (max-width: 370px)  {
  .season-info  {
    grid-template-columns: 107px 1fr;
    grid-template-rows: -webkit-max-content repeat(3, -webkit-max-content);
    grid-template-rows: max-content repeat(3, max-content);
    
  }

  
}

@media (max-width: 360px)  {
  .season-info .show-rate.ses-rate-col {
    grid-template-rows: repeat(2, -webkit-max-content);
    grid-template-rows: repeat(2, max-content);
  }

  .series-chars .s-par:not(:first-child)  {
    margin-top: 10px;
    
  }

  .menu-item  {
    font-size: 12px;
    
  }

  
}

@media (max-width: 365px)  {
  .ec-epi-link  {
    font-size: 12px;
    
  }

  .ec-epi-name span  {
    font-size: 12px;
    
  }

  
}

@media (max-width: 350px)  {
  .season-info  {
    grid-template-columns: 84px 1fr;
    grid-template-rows: -webkit-max-content repeat(3, -webkit-max-content);
    grid-template-rows: max-content repeat(3, max-content);
    
  }

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

  .ec-epi-link  {
    font-size: 11px;
    
  }

  .ec-epi-time  {
    font-size: 10px;
    
  }

  .share-icons a  {
    margin-right: 5px;
    
  }

  .sub-menu  {
    right: 34px;
    
  }

  .param  {
    width: 136px;
  }

  .content-markup .series-info .series-chars .param,
  .content-markup .series-info .series-chars .param-value {
    width: auto;
    max-width: none;
    min-width: 0;
  }

  
}

@media (max-width: 305px) {
  .ec-epi-info {
    padding-right: 4px;
  }

  .ec-epi-time {
    padding-left: 14px;
  }
}

@media (max-width: 1024px)  {
  .contvp  {
    height: 0px;
  }

  .comment-form  {
    max-width: 630px;
  }

  
}

@media (max-width: 869px)  {
  .comment-form  {
    max-width: 830px;
  }

  
}

@media (max-width: 834px)  {
  .comment-form  {
    max-width: 794px;
  }

  
}

@media (max-width: 820px)  {
  .comment-form  {
    max-width: 780px;
  }

  
}

@media (max-width: 810px)  {
  .comment-form  {
    max-width: 770px;
  }

  
}

@media (max-width: 768px)  {
  .comment-form  {
    max-width: 728px;
  }

  
}

@media (max-width: 744px)  {
  .comment-form  {
    max-width: 704px;
  }

  
}

@media (max-width: 430px)  {
  .comment-form  {
    max-width: 410px;
  }

  
}

@media (max-width: 428px)  {
  .comment-form  {
    max-width: 408px;
  }

  
}

@media (max-width: 414px)  {
  .comment-form  {
    max-width: 394px;
  }

  
}

@media (max-width: 393px)  {
  .comment-form  {
    max-width: 373px;
  }

  
}

@media (max-width: 390px)  {
  .comment-form  {
    max-width: 370px;
  }

  
}

@media (max-width: 375px)  {
  .comment-form  {
    max-width: 355px;
  }

  
}

@media (max-width: 320px)  {
  .comment-form  {
    max-width: 300px;
  }

  
}

/* Главная — карточки сезонов: правила в конце файла (после минифицированного body img),
   иначе height:auto / max-width ломают заполнение блока с aspect-ratio при file:// и в части браузеров */
.content-markup .s-prev-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 410 / 231;
  background: var(--bg-input);
}
.content-markup .s-prev-wrap > a {
  position: absolute;
  inset: 0;
  display: block;
}
.content-markup .s-prev-wrap picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
}
.content-markup .s-prev-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center center;
  transition: filter 0.35s ease;
}

/* Share icons: normalize SVG viewport differences */
.share-icons .f-vk,
.share-icons .f-ok,
.share-icons .f-wa,
.share-icons .f-tg {
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ========== SEO CONTENT BLOCKS ========== */
.seo-section {
  margin: 24px 18px 0 0;
  padding-top: 18px;
  border-top: 1px solid transparent;
  -o-border-image: var(--border-gradient);
  border-image: var(--border-gradient);
  border-image-slice: 1;
  border-image-width: 1px 0 0 0;
}

.seo-section h2 {
  margin: 0 0 14px;
  color: var(--text-primary);
  font-size: 22px;
  line-height: 1.25;
}

.seo-section p {
  margin: 0 0 14px;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.75;
}

.seo-section a {
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-color: rgba(229, 9, 20, 0.55);
  text-underline-offset: 3px;
}

.seo-section a:hover {
  color: var(--accent);
}

.seo-section p:last-child {
  margin-bottom: 0;
}

@media (max-width: 869px) {
  .seo-section {
    margin-right: 0;
  }
}

/* ========== PLAN: сезонный сайдбар = главная (.series-info) ========== */
.content-markup-season .season-info.seas-si-vert-l {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding-left: 20px;
}

.content-markup-season .season-info > .season-title {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-bottom: 8px;
}

.content-markup-season .season-info > .poster-wrap {
  justify-content: center;
  padding-bottom: 6px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

.content-markup-season .season-info > .poster-wrap picture {
  width: 100%;
  max-width: 100%;
  display: block;
  overflow: visible;
}

.content-markup-season .season-info > .poster-wrap img {
  width: 100%;
  max-width: 100%;
  height: auto !important;
  max-height: none;
  object-fit: contain;
  object-position: top center;
  display: block;
}

.content-markup-season .season-info > .user-rating.hor-l7.hor-l-t-f.user-rating--rail {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top: 1px solid transparent;
  -o-border-image: var(--border-gradient);
  border-image: var(--border-gradient);
  border-image-slice: 1;
  border-image-width: 1px 0 0 0;
}

.content-markup-season .season-info .series-chars.hor-l3 > .user-rating.hor-l7.hor-l-t-f.user-rating--embed {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top: 1px solid transparent;
  -o-border-image: var(--border-gradient);
  border-image: var(--border-gradient);
  border-image-slice: 1;
  border-image-width: 1px 0 0 0;
}

.content-markup-season .season-info .vote-block {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.content-markup-season .season-info .vote-block .rating {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Как у базовых .rat-val / .val-counter / .ep-rat-max — rail и embed совпадают, независимо от .series-chars */
.content-markup-season .season-info .user-rating .val-counter {
  font-size: 16px;
  font-weight: 300;
  color: #fff;
}

.content-markup-season .season-info .user-rating .val-counter b {
  font-weight: 900;
}

.content-markup-season .season-info .user-rating .rat-val {
  font-size: 30px;
  font-weight: 900;
  color: #fff;
}

.content-markup-season .season-info .user-rating .ep-rat-max {
  font-size: 16px;
  font-weight: 900;
  color: #A3A3A3;
}

.content-markup-season .season-info .series-chars.hor-l3 > .show-rate.hor-l7.ses-rate-col.show-rate--embed {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top: 1px solid transparent;
  -o-border-image: var(--border-gradient);
  border-image: var(--border-gradient);
  border-image-slice: 1;
  border-image-width: 1px 0 0 0;
}

@media (min-width: 401px) {
  .content-markup-season .season-info .series-chars.hor-l3 {
    display: flex;
    flex-direction: column;
  }

  .content-markup-season .season-info .series-chars.hor-l3 > .show-rate.hor-l7.ses-rate-col.show-rate--embed {
    margin-top: 10px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .content-markup-season .season-info .series-chars.hor-l3 > .user-rating.hor-l7.hor-l-t-f.user-rating--embed {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    justify-content: center;
  }
}

.content-markup-season .season-info > .series-chars {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 9px;
  border-top: none;
  -o-border-image: none;
  border-image: none;
}

.content-markup-season .season-info .series-chars .s-par:not(:first-child) {
  margin-top: 9px;
}

.content-markup-season .season-info .series-chars .s-par {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 12px;
  align-items: baseline;
}

/* Узкая колонка под подпись, шире под значение; граница колонок = стык param / param-value */
.content-markup-season .season-info .series-chars.hor-l3 .s-par {
  grid-template-columns: minmax(0, 0.44fr) minmax(0, 0.56fr);
}

/* Как на главной: .content-markup .series-info .series-chars (.param / .param-value) */
.content-markup-season .season-info .series-chars.hor-l3 .param {
  min-width: 0;
  box-sizing: border-box;
  font-weight: 400;
  color: var(--text-primary);
}

.content-markup-season .season-info .series-chars.hor-l3 .param-value {
  min-width: 0;
  box-sizing: border-box;
  text-align: right;
  font-weight: 400;
  color: var(--text-primary);
  overflow-wrap: break-word;
}

/* Только строки характеристик (.s-par), не vote-block под ними (rat-val / val-counter b) */
.content-markup-season .season-info .series-chars.hor-l3 .s-par strong,
.content-markup-season .season-info .series-chars.hor-l3 .s-par b {
  font-weight: 400;
}

/* series-chars hor-l3: <350px 11px; с 350px по 768px 12px (+1 ступень для 350–425 относительно прежних 11px); ≥769px 13px */
@media (max-width: 349px) {
  .content-markup-season .season-info .series-chars.hor-l3 .param,
  .content-markup-season .season-info .series-chars.hor-l3 .param-value {
    font-size: 11px;
    line-height: 1.32;
  }
}

@media (min-width: 350px) and (max-width: 768px) {
  .content-markup-season .season-info .series-chars.hor-l3 .param,
  .content-markup-season .season-info .series-chars.hor-l3 .param-value {
    font-size: 12px;
    line-height: 1.32;
  }
}

@media (min-width: 769px) {
  .content-markup-season .season-info .series-chars.hor-l3 .param,
  .content-markup-season .season-info .series-chars.hor-l3 .param-value {
    font-size: 13px;
    line-height: 1.34;
  }
}

/* «Актёры:» — список по ширине сайдбара (страницы сезонов) */
.content-markup-season .season-info .series-chars.hor-l3 .s-par.cast {
  display: block;
}

.content-markup-season .season-info .series-chars.hor-l3 .s-par.cast .param.cast-crew {
  display: block;
  width: 100%;
  padding-bottom: 2px;
}

.content-markup-season .season-info .series-chars.hor-l3 .s-par.cast .param-value.cast-pv {
  display: block;
  width: 100%;
  max-width: 100%;
  text-align: start;
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  text-wrap: pretty;
}

@media (max-width: 375px) {
  .content-markup-season .season-info > .series-chars.hor-l3 {
    padding-top: 0;
    padding-bottom: 6px;
  }

  .content-markup-season .season-info .series-chars.hor-l3 .s-par:not(:first-child) {
    margin-top: 4px;
  }

  .content-markup-season .season-info .series-chars.hor-l3 .s-par.cast .param.cast-crew {
    padding-bottom: 1px;
  }
}

.content-markup-season .season-info .show-rate .mark-scale-mc,
.content-markup-season .season-info .show-rate .mark-scale-rt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  grid-template-rows: auto auto;
  grid-template-areas: "sc-title sc-mark" "sc-graph sc-graph";
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 0;
  row-gap: 5px;
  column-gap: 10px;
  align-items: end;
}

.content-markup-season .season-info .show-rate .mark-scale-mc,
.content-markup-season .season-info .show-rate .mark-scale-rt {
  margin-bottom: 0;
}

.content-markup-season .season-info .show-rate .sc-title,
.content-markup-season .season-info .show-rate .sc-mark {
  font-weight: 300;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: #fff;
}

.content-markup-season .season-info .show-rate .sc-mark {
  letter-spacing: 0.03em;
}

.content-markup-season .season-info .show-rate .sc-graph {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 7px;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 0;
  overflow: hidden;
  align-items: stretch;
}

.content-markup-season .season-info .show-rate .sc-graph > div {
  margin: 0 !important;
}

.content-markup-season .season-info .show-rate .graph-part-mc,
.content-markup-season .season-info .show-rate .graph-part-rt {
  flex: 1 1 0;
  min-width: 0;
  width: auto !important;
  height: 100% !important;
  min-height: 0;
  box-sizing: border-box;
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 0;
}

.content-markup-season .season-info .show-rate .graph-part-mc:last-child,
.content-markup-season .season-info .show-rate .graph-part-rt:last-child {
  border-right: none;
}

.content-markup-season .season-info .show-rate .graph-part-rt {
  background: #5B5B5B;
}

.content-markup-season .season-info .show-rate .graph-part-rt.gp-active-rt {
  background: #FA320A;
}

/* Доля сегмента Tomatometer (0–100%), шаг 10% на деление; --rt-pct с официальной страницы RT */
.content-markup-season .season-info .show-rate .graph-part-rt.gp-rt-partial {
  background: linear-gradient(to right, #FA320A 0%, #FA320A var(--rt-pct), #5B5B5B var(--rt-pct), #5B5B5B 100%);
}

@media (max-width: 869px) {
  .content-markup-season .season-info.seas-si-vert-l {
    padding-left: 0;
    width: 100%;
    max-width: none;
  }

  .content-markup-season .season-info > .poster-wrap,
  .content-markup-season .season-info > .series-chars {
    max-width: none;
  }

  .content-markup-season .season-info > .season-title {
    max-width: none;
  }

  .content-markup-season .season-info .show-rate .mark-scale-mc,
  .content-markup-season .season-info .show-rate .mark-scale-rt {
    max-width: 100%;
  }
}

/* ========== PLAN: единые отступы + заголовок комментариев ========== */
h2.comments-title,
.comments-title h2 {
  margin: 0 0 14px;
  color: var(--text-primary);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
}

.content-markup .main-content > .seo-section {
  margin-bottom: var(--section-gap-y);
}

.content-markup .main-content > .social-block,
.content-markup-season > .social-block,
.content-markup-series > .social-block {
  min-height: 0;
  height: auto;
  padding: var(--social-block-padding-y) 0;
  margin-top: var(--section-gap-y);
  margin-bottom: 0;
  box-sizing: border-box;
  align-items: center;
}

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

.content-markup .main-content > .comment-block,
.content-markup-season > .comment-block,
.content-markup-series > .comment-block {
  margin-top: var(--section-gap-y);
  padding-top: var(--block-padding-y);
  min-width: 0;
  max-width: 100%;
}

.content-markup-series .episode-head-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: space-between;
  column-gap: 24px;
  row-gap: 12px;
  min-width: 0;
  overflow-x: visible;
  box-sizing: border-box;
  padding-top: 14px;
  padding-bottom: 14px;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  -o-border-image: var(--border-gradient);
  border-image: var(--border-gradient);
  border-image-slice: 1;
  border-image-width: 1px 0 1px 0;
}

/* Верхняя линия уже у .main-content — не дублировать */
.content-markup-series .main-content > .episode-head-row:first-child {
  border-image-width: 0 0 1px 0;
}

@media (max-width: 870px) {
  .content-markup-series .episode-head-row {
    justify-content: center;
    align-content: flex-start;
    align-items: flex-start;
  }

  .content-markup-series .episode-head-row .user-rating {
    margin: 0;
  }
}

/* Одна линия сверху/снизу: убрать hor-l-границы у колонок (иначе «двойной» разделитель) */
.content-markup-series .episode-head-row .user-rating,
.content-markup-series .episode-head-row .series-chars {
  border: 0;
  -o-border-image: none;
  border-image: none;
  border-image-width: 0;
  border-image-slice: 0;
}

.content-markup-series .episode-head-row .user-rating {
  flex: 0 0 auto;
  flex-shrink: 0;
  height: auto;
  align-items: flex-start;
}

.content-markup-series .episode-head-row .vote-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 317px;
  max-width: 100%;
  flex-shrink: 0;
  height: auto;
  min-height: 0;
  margin-top: 0;
  box-sizing: border-box;
}

.content-markup-series .episode-head-row .vote-block .rating-text {
  position: static;
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: flex-start;
  width: 100%;
  box-sizing: border-box;
}

.content-markup-series .episode-head-row .vote-block .val-counter {
  position: static;
  top: auto;
  left: auto;
  font-size: 15px;
  font-weight: 300;
  color: var(--text-primary);
}

.content-markup-series .episode-head-row .vote-block .val-counter b {
  font-size: 15px;
  font-weight: 700;
}

.content-markup-series .episode-head-row .vote-block .rat-val {
  position: static;
  top: auto;
  right: auto;
  margin-left: auto;
  font-size: 17px;
  font-weight: 700;
}

.content-markup-series .episode-head-row .vote-block .ep-rat-max {
  position: static;
  top: auto;
  right: auto;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-muted);
}

.content-markup-series .episode-head-row .vote-block .rating {
  float: none;
  position: relative;
  width: 100%;
  max-width: 320px;
  box-sizing: border-box;
}

.content-markup-series .episode-head-row .vote-block ol.show-current {
  position: relative;
  top: auto;
  left: auto;
}

.content-markup-series .episode-head-row .series-chars {
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
  width: min(267px, 100%);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  padding-bottom: 0;
}

.content-markup-series .episode-head-row .series-chars .s-par {
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.content-markup-series .episode-head-row .series-chars .param {
  width: auto;
  text-align: right;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.content-markup-series .episode-head-row .series-chars .param-value {
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 400;
  color: var(--text-primary);
}

.content-markup-series .episode-head-row .series-chars .param-value::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  flex-shrink: 0;
  background: url(../img/calendar.svg) center / contain no-repeat;
}

/* 522–372px: дата по ширине контента (min-content), не фикс 267px; сужается блок оценки. ≤371 — колонка ниже (стык 371/372 без разрыва). */
@media (max-width: 522px) and (min-width: 372px) {
  .content-markup-series .episode-head-row {
    overflow-x: auto;
  }

  .content-markup-series .episode-head-row .series-chars.hor-l3 {
    flex: 0 0 auto;
    width: auto;
    min-width: min-content;
    max-width: 100%;
  }

  .content-markup-series .episode-head-row .user-rating {
    flex: 1 1 auto;
    min-width: 0;
    flex-shrink: 1;
  }

  .content-markup-series .episode-head-row .vote-block {
    width: 100%;
    max-width: 317px;
    flex-shrink: 1;
    --rating-star-width: clamp(18px, calc(18px + (100vw - 371px) * 8 / 150), 26px);
    --rating-star-height: clamp(18px, calc(18px + (100vw - 371px) * 8 / 150), 26px);
  }
}

@media (max-width: 371px) {
  .content-markup-series .episode-head-row {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    row-gap: 14px;
    column-gap: 0;
    overflow-x: visible;
  }

  .content-markup-series .episode-head-row .user-rating {
    align-self: center;
    width: 100%;
    max-width: min(317px, 100%);
    justify-content: center;
  }

  .content-markup-series .episode-head-row .user-rating .vote-block {
    margin-left: auto;
    margin-right: auto;
  }

  .content-markup-series .episode-head-row .series-chars.hor-l3 {
    width: 100%;
    max-width: 100%;
    align-self: center;
    align-items: center;
    text-align: center;
  }

  .content-markup-series .episode-head-row .series-chars.hor-l3 .s-par {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: 8px;
    row-gap: 4px;
  }

  .content-markup-series .episode-head-row .series-chars.hor-l3 .param {
    text-align: center;
  }

  .content-markup-series .episode-head-row .series-chars.hor-l3 .param-value {
    justify-content: center;
    white-space: normal;
  }
}

.content-markup-series .main-content > .ser-episode-title {
  margin-top: 18px;
}

.content-markup-series .main-content > .season-series-block {
  margin-top: var(--section-gap-y);
}

/* Серии в сайдбаре справа от плеера без hor-l6 — одна колонка */
.content-markup-series .season-series-block:not(.hor-l6) .series-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 10px;
}

.content-markup-series .season-series-block:not(.hor-l6) .series-row .episode-card {
  margin: 0;
  max-width: none;
  width: 100%;
  min-width: 0;
}

/* Блок hor-l6: как на странице сезона — 1 / 2 / 3 колонки по ширине; в широком сайдбаре (≥871px) — одна колонка */
@media (min-width: 871px) {
  .content-markup-series .season-series-block.hor-l6 .series-row {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 12px;
    margin-bottom: 10px;
  }

  .content-markup-series .season-series-block.hor-l6 .series-row .episode-card {
    margin: 0;
    max-width: none;
    width: 100%;
    min-width: 0;
  }
}

.content-markup-series .main-content > .seo-section {
  margin-top: var(--section-gap-y);
}

.content-markup-season > .main-content,
.content-markup-series > .main-content {
  margin-right: 18px;
}

.content-markup-season .main-content > .season-series-block {
  margin-top: var(--section-gap-y);
}

.content-markup-season .main-content > .seo-section {
  margin-top: var(--section-gap-y);
}

@media (max-width: 680px) {
  .content-markup-season .season-info .ses-rate-col .mark-scale-mc,
  .content-markup-season .season-info .ses-rate-col .mark-scale-rt {
    max-width: 100%;
  }
}

/* ========== Сезоны: компактный верх — хлебные крошки + заголовок ========== */
.content-markup-season {
  grid-template-rows: 28px 0px max-content auto max-content max-content max-content;
}

.content-markup-season .contvp {
  height: 0;
  min-height: 0;
  overflow: hidden;
}

.content-markup-season > .bread-wrap {
  height: auto;
  min-height: 0;
  align-self: stretch;
}

.content-markup-season > .page-title {
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 4px;
}

.content-markup-season > .page-title h1 {
  margin: 0;
  padding: 0;
  line-height: 1.25;
}

@media (max-width: 1000px) {
  .content-markup-season {
    grid-template-rows: 28px 0px max-content auto max-content max-content max-content;
  }
}

@media (max-width: 869px) {
  .content-markup-season {
    grid-template-rows: 24px 0px max-content max-content max-content max-content max-content max-content;
  }

  .content-markup-series {
    grid-template-rows: 24px max-content max-content auto auto auto;
  }

  .content-markup > .page-title,
  .content-markup-season > .page-title,
  .content-markup-series > .page-title {
    margin-top: 6px;
  }

  .content-markup > .page-title h1,
  .content-markup-season > .page-title h1,
  .content-markup-series > .page-title h1 {
    margin-bottom: 8px;
  }
}

@media (max-width: 768px) {
  .content-markup > .page-title,
  .content-markup-season > .page-title,
  .content-markup-series > .page-title {
    margin-top: 4px;
  }

  .content-markup > .page-title h1,
  .content-markup-season > .page-title h1,
  .content-markup-series > .page-title h1 {
    margin-bottom: 6px;
  }
}

/* После всех max-width:870px: десктопный грид ≥870px (в т.ч. ровно 870px) и закрытие subpixel (869, 870) без «дыры» у базового двухколоночника */
@media (min-width: 870px) {
  .content-markup {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 286px);
    grid-template-rows: max-content max-content;
    grid-template-areas:
      "page-title series-info"
      "main-content series-info";
    margin-top: 16px;
    max-width: 1200px;
    width: 100%;
    row-gap: unset;
  }

  .content-markup .series-info {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(5, max-content);
    grid-template-areas:
      "poster-wrap"
      "series-chars"
      "show-rate"
      "device-block"
      "quality-block";
    margin-top: 0;
    padding: 0 0 0 18px;
    row-gap: unset;
    column-gap: unset;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .content-markup .series-info.seas-si-vert-l {
    padding-left: 20px;
    box-sizing: border-box;
  }

  .content-markup-season {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 286px);
    grid-template-rows: 28px 0px max-content auto max-content max-content max-content;
    grid-template-areas:
      "bread-wrap season-info"
      "contvp season-info"
      "page-title season-info"
      "main-content season-info"
      "main-content season-desc-block"
      "social-block season-desc-block"
      "comment-block season-desc-block";
    margin-top: 16px;
  }

  .content-markup-season .season-info {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(3, -webkit-max-content);
    grid-template-rows: repeat(3, max-content);
    grid-template-areas:
      "season-title"
      "poster-wrap"
      "series-chars";
    padding: 0 0 0 18px;
    column-gap: unset;
  }

  .content-markup-series {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 286px);
    grid-template-rows: 28px max-content max-content auto auto auto;
    grid-template-areas:
      "bread-wrap     ep-ser-block"
      "page-title     ep-ser-block"
      "player-block   ep-ser-block"
      "main-content   ep-ser-block"
      "social-block   ep-ser-block"
      "comment-block  ep-ser-block";
    margin-top: 16px;
    max-width: 1200px;
    width: 100%;
  }
}

@media (min-width: 870px) and (max-width: 1000px) {
  .content-markup {
    grid-template-columns: minmax(0, 1fr) minmax(212px, 267px);
  }

  .content-markup-season {
    grid-template-columns: minmax(0, 1fr) minmax(212px, 267px);
  }
}

/* Сезон: две копии шкал в HTML — rail (≤400px) и embed (≥401px). Грид с строкой show-rate только когда виден rail. */
@media (max-width: 870px) {
  @media (max-width: 400px) {
    .content-markup-season .season-info {
      grid-template-rows: repeat(4, -webkit-max-content);
      grid-template-rows: repeat(4, max-content);
      grid-template-areas:
        "poster-wrap series-chars"
        "season-title series-chars"
        "user-rating user-rating"
        "show-rate show-rate";
    }
  }
}

@media (max-width: 400px) {
  .content-markup-season .season-info .series-chars.hor-l3 > .show-rate.show-rate--embed {
    display: none !important;
  }
}

@media (min-width: 401px) {
  .content-markup-season .season-info > .show-rate.show-rate--rail {
    display: none !important;
  }
}

/* Сезон 681–869px: оценки в series-chars (не 870 — там десктопный одноколоночный грид ≥870px). */
@media (max-width: 869px) and (min-width: 681px) {
  .content-markup-season .season-info {
    grid-template-rows: repeat(2, -webkit-max-content);
    grid-template-rows: repeat(2, max-content);
    grid-template-areas:
      "poster-wrap series-chars"
      "season-title series-chars";
  }
}

@media (max-width: 680px) {
  .content-markup-season .season-info .series-chars.hor-l3 > .user-rating.user-rating--embed {
    display: none !important;
  }
}

@media (min-width: 681px) {
  .content-markup-season .season-info > .user-rating.user-rating--rail {
    display: none !important;
  }

  /* Красный градиентный разделитель под сайдбаром сезона (не трогаем border-image слева у .seas-si-vert-l) */
  .content-markup-season .season-info.seas-si-vert-l::after {
    content: "";
    grid-column: 1 / -1;
    height: 1px;
    margin-top: 10px;
    box-sizing: border-box;
    background: var(--border-gradient);
  }
}

@media (min-width: 769px) {
  .content-markup-season,
  .content-markup-series {
    margin-top: 0;
  }
}