/* Manrope — геометричний гротеск, найближчий із доступних до шрифту заставки
   серіалу: ті самі круглі «О», однакова товщина штриха, схожі пропорції
   великих літер.
   Чому саме він, а не інші кандидати:
     Montserrat  — за формою найближчий, але грецької в ньому немає взагалі,
                   а на сторінці є оригінальна назва серіалу;
     Jost        — немає українських «Ї» та «І»;
     Sofia Sans  — кирилиця за замовчуванням болгарська: «д» як «g», «т» як
                   «m». Перемикається лише на lang="ru", що тут не годиться.
   Файл один на підмножину і містить усю вісь насиченості (200–800), тож
   окремого файлу під жирне накреслення не треба. Разом близько 49 КБ, причому
   грецька підмножина завантажується лише заради одного рядка з оригінальною
   назвою — і лише тоді, коли він справді є на сторінці.
   Ліцензія OFL, текст поруч у assets/fonts/OFL.txt. Тримаємо локально, без
   CDN: сторонніх запитів на сторінці й так мінімум. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/manrope-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/manrope-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
                 U+03A3-03FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}

:root {
  --bg: #12100e;
  --surface: #1c1916;
  --text: #ece6dd;
  --muted: #9c9388;
  /* Колір узятий піпеткою з титрів серіалу — теплий бурштин, а не золото.
     На тлі сторінки дає контраст близько 6:1. */
  --accent: #c6794e;
  --border: #2e2924;
  --radius: 10px;
  --font: 'Manrope', system-ui, sans-serif;

  /* Загальна підкладка під фонове фото. Зверху вона майже прозора: за
     читабельність заголовка відповідає окрема пляма під ним (.hero::before),
     а тут завдання інше — довести кадр донизу до суцільного кольору тла,
     щоб фото непомітно переходило в сторінку. */
  --scrim: linear-gradient(
    to bottom,
    rgba(18, 16, 14, .14) 0%,
    rgba(18, 16, 14, .22) 46%,
    rgba(18, 16, 14, .62) 80%,
    #12100e 100%
  );
}

* { box-sizing: border-box; }

/* Тло на html, а не на body: інакше псевдоелемент із фото, відсунутий
   за z-index, ховається саме за тлом body. */
html { background: var(--bg); }

body {
  position: relative;
  margin: 0;
  padding: 0 1.25rem 4rem;
  color: var(--text);
  font: 17px/1.65 var(--font);
}

/* Кадр із заставки серіалу: силует святого, у який вписано гору.
   Ширина фото — вся ширина вікна, а висота смуги дорівнює висоті самого
   фото (620/1920 ≈ 32.3%). Тому обрано «100% auto», а не «cover»: при
   «cover» на високих екранах кадр довелося б різати з боків, а саме там
   розведені руки — те, заради чого цей кадр і взято. Нижче фото смуга
   переходить у суцільний колір тла, і шов непомітний, бо низ кадру майже
   чорний. */
body::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: min(32.3vw, 34rem);
  background: var(--scrim), url("hero.jpg") center top / 100% auto no-repeat;
}

/* На вузькому екрані смуга такої пропорції звузилася б до кількох
   сантиметрів, тож там інший кадр — вужчий, обрізаний по центру, — і він
   уже заповнює смугу цілком. */
@media (max-width: 640px) {
  body::before {
    height: min(64vh, 24rem);
    background: var(--scrim), url("hero-960.jpg") center top / cover no-repeat;
  }
}

body > * { max-width: 62rem; margin-inline: auto; }

.hero { position: relative; padding: 3.5rem 0 1rem; text-align: center; }

/* Затемнення саме під заголовком, а не по всій смузі. Загальна підкладка,
   достатня для контрасту над найсвітлішою частиною кадру, гасила б і краї
   з розведеними руками — а вони тут головне. Тому кадр лишається майже
   неторканим, а темніє тільки пляма під текстом. Овал розтягнутий по
   горизонталі й розмитий до країв, тож межі його не видно. */
.hero::before {
  content: "";
  position: absolute;
  inset: -3rem -1rem -6rem;
  z-index: -1;
  /* closest-side, а не відсотки: при відсотках радіус легко виходить за
     коробку, градієнт обрізається її краєм — і замість м'якої плями видно
     чіткий прямокутник. З closest-side згасання завершується рівно на межі
     з усіх боків, тож країв не видно взагалі. */
  background: radial-gradient(
    closest-side at 50% 50%,
    rgba(14, 12, 10, .93) 0%,
    rgba(14, 12, 10, .89) 58%,
    rgba(14, 12, 10, .46) 85%,
    rgba(14, 12, 10, 0) 100%
  );
}

/* Підстраховка на випадок, якщо фото не завантажиться або під текстом
   опиниться світліша ділянка кадру. */
.hero h1,
.original,
.meta { text-shadow: 0 1px 14px rgba(0, 0, 0, .6); }

/* Заголовок повторює титульну картку серіалу: великі літери, ненажирне
   накреслення, розріджені букви, бурштиновий колір — і другий рядок
   дрібним шрифтом із широкими проміжками. */
.hero h1 {
  margin: 0;
  font-weight: 400;
  line-height: 1.1;
}

