:root { --card:#161b22; --border:#21262d; --dim:#8b949e; }

/* Global anti-overflow */
* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
img, iframe { max-width: 100%; }

.container { max-width: 1160px; margin: 0 auto; padding: 15px; }
.content-section { background: #111418; border-radius: 12px; padding: 22px; border: 1px solid var(--border); margin-bottom: 20px; }

.header-flex{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom: 6px;
}
.header-right{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}
.main-title{
  font-size: 26px;
  font-weight: 900;
  margin:0;
  color:#fff;
  line-height:1.15;
  flex:1 1 auto;
  min-width:0;
}
/* H1 badge */
.h1-badge{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color:#c9d1d9;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.02em;
  white-space:nowrap;
}

.h1-tail{
  font-size: 12px;
  font-weight: 800;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: .02em;
  white-space:nowrap;
}
@media (max-width:900px){
  .header-flex{ flex-direction:column; align-items:flex-start; }
  .header-right{ flex-direction:column; align-items:flex-start; }
  .h1-tail, .h1-badge{ white-space:normal; }
}
.meta-subtitle{
  color: var(--dim);
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 0 0 14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.rm-breadcrumbs{ margin: 6px 0 14px; font-size: 12px; font-weight: 800; color: var(--dim); }
.rm-breadcrumbs a{ color:#58a6ff; text-decoration:none; font-weight:900; }
.rm-breadcrumbs a:hover{ text-decoration:underline; }

.section-header { display:flex; justify-content:space-between; align-items:center; margin: 10px 0; gap:10px; }
.section-header h3 { font-size: 16px; margin:0; color:#fff; }
.btn-select-all { background:none; border:none; color:#58a6ff; font-weight:900; cursor:pointer; font-size:11px; text-transform:uppercase; }

/* Episodes progress + compacted schedule */
.ep-progress{ margin: 6px 0 10px; }
.ep-progress-bar{
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
}
.ep-progress-bar span{
  display:block;
  height:100%;
  background:#3fb950;
  width:0%;
}
.ep-progress-text{
  margin-top: 4px;
  font-size: 11px;
  color: var(--dim);
  font-weight: 800;
}

/* "Aired episodes" toggle */
.btn-show-aired{
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  color:#c9d1d9;
  font-weight: 900;
  cursor: pointer;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .02em;
  padding: 8px 10px;
  border-radius: 12px;
}
.btn-show-aired:hover{ background: rgba(255,255,255,0.06); }
.season-finished{
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px 14px;
  background: rgba(63,185,80,0.08);
  color:#e6ffed;
  font-weight:900;
  margin: 10px 0 6px;
}
.ep-item.is-hidden-aired{ display:none; }

.ep-grid.show-aired .ep-item.is-hidden-aired{ display:flex; }

.ep-right{ cursor:pointer; } /* Fat finger */


.ep-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; margin-bottom:10px; content-visibility:auto; contain-intrinsic-size: 800px; }
.ep-item{
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:58px;
  overflow:hidden;
}
.ep-left{ display:flex; align-items:center; gap:10px; min-width:0; }
.ep-num{ font-weight:900; font-size:13px; color:var(--dim); width:44px; flex:0 0 44px; }
.ep-info{ min-width:0; }
.ep-name{
  font-size:13px; font-weight:800; color:#fff;
  overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap;
}
.ep-right{ display:flex; align-items:center; gap:10px; flex:0 0 auto; min-width:0; }
.ep-date{ font-size:11px; color:var(--dim); white-space:nowrap; line-height:1.1; }
.ep-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;

  font-size:10px; font-weight:900; padding:4px 8px; border-radius:999px;
  border:1px solid var(--border); background: rgba(255,255,255,0.03); color:#c9d1d9; white-space:nowrap;
}

/* Episode badge icons */
.ep-badge::before{
  display:inline-block;
  font-size:12px;
  line-height:1;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",system-ui,sans-serif;
}
.ep-item.aired .ep-badge::before{ content:"🟢"; }
.ep-item.today .ep-badge::before{ content:"🟡"; }
.ep-item.upcoming .ep-badge::before{ content:"🔵"; }

/* Slightly stronger contrast for quick scan */
.ep-item.upcoming{ background: rgba(88,166,255,0.08); }
.ep-item.aired{ background: rgba(63,185,80,0.04); }
.ep-item.aired .ep-badge{ border-color: rgba(63,185,80,.9); background: rgba(63,185,80,.12); color:#e6ffed; }
.ep-item.today .ep-badge{ border-color: rgba(250,219,20,.95); background: rgba(250,219,20,.14); color:#fff7cc; }
.ep-item.upcoming .ep-badge{ border-color: rgba(88,166,255,.9); background: rgba(88,166,255,.12); color:#e6f1ff; }
.ep-item.upcoming{ background: rgba(255,255,255,0.08); }
.ep-item.today{ background: rgba(255,255,255,0.04); border-color: rgba(250,219,20,0.9); box-shadow: 0 0 0 2px rgba(250,219,20,0.25); }
.ep-item.aired{ background: rgba(0,0,0,0.22); opacity: .92; }

.watch-check{
  appearance:none; width:18px; height:18px; border:1px solid var(--border);
  border-radius:6px; background:#0d1117; cursor:pointer; flex:0 0 18px;
}
.watch-check:checked{ background:#3fb950; border-color:#3fb950; position:relative; }
.watch-check:checked::after{ content:'✓'; position:absolute; color:#fff; top:-1px; left:4px; font-size:12px; font-weight:900; }

@media (max-width: 768px){ .ep-grid{ grid-template-columns:1fr; } }
@media (max-width: 900px){
  .ep-right{ flex-wrap: wrap; justify-content:flex-end; }
  .ep-name{ white-space: normal; overflow-wrap:anywhere; word-break:break-word; }
}

/* Hero */
.hero-compact{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  display:flex;
  gap:14px;
  align-items:flex-start;
  margin: 12px 0 14px;
  max-width:100%;
  overflow:hidden;
}
.poster-mini{ width: 120px; flex: 0 0 120px; }
.poster-mini img{ width:100%; height:auto; border-radius: 10px; border:1px solid var(--border); display:block; }
.hero-main{ flex: 1 1 auto; min-width: 0; }
.hero-topline{ display:flex; gap:10px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; margin-bottom: 8px; }

.rating-pill{
  display:inline-flex; align-items:baseline; gap:8px;
  padding:8px 10px; border-radius: 12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color:#fff; font-weight:900; white-space:nowrap;
}
.rating-pill span{ color: var(--dim); font-weight:800; font-size:11px; }
.trailer-btn{
  background:#fff; color:#000; padding:8px 14px; border-radius: 10px;
  font-weight: 900; font-size: 13px; border:none; cursor:pointer;
}

.hero-desc{
  font-size: 14px; color:#c9d1d9; line-height:1.55;
  margin: 8px 0 12px;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.hero-desc p{ margin: 0 0 10px; }
.hero-desc p:last-child{ margin-bottom: 0; }

.facts-grid{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap:10px; padding-top: 12px; border-top: 1px solid var(--border);
}
.fact-item b{
  display:block; font-size: 9px; color: var(--dim);
  text-transform: uppercase; letter-spacing:.02em;
}
.fact-item span{ display:block; font-size: 12px; font-weight: 800; color:#fff; margin-top: 2px; overflow-wrap:anywhere; word-break:break-word; }

@media (max-width: 960px){ .facts-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px){
  .hero-compact{ flex-direction:column; }
  .poster-mini{ width: 140px; flex-basis:auto; }
  .facts-grid{ grid-template-columns: 1fr; }
}

/* Cast (ONLY NEW FORMAT) */
.cast-block{
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.cast-title{
  font-weight:900;
  font-size: 11px;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing:.02em;
  margin-bottom: 8px;
}
.cast-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  max-width:100%;
}
.cast-chip{
  display:inline-flex;
  align-items:center;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color:#fff;
  font-size:12px;
  font-weight:800;

  max-width:100%;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Status */
.series-status-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  margin: 14px 0 14px;
  max-width:100%;
  overflow:hidden;
}
.series-status-title{
  color:#fff; font-weight:900; font-size:14px;
  display:flex; flex-direction:column; gap:4px; margin-bottom:10px;
}
.series-status-sub{ color: var(--dim); font-weight:700; font-size:12px; }
.series-status-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:10px; }
@media (max-width: 960px){ .series-status-grid{ grid-template-columns: repeat(2, 1fr); } }
.series-status-btn{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px;
  border-radius: 12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,0.02);
  color:#fff;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  min-width: 0;
}
.series-status-btn:hover{ background: rgba(255,255,255,0.04); transform: translateY(-1px); }
.series-status-btn.is-active{
  border-color: rgba(88,166,255,0.9);
  box-shadow: 0 0 0 2px rgba(88,166,255,0.15);
  background: rgba(88,166,255,0.08);
}
.sst-left{ display:flex; align-items:center; gap:10px; min-width:0; }
.sst-ico{ font-size:18px; line-height:1; flex:0 0 auto; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",system-ui,sans-serif; }
.sst-label{ font-weight:900; font-size:12px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:normal; line-height:1.15; }
.sst-count{
  font-weight:900; font-size:12px; color:#c9d1d9;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  padding: 3px 8px;
  border-radius: 999px;
  flex:0 0 auto;
}

/* Note */
.note-card{
  border-color: rgba(250,219,20,.55);
  background: rgba(250,219,20,.10);
}
.note-card h3{ margin:0 0 10px; }
.note-card, .note-card h3{ color:#fff; }

/* Cards */
.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 14px;
  max-width:100%;
  overflow:hidden;
}
.card h3{ font-size: 16px; color:#fff; margin:0 0 10px; }

.facts-list { list-style: none; padding: 0; margin:0; }
.facts-list li { font-size: 13px; color: #c9d1d9; margin-bottom: 10px; padding-left: 20px; position: relative; overflow-wrap:anywhere; word-break:break-word; }
.facts-list li::before { content: "•"; position: absolute; left: 0; color: #58a6ff; font-weight: bold; }

.faq-list{ display:flex; flex-direction:column; gap:10px; }
.faq-item{ border:1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: rgba(255,255,255,0.02); }
.faq-q{ font-weight: 900; font-size: 13px; color:#fff; margin:0 0 6px; overflow-wrap:anywhere; word-break:break-word; }
.faq-a{ margin:0; color:#c9d1d9; font-size: 13px; line-height: 1.55; overflow-wrap:anywhere; word-break:break-word; }

/* Related */
.related-wrap{ max-width:100%; overflow:hidden; }
.related-wrap .rel-grid{ display:flex; flex-wrap:wrap; gap:10px; max-width:100%; }
.rel-card{
  display:flex;
  gap:10px;
  align-items:stretch;
  padding:10px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,0.02);
  text-decoration:none;
  width: calc(33.333% - 7px);
  min-width: 260px;
  max-width:100%;
}
.rel-thumb{
  width: 62px;
  flex: 0 0 62px;
  border-radius:10px;
  border:1px solid var(--border);
  background: rgba(0,0,0,0.25);
  overflow:hidden;
}
.rel-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.rel-body{ min-width:0; flex: 1 1 auto; display:flex; flex-direction:column; gap:6px; }
.rel-title{
  color:#fff; font-weight:900; font-size:12px; line-height:1.2;
  overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical;
}
.rel-sub{
  color: var(--dim);
  font-weight: 900;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing:.02em;
}
@media (max-width: 1100px){ .rel-card{ width: calc(50% - 5px); } }
@media (max-width: 768px){
  .related-wrap .rel-grid{ flex-wrap:nowrap; overflow:auto; padding-bottom:6px; }
  .rel-card{ width: 300px; flex: 0 0 auto; }
}

/* extra: long content */
.hero-desc, .faq-a, .rel-title, .ep-name { overflow-wrap:anywhere; word-break:break-word; }

/* Series links (seasons/parts) */
.series-links .card-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.series-links .card-title .muted{opacity:.65;font-size:13px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips-wrap{overflow:hidden}
.chip{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);text-decoration:none;color:inherit;font-weight:600;font-size:13px;line-height:1}
.chip:hover{background:rgba(255,255,255,.09)}
.chip.is-current{background:rgba(59,130,246,.16);border-color:rgba(59,130,246,.35)}
.chip.is-missing{opacity:.55;cursor:default;pointer-events:none;background:rgba(255,255,255,.04)}
.cast-chip.more{opacity:.75}
@media(max-width:520px){
  .chip{padding:7px 10px;font-size:12px}
}

/* Micro navigation (mobile, fixed bottom) - REMOVED */


/* =========================================================
   MOBILE FIX — "СЕЗОН ЗАКОНЧЕН" + "ПОКАЗАТЬ ГРАФИК" (full width)
   ========================================================= */
@media (max-width: 600px){

  /* Header row -> stack */
  .section-header{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  /* Keep title on top */
  .section-header h3{
    width: 100%;
  }

  /* Buttons in header should be full width */
  .section-header .btn-select-all,
  .section-header .btn-show-aired{
    width: 100%;
    text-align: center;
    padding: 12px 14px;
    border-radius: 14px;
  }

  /* Progress block full width */
  .section-header .ep-progress{
    width: 100%;
  }

  /* Season finished wrap full width */
  .section-header .season-finished-wrap{
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .section-header .season-finished{
    width: 100%;
    margin: 0;
    padding: 14px 16px;
    border-radius: 14px;
    text-align: center;
    font-size: 14px;
    line-height: 1.4;
  }
}
/* ================================
   FIX: YouTube / iframe full width
   ================================ */
.video-wrap{
  width: 100%;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px; /* совпадает с карточками */
}

.video-wrap iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}
        /* IMPORTANT + RECOMMENDED row (desktop: 2 columns, mobile: stack) */
        .important-wrap{margin:18px 0 18px; display:block;}
        @media (min-width: 980px){
          .important-wrap.has-rec{display:flex;gap:18px;align-items:stretch;}
          .important-wrap.has-rec .important-card{flex:1 1 60%;}
          .important-wrap.has-rec .rec-card{flex:1 1 40%;}
        }

        /* Card look (match previous liked style) */
        .important-wrap .card{
          border-radius:18px;
          padding:18px;
          border:1px solid rgba(255,255,255,.06);
          background:rgba(20,24,31,.9);
          box-shadow:0 10px 30px rgba(0,0,0,.25);
        }

        .important-card h3,
        .rec-card h3{
          margin:0 0 10px;
          font-weight:800;
          display:flex;
          align-items:center;
          gap:10px;
          letter-spacing:.2px;
        }

        .important-card h3{
          font-size:18px;
        }

        .important-q{
          font-weight:800;
          font-size:18px;
          line-height:1.25;
        }
        .important-a{margin-top:8px;opacity:.92;line-height:1.55;}
        .important-note{margin-top:12px;opacity:.85;line-height:1.55;}

        /* Recommended accent */
        .rec-card{
          border-left:4px solid #ffb200;
          background:rgba(255,178,0,.08);
        }
        .rec-card .rec-body{line-height:1.6;}

        @media (max-width: 900px){
          .important-wrap.has-rec{display:block;}
        }