/* ---- SECTIONS ---- */
.section {
  position: relative;
  padding: 120px 0;
}
.section__header { text-align: center; margin-bottom: 64px; max-width: 800px; margin-inline: auto; }
.section__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  letter-spacing: 0.08em;
  margin-bottom: 16px;
  background: linear-gradient(180deg, var(--text-1), var(--gold-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section__subtitle {
  font-size: 1.05rem;
  color: var(--text-2);
  line-height: 1.7;
}

/* Заголовок-баннер секции: линии по бокам (сам баннер — блок BANNER ниже в этом файле) */
.section__header--banner { display: flex; align-items: center; gap: 18px; max-width: none; margin-bottom: clamp(12px, 2vh, 44px); }
.section__header--banner::before, .section__header--banner::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-1));
}
.section__header--banner::after { background: linear-gradient(270deg, transparent, var(--gold-1)); }

.about {
  position: relative;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2), var(--bg-1));
  overflow: hidden;
}
.about .container { position: relative; z-index: 2; }

.rates {
  position: relative;
  overflow: hidden;
  background: var(--bg-2);
}
.rates .container { position: relative; z-index: 2; }
.rates .section__header { margin-bottom: 48px; }

.features { background: linear-gradient(180deg, var(--bg-2), var(--bg-1)); }

.world {
  min-height: 80vh;
  display: flex; align-items: center;
  overflow: hidden;
}

.howto { position: relative; }
.howto .container { position: relative; z-index: 2; }

.news { background: var(--bg-2); }

.community {
  position: relative;
  min-height: 60vh;
  display: flex; align-items: center;
}

/* ---- LANDING BLOCKS 2–3 ---- */
.streams, .rating {
  position: relative; overflow: hidden;
  min-height: 100vh;
  display: flex; align-items: center;
  padding: calc(var(--header-h) + 1vh) 0 calc(80px + 1vh);
  background: var(--bg-1);
}
.streams .container, .rating .container {
  position: relative; z-index: 2;
  width: min(1000px, 100% - 320px);
}
.streams .section__header, .rating .section__header { margin-bottom: 40px; }

.streams__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.streams__more, .rating__more { text-align: center; margin-top: clamp(12px, 2vh, 36px); }

.section__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.section__veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse at center, rgb(var(--bg-1-rgb) / 0.35) 0%, rgb(var(--bg-1-rgb) / 0.82) 80%),
    linear-gradient(180deg, var(--bg-1) 0%, transparent 22%, transparent 78%, var(--bg-1) 100%);
}