.title-name {
  display: block;
  color: var(--accent);
  font-size: clamp(1.8rem, 5.4vw, 3.1rem);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.title-sub {
  display: block;
  margin-top: .85rem;
  color: #c08d6c;
  font-size: clamp(.68rem, 1.5vw, .8rem);
  letter-spacing: .32em;
  /* Розрідження додає порожнечу праворуч від останньої літери; відступ
     ліворуч повертає рядок у оптичний центр. */
  text-indent: .32em;
  text-transform: uppercase;
}

.original {
  margin: 1.1rem 0 0;
  /* Світліше за --muted: цей рядок лежить на фото, а не на рівному тлі. */
  color: #cbc3b9;
  font-size: .95rem;
  letter-spacing: .04em;
}

.meta {
  margin: .4rem 0 0;
  color: #cbc3b9;
  font-size: .78rem;
  letter-spacing: .14em;
  text-indent: .14em;
  text-transform: uppercase;
}

.about { padding: 1rem 0 2.5rem; color: #cdc5ba; }
.about p { margin: 0 0 1rem; }

/* Портрет виконавця головної ролі. Обтікання, а не сітка: так розмітка не
   залежить від кількості абзаців опису й не зламається, якщо текст змінять. */
.portrait { margin: 0 0 1.5rem; }

.portrait img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.portrait figcaption {
  margin-top: .5rem;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.45;
}

@media (min-width: 760px) {
  .portrait {
    float: right;
    width: 15rem;
    margin: .25rem 0 1.25rem 2rem;
  }

  /* Щоб таблиця фактів не залазила під портрет. */
  .facts { clear: both; }
}

.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .4rem 1.25rem;
  margin: 2rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: .9rem;
}

.facts dt { color: var(--muted); }
.facts dd { margin: 0; }

@media (max-width: 520px) {
  .facts { grid-template-columns: 1fr; gap: 0; }
  .facts dt { margin-top: .8rem; }
}

/* Форма пароля */
.gate {
  padding: 3rem 1.5rem;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Заголовки розділів — у тій самій манері, що й титульна картка:
   великі літери й розріджені букви, без окремої гарнітури. */
.gate h2 {
  margin: 0 0 .5rem;
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.gate p { margin: 0 0 1.5rem; color: var(--muted); }

#gate-form { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }

input, select, button {
  font: inherit;
  padding: .6rem .9rem;
  color: var(--text);
  background: #15120f;
  border: 1px solid var(--border);
  border-radius: 6px;
}

button { cursor: pointer; }
button:hover { border-color: var(--accent); }

#gate-form button, #error-retry, #resume-continue {
  color: #17130c;
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}

.error { color: #e2725b; }

.error-panel {
  padding: 2rem;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Атрибут hidden інакше не діє на елементи, яким автор задав display.
   Правило браузера [hidden]{display:none} програє будь-якому авторському
   стилю, тож смуга продовження показувалася б і тоді, коли має бути схована. */
[hidden] { display: none !important; }

/* Плеєр */
/* Прокручування до плеєра лишає над ним просвіт: інакше кадр упирався б
   у самий край екрана. */
.player-panel { scroll-margin-top: 1rem; }
.video-wrap { background: #000; border-radius: var(--radius); overflow: hidden; }
video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }

/* Смуга продовження стоїть під рядком керування, а не поверх відео:
   накладка перекривала кадр і сперечалася з нативними контролами. */
.resume-bar {
  display: flex;
  gap: .75rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 1rem;
  padding: .7rem .9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.resume-bar span {
  margin-right: auto;
  color: var(--muted);
  font-size: .9rem;
}

.controls {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 1.25rem 0 .5rem;
}

.controls h2 {
  margin: 0;
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.selects { display: flex; gap: 1rem; flex-wrap: wrap; align-items: end; }
.selects label { display: grid; gap: .3rem; font-size: .8rem; color: var(--muted); }

/* Завантаження серії. Оформлене як другорядна кнопка: дія корисна, але
   не основна — основна тут увімкнути перегляд. */
.download {
  padding: .6rem .9rem;
  color: var(--text);
  background: #15120f;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: .9rem;
  text-decoration: none;
  white-space: nowrap;
}

.download:hover { color: var(--accent); border-color: var(--accent); }

.notice { margin: 0 0 1rem; color: var(--accent); font-size: .9rem; }

/* Сезони й серії */
.season-tabs { display: flex; gap: .5rem; margin: 2rem 0 1rem; }

.season-tabs button {
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.season-tabs button[aria-selected="true"] {
  color: var(--accent);
  border-color: var(--accent);
}

.episode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Опора для значка завантаження в кутку постера. */
.episode-grid > li { position: relative; }

.card-download {
  position: absolute;
  top: .5rem;
  right: .5rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  color: var(--text);
  /* Напівпрозора підкладка: постер під значком щоразу інший, і без неї
     стрілка губилася б на світлих кадрах. */
  background: rgba(18, 16, 14, .78);
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: 1.05rem;
  line-height: 1;
  text-decoration: none;
}

.card-download:hover,
.card-download:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(18, 16, 14, .95);
}

.episode-card {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.episode-card[aria-current="true"] { border-color: var(--accent); }
.episode-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.episode-card .body { padding: .6rem .75rem .75rem; }

.episode-card .num {
  color: var(--muted);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.episode-card .name { display: block; margin-top: .15rem; }

/* Коли назви серії немає, номер лишається єдиним підписом — і стає
   головним рядком картки замість дрібної службової позначки. */
.episode-card .body.solo .num {
  color: var(--text);
  font-size: .95rem;
  letter-spacing: .06em;
}

.bar { height: 3px; background: var(--border); }
.bar span { display: block; height: 100%; background: var(--accent); }

.watched .num::after { content: " · переглянуто"; color: var(--accent); }

footer { padding-top: 3rem; color: var(--muted); font-size: .85rem; text-align: center; }

@media (max-width: 520px) {
  .controls { flex-direction: column; align-items: stretch; }
}