.stream-card {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--bg-3);
  border: 1px solid rgb(var(--gold-1-rgb) / 0.3);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  transition: border-color 0.3s, transform 0.3s var(--ease), box-shadow 0.3s;
}
.stream-card:hover {
  border-color: var(--gold-2); transform: translateY(-3px);
  box-shadow: 0 0 24px rgb(var(--gold-1-rgb) / 0.35);
}
.stream-card__thumb { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.8; }
.stream-card__play {
  position: absolute; top: 50%; left: 50%; width: 44px; height: 30px; margin: -15px 0 0 -22px;
  background: #e53935; border-radius: 8px;
}
.stream-card__play::after {
  content: ''; position: absolute; top: 8px; left: 17px;
  border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
.stream-card__title {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 8px;
  font-size: 0.75rem; font-weight: 600; text-align: left;
  background: linear-gradient(0deg, rgb(var(--bg-1-rgb) / 0.9), transparent);
}
.stream-card__platform {
  position: absolute; top: 6px; right: 6px; padding: 2px 6px;
  font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase;
  background: rgb(var(--bg-1-rgb) / 0.75); color: var(--gold-2);
}

/* Рейтинг */
.rating__tabs { display: flex; justify-content: center; gap: 12px; margin-bottom: clamp(8px, 1.8vh, 24px); }
.rating__tab {
  padding: clamp(7px, 1.2vh, 10px) 28px;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em;
  color: var(--text-2);
  border: 0;
  background: rgb(var(--bg-1-rgb) / 0.6);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
  padding-inline: 34px;
  transition: all 0.25s;
}
.rating__tab.active, .rating__tab:hover { color: var(--bg-1); background: var(--gold-2); }
.rating__panel {
  position: relative;
  padding: 4px 20px 6px;
  background: rgba(10, 12, 16, 0.78); backdrop-filter: blur(8px);
  border: 1px solid rgb(var(--gold-1-rgb) / 0.25);
}
.rating__table { width: 100%; border-collapse: collapse; }
.rating__table th {
  padding: clamp(8px, 1.2vh, 12px) 10px; text-align: left;
  font-size: 0.7rem; letter-spacing: 0.1em; color: var(--gold-2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.rating__table td { padding: clamp(4px, 0.7vh, 14px) 10px; font-size: 0.9rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.rating__table tbody tr:first-child { background: linear-gradient(90deg, rgb(var(--gold-1-rgb) / 0.16), transparent); }
.rating__table tbody tr:hover { background: rgb(var(--gold-1-rgb) / 0.08); }
.rating__char { font-weight: 600; color: var(--text-1); }
.rating__score { color: var(--gold-2); font-weight: 700; }
.rank {
  display: inline-grid; place-items: center; width: clamp(22px, 3.4vh, 28px); height: clamp(22px, 3.4vh, 28px);
  font-size: 0; font-weight: 700;
  color: var(--text-2); border: 1px solid rgba(255, 255, 255, 0.15); transform: rotate(45deg);
}
.rank::after { content: attr(data-n); font-size: 0.8rem; transform: rotate(-45deg); }

/* Главная: пошаговый скролл секций */
html.landing { scroll-snap-type: y mandatory; }
.landing .hero, .landing .streams, .landing .rating { scroll-snap-align: start; }

/* ---- SECTIONS: ADAPTIVE ---- */
/* до 1279px: уже контейнер */
@media (max-width: 1279px) {
  .streams .container, .rating .container { width: min(1000px, 100% - 160px); }
}

/* до 1023px: одна колонка, без пошагового скролла */
@media (max-width: 1023px) {
  html.landing { scroll-snap-type: none; }
  .streams, .rating { min-height: auto; padding-bottom: 80px; }
  .streams__grid { grid-template-columns: repeat(2, 1fr); }
}

/* телефон */
@media (max-width: 640px) {
  .section { padding: 80px 0; }
  .streams .container, .rating .container { width: calc(100% - 2 * var(--gutter)); }
  .rating__table th:nth-child(4), .rating__table td:nth-child(4) { display: none; }
}

/* ---- RATING WIDGET ---- */
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; }
.dot--on { background: var(--success); box-shadow: 0 0 8px rgba(74, 222, 128, 0.8); }
.dot--off { background: #4b5058; }
.rating-widget .rating__tabs { flex-wrap: wrap; }
.rating-widget .rating__table th,
.rating-widget .rating__table td { white-space: nowrap; }

/* на узких экранах таблица прокручивается внутри панели */
@media (max-width: 1023px) { .rating-widget .rating__panel { overflow-x: auto; } }

/* правило «.rating__table th:nth-child(4) { display: none }» выше прячет клан на телефоне; в виджете он нужен */
@media (max-width: 640px) {
  .rating-widget .rating__table th:nth-child(4),
  .rating-widget .rating__table td:nth-child(4) { display: table-cell; }
}

/* ---- BANNER: баннер заголовка (секции, рейтинг, заголовки wiki): концы из banner-end.svg, середина — тёмный градиент с золотыми линиями ---- */
.banner {
  --e: 48px;
  --end: url('/design/assets/ornaments/banner-end.svg');
  position: relative; text-align: center;
  padding: clamp(4px, 1vh, 12px) calc(var(--e) + 24px);
  border: 0; border-radius: 0;
  background:
    linear-gradient(var(--line-light), var(--line-light)) center top / calc(100% - 2 * var(--e) + 2px) 2px no-repeat,
    linear-gradient(var(--line-dark), var(--line-dark)) center bottom / calc(100% - 2 * var(--e) + 2px) 2px no-repeat,
    linear-gradient(180deg, var(--plate-1), var(--plate-2)) center / calc(100% - 2 * var(--e) + 2px) 100% no-repeat;
}
.banner::before, .banner::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0;
  width: var(--e);
  background: var(--end) center / 100% 100% no-repeat;
  pointer-events: none;
}
.banner::after { left: auto; right: 0; transform: scaleX(-1); }
.banner .section__title { margin: 0; background: none; color: var(--text-1); -webkit-text-fill-color: var(--text-1); font-size: clamp(1.5rem, 3vw, 2rem); text-shadow: 0 0 24px rgb(var(--gold-1-rgb) / 0.35); }
.banner .section__subtitle { font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-2); }

/* ---- FRAME: вензеля по углам панелей (стримы, рейтинг, попап, строки скачивания, панель стадий, панель кабинета): готовая 9-slice рамка из frame.svg ---- */
.stream-card::after, .rating__panel::after, .modal__dialog::after, .dl-row::after, .side-item::after, .cms-content::after {
  content: ''; position: absolute; inset: -1px; z-index: 3; pointer-events: none;
  border: 18px solid transparent;
  border-image: url('/design/assets/ornaments/frame.svg') 22 / 18px stretch;
}