/* Регистрация нужна, чтобы круг прогресса плавно докручивался */
@property --xp { syntax: "<percentage>"; inherits: false; initial-value: 0%; }

:root {
  --ink: #07060b;
  --surface: #14121b;
  --raise: #211e2b;
  --line: rgba(255, 255, 255, .11);
  --text: #fff;
  --mute: #aaa6b7;

  --accent: #fff;
  --accent-hover: #e4e2ea;
  --on-accent: #000;
  --ease-out: cubic-bezier(.2, .8, .2, 1);

  --score-high: #6fdc8c;
  --score-mid: #f2c14e;
  --danger: #ff8f85;

  /* Шрифт сайта меняется здесь */
  --font: "Golos Text", Tahoma, Arial, sans-serif;

  --gutter: clamp(1.5rem, 4vw, 4rem);
  --r-card: .75rem;
  --r-small: .375rem;
  --top-h: 5rem;
  --card-land: 21.75rem;
}

*, *::before, *::after { box-sizing: border-box; }
/* Весь размер сайта задаётся здесь: 110% = тот же вид, что зум браузера 110% */
html {
  font-size: 110%;
  scroll-behavior: smooth; scroll-padding-top: calc(var(--top-h) + 1rem);
  scrollbar-width: none; /* страница крутится, но полосы прокрутки нет */
  -webkit-user-select: none; user-select: none;
}
html::-webkit-scrollbar { display: none; }
html.is-locked { overflow: hidden; }
input { -webkit-user-select: text; user-select: text; }
img { -webkit-user-drag: none; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font: 400 .9375rem/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: .125rem solid #fff; outline-offset: .125rem; border-radius: .25rem; }

.icon { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.skip { position: fixed; left: 1rem; top: -3.75rem; z-index: 100; background: #fff; color: #000; padding: .5rem .875rem; border-radius: .375rem; }
.skip:focus { top: .75rem; }

/* ---------- Шапка ---------- */
.top {
  position: fixed; inset: 0 0 auto; z-index: 40;
  height: var(--top-h);
  display: flex; align-items: center; gap: 2.25rem;
  padding: 0 var(--gutter);
  background: linear-gradient(rgba(7, 6, 11, .72), rgba(7, 6, 11, 0));
  transition: background-color .25s;
}
.top.is-stuck { background: rgba(7, 6, 11, .9); backdrop-filter: blur(.875rem); box-shadow: 0 1px 0 var(--line); }

.brand { display: inline-flex; align-items: center; gap: .6875rem; }
.brand__mark { width: 2.25rem; height: 2.25rem; background: var(--accent); border-radius: .1875rem; }
.brand__name { font-size: 1.375rem; font-weight: 700; letter-spacing: -.01em; }

.top__nav { display: flex; gap: 1.75rem; font-size: 1rem; font-weight: 500; }
.top__nav a { color: rgba(255, 255, 255, .78); display: inline-flex; align-items: center; gap: .4375rem; transition: color .15s; }
.top__nav a:hover { color: #fff; }
.top__nav .icon { display: none; } /* иконки нужны только в нижней панели на телефоне */

.top__right { margin-left: auto; display: flex; align-items: center; gap: .875rem; height: 2.75rem; }
.search-btn {
  height: 2.75rem; padding: 0 1.125rem 0 .875rem;
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .9375rem; font-weight: 600;
  background: rgba(255, 255, 255, .12); border-radius: 1.375rem;
  transition: background-color .15s;
}
.search-btn:hover { background: rgba(255, 255, 255, .22); }
.search-btn .icon { width: 1.25rem; height: 1.25rem; }

.btn-login { height: 2.75rem; padding: 0 1.375rem; background: #fff; color: #000; font-size: .9375rem; font-weight: 600; border-radius: 1.375rem; transition: background-color .15s; }
.btn-login:hover { background: #e4e2ea; }
.account { position: relative; }
.profile { display: block; border-radius: 50%; }

/* ---------- Поиск на весь экран ---------- */
.finder {
  width: 100vw; height: 100vh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: hidden;
  color: #fff; background: rgba(10, 9, 14, .9);
  backdrop-filter: blur(.875rem);
}
.finder::backdrop { background: transparent; }
.finder[open] { animation: finder-fade .22s ease; }
@keyframes finder-fade { from { opacity: 0; } to { opacity: 1; } }
.finder__col {
  display: flex; flex-direction: column; gap: 1.25rem;
  width: min(33.75rem, calc(100vw - 3rem)); height: 100%;
  margin: 0 auto; padding-top: 3.75rem;
}
.finder[open] .finder__col { animation: finder-rise .3s var(--ease-out); }
@keyframes finder-rise { from { translate: 0 -.875rem; } to { translate: 0 0; } }
.finder__field { flex: none; display: flex; align-items: center; gap: .875rem; height: 3.875rem; padding: 0 .875rem 0 1.5rem; background: rgba(255, 255, 255, .08); border-radius: 1.9375rem; transition: background-color .15s; }
.finder__field:focus-within { background: rgba(255, 255, 255, .12); }
.finder__field input { flex: 1; min-width: 0; height: 100%; color: #fff; font: 500 1.125rem var(--font); background: none; border: 0; outline: 0; }
.finder__field input::placeholder { color: var(--mute); font-weight: 400; }
.finder__field input::-webkit-search-cancel-button { display: none; }
.finder__close { width: 2.625rem; height: 2.625rem; display: grid; place-items: center; border-radius: 50%; color: var(--mute); transition: background-color .15s, color .15s; }
.finder__close:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.finder__close .icon { width: 1.625rem; height: 1.625rem; }
.finder__results {
  flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 2.5rem;
  scrollbar-width: none;
}
.finder__results::-webkit-scrollbar { display: none; }
.finder__label { color: var(--mute); margin: 0 0 .75rem; }
.finder__label:not(:first-child) { margin-top: 1.375rem; }
.finder__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.hit {
  display: grid; grid-template-columns: 4.375rem minmax(0, 1fr); gap: 1rem; align-items: center;
  margin-bottom: .5rem; padding: .5rem 1rem .5rem .5rem;
  background: rgba(255, 255, 255, .07); border-radius: .875rem;
  transition: background-color .15s;
  animation: hit-in .3s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 35ms);
}
@keyframes hit-in { from { opacity: 0; translate: 0 .5rem; } to { opacity: 1; translate: 0 0; } }
.hit:hover, .hit:focus-visible { background: rgba(255, 255, 255, .13); }
.hit img { width: 4.375rem; height: 6.125rem; object-fit: cover; border-radius: .625rem; }
.hit strong { display: block; font-weight: 500; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hit__alt { display: block; color: var(--mute); font-size: .8125rem; margin-top: .125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hit__pills { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .625rem; }
.hit__pill { display: inline-flex; align-items: center; gap: .3125rem; height: 1.625rem; padding: 0 .625rem; font-size: .8125rem; font-weight: 600; background: rgba(255, 255, 255, .09); border-radius: .8125rem; }
.hit__pill .icon { width: .8125rem; height: .8125rem; color: var(--score-high); }
.hit--user { grid-template-columns: 3.5rem minmax(0, 1fr); align-items: center; padding: .75rem 1rem; }
.hit--user .ava { --size: 3.25rem; }
.finder__empty { color: var(--mute); padding: .5rem 0; }

/* ---------- Баннер ---------- */
.hero {
  position: relative; overflow: hidden;
  height: clamp(40rem, 100vh, 58.75rem);
  display: flex; align-items: flex-end;
}
.hero__media, .hero__media > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 60%; }
.hero__video { opacity: 0; transition: opacity 1s ease; }
.hero.is-playing .hero__video { opacity: 1; }
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--ink) 0, rgba(7, 6, 11, .86) 16%, rgba(7, 6, 11, 0) 46%),
    linear-gradient(to right, rgba(7, 6, 11, .88) 0, rgba(7, 6, 11, .5) 34%, rgba(7, 6, 11, 0) 60%);
}
.hero__jp {
  position: absolute; right: var(--gutter); top: calc(var(--top-h) + 1.75rem);
  writing-mode: vertical-rl;
  font: 500 min(4.2vw, 5.8vh)/1 "Noto Serif JP", "Yu Mincho", serif;
  letter-spacing: .14em;
  text-shadow: 0 .125rem 1.875rem rgba(7, 6, 11, .7);
}
.hero__body {
  position: relative; z-index: 2;
  padding: 0 var(--gutter) clamp(10rem, 21vh, 12.25rem);
  max-width: min(50rem, 66vw);
}
.hero__title {
  font-size: clamp(2.125rem, 3.4vw, 3rem); font-weight: 700; line-height: 1.1;
  letter-spacing: -.015em; text-wrap: balance;
  margin-bottom: 1rem;
}
.hero__meta { display: flex; flex-wrap: wrap; align-items: center; font-size: 1rem; font-weight: 500; }
.hero__meta > span:not(:last-child)::after { content: "|"; margin: 0 .75rem; color: rgba(255, 255, 255, .45); font-weight: 400; }
.hero__meta .score { color: var(--score-high); }
.hero__desc { max-width: 62ch; margin-top: .875rem; font-size: 1rem; line-height: 1.5; color: rgba(255, 255, 255, .88); }
.hero__actions { display: flex; align-items: center; gap: .75rem; margin-top: 1.375rem; }
.hero__body > * { animation: hero-in .7s var(--ease-out) both; }
.hero__body > :nth-child(2) { animation-delay: .08s; }
.hero__body > :nth-child(3) { animation-delay: .16s; }
.hero__body > :nth-child(4) { animation-delay: .24s; }
@keyframes hero-in { from { opacity: 0; translate: 0 1.125rem; } to { opacity: 1; translate: 0 0; } }

.btn {
  height: 3.25rem; padding: 0 1.75rem;
  display: inline-flex; align-items: center; gap: .5625rem;
  font-size: 1rem; font-weight: 600; border-radius: 1.625rem;
  transition: background-color .15s, scale .12s;
}
.btn:active, .btn-login:active, .search-btn:active { scale: .97; }
.btn .icon { width: 1.25rem; height: 1.25rem; }
.btn--watch { background: var(--accent); color: var(--on-accent); padding-left: 1.375rem; }
.btn--watch:hover { background: var(--accent-hover); }
.btn--ghost { background: rgba(255, 255, 255, .15); backdrop-filter: blur(.625rem); }
.btn--ghost:hover { background: rgba(255, 255, 255, .26); }
.btn--small { height: 2.75rem; padding: 0 1.25rem; font-size: .9375rem; border-radius: 1.375rem; }

.save {
  width: 3.25rem; height: 3.25rem; display: grid; place-items: center; border-radius: 50%;
  background: rgba(255, 255, 255, .15); backdrop-filter: blur(.625rem);
  transition: background-color .15s, color .15s;
}
.save:hover { background: rgba(255, 255, 255, .26); }
.save[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.save[aria-pressed="true"] .icon { fill: currentColor; }
.save--card { position: absolute; z-index: 3; top: .5rem; right: .5rem; width: 2.125rem; height: 2.125rem; background: rgba(7, 6, 11, .68); opacity: 0; transition: opacity .15s, background-color .15s, color .15s; }
.save--card .icon { width: 1.0625rem; height: 1.0625rem; }
.card:hover .save--card, .save--card:focus-visible, .save--card[aria-pressed="true"] { opacity: 1; }

.hero__controls { position: absolute; z-index: 2; right: var(--gutter); bottom: clamp(10rem, 21vh, 12.25rem); display: flex; gap: .625rem; }
.round {
  width: 3.25rem; height: 3.25rem; display: grid; place-items: center; border-radius: 50%;
  background: rgba(255, 255, 255, .15); backdrop-filter: blur(.625rem);
  transition: background-color .15s, color .15s;
}
.round:hover { background: rgba(255, 255, 255, .26); }
.round[hidden] { display: none; }
.round--sound .sound-on { display: none; }
.round--sound[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.round--sound[aria-pressed="true"] .sound-on { display: block; }
.round--sound[aria-pressed="true"] .sound-off { display: none; }

/* ---------- Секции ---------- */
.block { padding: 0 0 clamp(3.25rem, 5vw, 4.5rem); }
.block--continue { position: relative; z-index: 3; margin-top: -8rem; padding-bottom: 3.5rem; }
.block__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1.125rem;
  padding: 0 var(--gutter); margin-bottom: 1rem;
}
.block__head h2 { font-size: 1.625rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.block__sub { color: var(--mute); font-size: .8125rem; margin-top: .125rem; }
.block__head--flush { padding: 0; margin-bottom: 1.25rem; }
.seg { position: relative; display: inline-flex; flex: none; gap: .125rem; padding: .1875rem; background: rgba(255, 255, 255, .08); border-radius: 1.125rem; }
.seg__thumb { position: absolute; left: 0; top: .1875rem; bottom: .1875rem; background: #fff; border-radius: .9375rem; transition: transform .32s var(--ease-out), width .32s var(--ease-out); }
.seg.is-static .seg__thumb { transition: none; }
.seg button { position: relative; z-index: 1; height: 1.875rem; padding: 0 .8125rem; border-radius: .9375rem; color: rgba(255, 255, 255, .78); font-size: .875rem; font-weight: 500; transition: color .2s; }
.seg button:hover { color: #fff; }
.seg button[aria-pressed="true"] { color: #000; }
.seg--wide { flex: none; display: flex; padding: .3125rem; border-radius: 1.5rem; }
.seg--wide .seg__thumb { top: .3125rem; bottom: .3125rem; border-radius: 1.1875rem; }
.seg--wide button { height: 2.375rem; padding: 0 1rem; font-size: .9375rem; border-radius: 1.1875rem; }

.arrows { display: flex; flex: none; gap: .375rem; }
.arrow { width: 2.375rem; height: 2.375rem; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .09); transition: background-color .15s, opacity .15s; }
.arrow:hover:not(:disabled) { background: rgba(255, 255, 255, .2); }
.arrow:disabled { opacity: .3; cursor: default; }
.arrow .icon { width: 1.125rem; height: 1.125rem; }

.rail {
  display: flex; gap: .875rem; overflow-x: auto;
  padding: .5rem var(--gutter) .375rem; margin-top: -.25rem;
  scrollbar-width: none; cursor: grab;
}
.rail.is-dragging { cursor: grabbing; }
.rail.is-dragging * { pointer-events: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { flex: none; }

/* Появление при прокрутке, карточки идут друг за другом */
.has-reveal .rail > *, .has-reveal .grid > *, .has-reveal .week > *, .has-reveal .block__head, .has-reveal .pick, .has-reveal .leaders {
  transition: opacity .55s ease, translate .55s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 45ms);
}
.has-reveal .rail:not(.is-in) > *, .has-reveal .grid:not(.is-in) > *, .has-reveal .week:not(.is-in) > *, .has-reveal .block__head:not(.is-in), .has-reveal .pick:not(.is-in), .has-reveal .leaders:not(.is-in) {
  opacity: 0; translate: 0 1.25rem;
}

/* ---------- Карточки ---------- */
.card { position: relative; display: block; }
.card__link { display: block; border-radius: var(--r-card); }
.card__link::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--r-card); }
.card__media { position: relative; overflow: hidden; border-radius: var(--r-card); background: var(--raise); transition: translate .25s var(--ease-out), box-shadow .25s; }
.card:hover .card__media { translate: 0 -.25rem; box-shadow: 0 .875rem 1.875rem rgba(0, 0, 0, .5); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.card:hover .card__media img { transform: scale(1.04); }
.card__title { font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.card__meta { color: var(--mute); font-size: .8125rem; margin-top: .1875rem; }
.score { font-weight: 700; color: var(--mute); }
.score--high { color: var(--score-high); }
.score--mid { color: var(--score-mid); }

/* Горизонтальная карточка: продолжить просмотр и новинки */
.c-land { width: var(--card-land); }
.c-land .card__media { aspect-ratio: 16 / 9; }
.c-land .card__title { margin-top: .625rem; -webkit-line-clamp: 1; }
.c-land__play {
  position: absolute; z-index: 1; left: 50%; top: 50%; translate: -50% -50%;
  width: 3.25rem; height: 3.25rem; display: grid; place-items: center; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: #000; opacity: 0; transition: opacity .15s;
}
.c-land:hover .c-land__play { opacity: 1; }
.tag { position: absolute; z-index: 1; left: .625rem; top: .625rem; background: var(--accent); color: var(--on-accent); font-size: .8125rem; font-weight: 600; padding: .125rem .5625rem; border-radius: .3125rem; }
.c-land__meta { display: flex; gap: .625rem; }

/* Последняя карточка ленты: переход ко всем новинкам */
.c-all .card__media {
  display: grid; place-content: center; justify-items: center; gap: .75rem;
  background: linear-gradient(135deg, #2c2835 0%, #17151e 55%, #07060b 100%);
  box-shadow: inset 0 0 0 1px var(--line);
}
.c-all__arrow { width: 3.375rem; height: 3.375rem; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .12); transition: background-color .15s, color .15s, translate .2s; }
.c-all:hover .c-all__arrow { background: var(--accent); color: var(--on-accent); translate: .25rem 0; }
.c-all__label { font-weight: 600; }

/* Вертикальная карточка */
.c-post .card__media { aspect-ratio: 425 / 600; }
.c-post .card__title { margin-top: .625rem; }
.badge { position: absolute; z-index: 1; left: .5rem; top: .5rem; padding: 1px .4375rem; border-radius: var(--r-small); background: rgba(7, 6, 11, .82); font-size: .8125rem; }
.c-post--rail { width: 12.25rem; }
.grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1.625rem .875rem; padding: .25rem var(--gutter) 0; }

/* ---------- Топ по уровню ---------- */
.leaders { margin: 0 var(--gutter); padding: 1.625rem 1.75rem 1.75rem; background: var(--surface); border-radius: 1.125rem; }
.leaders__body { display: grid; grid-template-columns: 3fr 2fr; gap: 1.75rem; align-items: end; }

/* Колонки выезжают снизу: сначала третье место, затем второе и первое */
.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; align-items: end; overflow: hidden; }
.podium__user {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 1.375rem .75rem 1.125rem; border-radius: .875rem .875rem 0 0; background: var(--raise);
  translate: 0 101%;
  transition: translate .8s var(--ease-out);
}
.leaders__body.is-in .podium__user { translate: 0 0; }
.podium__user--3 { min-height: 13rem; transition-delay: 0s; }
.podium__user--2 { min-height: 15.625rem; transition-delay: .12s; }
.podium__user--1 { min-height: 18.625rem; padding-top: 1.875rem; background: linear-gradient(to bottom, rgba(255, 255, 255, .17), var(--raise) 72%); transition-delay: .24s; }
.podium__rank { position: absolute; left: .875rem; top: .625rem; font-size: 1.625rem; font-weight: 700; line-height: 1; color: rgba(255, 255, 255, .34); }
.podium__user--1 .podium__rank { color: var(--accent); }
.podium__name { font-weight: 600; font-size: 1rem; margin-top: 1rem; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.podium__sub { color: var(--mute); font-size: .8125rem; margin-top: .125rem; }

/* Аватар: круг докручивается по часовой, цифра уровня заходит на круг */
.ava {
  --size: 4rem; --xp: 0%;
  position: relative; flex: none; width: var(--size); height: var(--size); padding: .1875rem;
  border-radius: 50%;
  background: conic-gradient(var(--accent) var(--xp), rgba(255, 255, 255, .16) 0);
  transition: --xp 1.3s var(--ease-out) .35s;
}
.ava.is-on { --xp: var(--xp-to); }
.ava > span:first-child { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; border: .125rem solid var(--surface); font-size: calc(var(--size) * .36); font-weight: 700; line-height: 1; color: #000; }
.ava__lvl {
  position: absolute; left: 50%; bottom: -.375rem; translate: -50% 0;
  min-width: 1.375rem; height: 1.125rem; padding: 0 .3125rem;
  display: grid; place-items: center;
  color: #000; background: #fff; font-size: .6875rem; font-weight: 700; line-height: 1;
  border-radius: .5625rem; box-shadow: 0 0 0 .125rem var(--surface);
}
.profile .ava { --size: 2.75rem; padding: .125rem; }
.podium__user .ava { --size: 4.75rem; }
.podium__user--1 .ava { --size: 6rem; }
.podium__user .ava__lvl { height: 1.375rem; min-width: 1.75rem; font-size: .8125rem; border-radius: .6875rem; bottom: -.5rem; box-shadow: 0 0 0 .125rem var(--raise); }

/* Строки списка появляются сверху вниз */
.ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.ladder li {
  display: grid; grid-template-columns: 1.375rem 2.75rem 1fr auto; align-items: center; gap: .75rem; padding: 0 .375rem .25rem;
  opacity: 0; translate: 0 -.875rem;
  transition: opacity .45s ease, translate .45s var(--ease-out);
  transition-delay: calc(.35s + var(--i, 0) * 90ms);
}
.leaders__body.is-in .ladder li { opacity: 1; translate: 0 0; }
.ladder__rank { font-size: 1rem; font-weight: 700; color: var(--mute); }
.ladder .ava { --size: 2.75rem; padding: .125rem; }
.ladder__name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ladder__sub { color: var(--mute); font-size: .8125rem; white-space: nowrap; }
.ladder li.ladder__you { display: block; border-top: 1px solid var(--line); padding-top: .75rem; color: var(--mute); }
.link-btn { color: #fff; font-weight: 500; text-decoration: underline; text-underline-offset: .1875rem; }

/* ---------- Жанры: плитка как страница манги из трёх косых панелей ---------- */
.genre {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  width: 21rem; height: 12.5rem;
  background: #000; border-radius: 1rem;
}
.genre__panels { position: absolute; inset: 0 -1.75rem; display: flex; gap: .3125rem; }
.genre__panel {
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden;
  transform: skewX(-9deg);
  transition: flex-grow .45s var(--ease-out);
}
.genre__panel img {
  position: absolute; top: 0; left: 50%; width: 21rem; height: 100%; max-width: none;
  object-fit: cover;
  transform: translateX(-50%) skewX(9deg) scale(1.2);
  filter: saturate(.9) brightness(.82);
  transition: filter .35s, transform .6s var(--ease-out);
}
/* Панель под курсором расширяется и становится ярче, как крупный план */
.genre__panel:hover { flex-grow: 2.6; }
.genre__panel:hover img { filter: saturate(1.05) brightness(1); transform: translateX(-50%) skewX(9deg) scale(1.1); }
.genre::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .9) 0, rgba(0, 0, 0, .22) 52%, rgba(0, 0, 0, 0) 74%), linear-gradient(to left, rgba(0, 0, 0, .62) 0, rgba(0, 0, 0, 0) 26%);
}
.genre__name { position: absolute; z-index: 2; left: 1rem; right: 3.5rem; bottom: .8125rem; font-size: 1.375rem; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; overflow-wrap: anywhere; pointer-events: none; }
.genre__jp {
  position: absolute; z-index: 2; right: .75rem; top: .75rem;
  writing-mode: vertical-rl;
  font: 500 1.0625rem/1 "Noto Serif JP", "Yu Mincho", serif;
  letter-spacing: .12em; pointer-events: none;
  text-shadow: 0 1px .5rem rgba(0, 0, 0, .8);
}

/* ---------- Смотрят сейчас ---------- */
.queries { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0 var(--gutter); margin-bottom: 1.125rem; }
.query { height: 2rem; padding: 0 .8125rem 0 .625rem; border-radius: 1rem; background: rgba(255, 255, 255, .08); font-size: .875rem; display: inline-flex; align-items: center; gap: .4375rem; transition: background-color .15s; }
.query:hover { background: rgba(255, 255, 255, .17); }
.query .icon { width: .875rem; height: .875rem; color: var(--mute); }

/* ---------- Расписание ---------- */
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; padding: .25rem var(--gutter) 0; }
.week.is-resizing { overflow: hidden; transition: height .5s cubic-bezier(.4, 0, .2, 1); }
.day { background: var(--surface); border-radius: .75rem; padding: .75rem .625rem; min-height: 17.75rem; }
.day--today { background: var(--raise); box-shadow: inset 0 .1875rem 0 var(--accent); }
.day__name { font-size: .9375rem; font-weight: 700; padding: 0 .25rem; line-height: 1.3; }
.day__when { color: var(--mute); font-size: .8125rem; padding: 0 .25rem; margin-bottom: .5rem; }
.day--today .day__when { color: var(--accent); font-weight: 500; }
.slot { display: grid; grid-template-columns: 2.125rem 1fr; gap: .5625rem; padding: .375rem .25rem; border-radius: .4375rem; align-items: start; text-align: left; width: 100%; transition: background-color .15s; }
.slot:hover { background: rgba(255, 255, 255, .08); }
.slot img { width: 2.125rem; height: 3rem; object-fit: cover; border-radius: .1875rem; }
.slot strong { font-weight: 500; font-size: .8125rem; line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.slot span { display: block; color: var(--mute); font-size: .75rem; margin-top: 1px; }
.day__empty { color: var(--mute); font-size: .8125rem; padding: .375rem .25rem; }
.week__toggle { display: flex; justify-content: center; padding: 1rem var(--gutter) 0; }
.week__toggle .btn--ghost { background: rgba(255, 255, 255, .09); }
.week__toggle .btn--ghost:hover { background: rgba(255, 255, 255, .18); }
.week__toggle [hidden] { display: none; }

/* ---------- Случайный тайтл ---------- */
.pick {
  position: relative; overflow: hidden;
  margin: 0 var(--gutter); min-height: 20rem;
  display: grid; grid-template-columns: 12.25rem 1fr; gap: 2rem; align-items: center;
  padding: 1.75rem 2.5rem 1.75rem 1.75rem; border-radius: 1.125rem; background: var(--surface);
}
.pick__bgs { position: absolute; inset: 0; opacity: .34; } /* общая прозрачность: фото внутри непрозрачны и не просвечивают друг через друга */
.pick__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: saturate(.9); transition: opacity .7s ease; }
.pick__bg.is-on { opacity: 1; }
.pick::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, rgba(20, 18, 27, .9) 20%, rgba(20, 18, 27, .5)); }
.pick__cover { position: relative; z-index: 2; width: 12.25rem; aspect-ratio: 425 / 600; border-radius: .75rem; overflow: hidden; background: var(--raise); box-shadow: 0 .875rem 2.5rem rgba(0, 0, 0, .5); }
.pick__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; }
.pick__poster.is-on { opacity: 1; }
.pick__body { position: relative; z-index: 2; max-width: 66ch; }
.pick__heading { font-size: 1.625rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; margin-bottom: .875rem; }
.pick__title { font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.pick__meta { display: flex; flex-wrap: wrap; gap: .25rem .875rem; margin-top: .25rem; color: rgba(255, 255, 255, .78); font-size: .875rem; }
.pick__desc { margin-top: .625rem; color: rgba(255, 255, 255, .84); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.pick__actions { display: flex; gap: .625rem; margin-top: 1rem; }
.pick__fade { animation: swap .35s ease; }
/* Конечное значение не задано: элемент приходит к своей обычной непрозрачности */
@keyframes swap { from { opacity: 0; } }

/* ---------- Подвал ---------- */
.foot { margin-top: 1rem; padding: 2.75rem var(--gutter) 2.125rem; background: var(--surface); }
.foot__main { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 2rem; align-items: start; }
.foot__col { display: grid; gap: .4375rem; justify-items: start; }
.foot__col h3 { font-size: .9375rem; font-weight: 700; margin-bottom: .3125rem; }
.foot__col a { color: var(--mute); transition: color .15s; }
.foot__col a:hover { color: #fff; }
.foot__note { margin-top: 2.125rem; padding-top: 1.125rem; border-top: 1px solid var(--line); color: var(--mute); font-size: .8125rem; }
.foot__note a { color: #fff; text-decoration: underline; text-underline-offset: .1875rem; }

/* ---------- Окно входа и регистрации ---------- */
.auth {
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: hidden;
  color: #fff; background: var(--ink);
}
.auth[open] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); animation: finder-fade .22s ease; }
.auth::backdrop { background: var(--ink); }
.auth__frame { position: relative; min-width: 0; overflow: hidden; }
.auth__frame img { width: 100%; height: 100%; object-fit: cover; }
.auth__frame::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(transparent, rgba(7, 6, 11, .82)); }
.auth__caption { position: absolute; z-index: 1; left: var(--gutter); right: var(--gutter); bottom: 2rem; font-size: 1.0625rem; font-weight: 500; }
.auth__panel { position: relative; overflow-y: auto; scrollbar-width: none; background: var(--surface); display: flex; }
.auth__panel::-webkit-scrollbar { display: none; }
.auth[open] .auth__panel { animation: auth-in .34s var(--ease-out); }
@keyframes auth-in { from { translate: 2.5rem 0; } to { translate: 0 0; } }
.auth__close { position: absolute; top: 1rem; right: 1rem; }
.auth__col { width: min(25rem, 100%); margin: auto; padding: 4rem 1.5rem 2.5rem; display: grid; gap: 1.125rem; }
.auth__title { font-size: 2rem; font-weight: 800; line-height: 1.12; letter-spacing: -.02em; }
.auth__lead { color: var(--mute); margin-top: -.625rem; }
.auth .seg button { flex: 1; }
.auth__form { display: grid; gap: .875rem; }
.auth__submit { justify-content: center; padding: 0 1.375rem; margin-top: .25rem; }
.auth__submit:disabled { opacity: .55; cursor: progress; }
.auth__terms { color: var(--mute); font-size: .8125rem; line-height: 1.45; }
.auth__terms a { color: #fff; text-decoration: underline; text-underline-offset: .1875rem; }
.auth__or { color: var(--mute); text-align: center; }
.auth__social { display: grid; grid-template-columns: 1fr 1fr; gap: .625rem; }
.auth__provider { justify-content: center; height: 3rem; padding: 0 .75rem; font-size: .9375rem; background: var(--raise); border-radius: 1.5rem; }
.auth__provider:hover { background: #2d2939; }
.auth__note { color: var(--mute); font-size: .875rem; min-height: 1.3rem; }

/* Поле формы используется и во входе, и в настройках */
.field { display: grid; gap: .3125rem; }
.field[hidden] { display: none; }
.field label, .field__label { font-size: .875rem; font-weight: 500; }
.field input {
  width: 100%; height: 3rem; padding: 0 .9375rem;
  color: #fff; font: 400 1rem var(--font);
  background: rgba(255, 255, 255, .07); border: .0625rem solid var(--line); border-radius: var(--r-card);
  transition: background-color .15s, border-color .15s;
}
.field input:hover { border-color: rgba(255, 255, 255, .26); }
.field input:focus { outline: none; background: rgba(255, 255, 255, .11); border-color: #fff; }
.field input[aria-invalid="true"] { border-color: var(--danger); }
.field input:-webkit-autofill { -webkit-text-fill-color: #fff; caret-color: #fff; box-shadow: inset 0 0 0 3rem var(--raise); }
.field__wrap { position: relative; }
.field__wrap input { padding-right: 3rem; }
.field__eye { position: absolute; top: .25rem; right: .25rem; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; color: var(--mute); border-radius: 50%; }
.field__eye:hover { color: #fff; }
.field__eye .icon { width: 1.25rem; height: 1.25rem; stroke-width: 2; }
.field__err { color: var(--danger); font-size: .8125rem; }
.field__err:empty { display: none; }
.form__err { color: var(--danger); font-size: .875rem; }
.form__err[hidden] { display: none; }

/* ---------- Профиль ---------- */
.me[hidden] { display: none; }
.view-me .hero, .view-me main { display: none; }
.me { min-height: 100vh; padding-bottom: 4rem; }
.me__head { position: relative; display: flex; align-items: flex-end; min-height: min(62vh, 34rem); padding: calc(var(--top-h) + 2rem) var(--gutter) 2rem; }
.me__frame { position: absolute; inset: 0; overflow: hidden; }
.me__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.me__frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(rgba(7, 6, 11, .3) 0%, rgba(7, 6, 11, .35) 45%, var(--ink) 100%), linear-gradient(90deg, rgba(7, 6, 11, .6), transparent 70%);
}
.me__id { position: relative; display: flex; align-items: flex-end; gap: clamp(1.25rem, 3vw, 2.5rem); min-width: 0; }
.me__id .ava { --size: clamp(7.5rem, 15vw, 13rem); padding: clamp(.3125rem, .6vw, .5rem); background: conic-gradient(var(--accent) var(--xp), rgba(255, 255, 255, .28) 0); }
.me__id .ava > span:first-child { border: clamp(.25rem, .5vw, .4375rem) solid var(--ink); }
.me__id .ava__lvl { height: clamp(1.75rem, 3vw, 2.5rem); min-width: clamp(2.25rem, 4vw, 3.25rem); padding: 0 .625rem; font-size: clamp(.9375rem, 1.6vw, 1.375rem); border-radius: 1.25rem; bottom: -.625rem; box-shadow: 0 0 0 .25rem var(--ink); }
.me__text { min-width: 0; padding-bottom: .375rem; }
.me__name { font-size: clamp(2.5rem, 7vw, 5.5rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; overflow-wrap: anywhere; outline: none; -webkit-user-select: text; user-select: text; }
.me__line { margin-top: .75rem; font-size: 1.0625rem; font-weight: 500; }
.me__line + .me__line { margin-top: .125rem; }
.me__line--mute { color: rgba(255, 255, 255, .72); font-weight: 400; font-size: .9375rem; }
.me__tabs { padding: 1rem var(--gutter) 1.75rem; }
.me__tabs .seg--wide { display: inline-flex; }
.me__empty { padding: 2rem var(--gutter) 3rem; max-width: 40rem; }
.me__empty h2 { font-size: 1.625rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.me__empty p { margin-top: .375rem; color: var(--mute); }
.me__cta { margin-top: 1.25rem; }
.btn--watch.btn--small { padding-left: 1.25rem; }
.btn--quiet { background: rgba(255, 255, 255, .1); }
.btn--quiet:hover { background: rgba(255, 255, 255, .2); }
.btn--danger { background: var(--danger); color: #000; }
.btn--danger:hover { background: #ffaba3; }
.btn:disabled { opacity: .55; cursor: progress; }

/* Настройки: заголовок слева, поля справа, между группами только линия */
.set { padding: 0 var(--gutter); max-width: 62rem; }
.set__group { display: grid; grid-template-columns: 13rem minmax(0, 28rem); gap: 1rem 2rem; padding: 1.75rem 0; border-top: .0625rem solid var(--line); }
.set__group h2 { font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.set__body { display: grid; gap: .875rem; align-content: start; min-width: 0; }
.set__value { min-height: 1.5rem; overflow-wrap: anywhere; color: var(--mute); -webkit-user-select: text; user-select: text; }
.set__hint { color: var(--mute); font-size: .875rem; }
.set__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.set__status { color: var(--score-high); font-size: .875rem; }
.set__status:empty { display: none; }
.set__status.is-bad { color: var(--danger); }
.set__status.is-info { color: var(--mute); }
.ways { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; }
.ways li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem; }
.ways__name { display: inline-flex; align-items: center; gap: .625rem; font-weight: 500; }
.ways__state { color: var(--mute); font-size: .875rem; }
.set__danger summary { cursor: pointer; color: var(--danger); font-weight: 500; width: fit-content; }
.set__danger form { display: grid; gap: .875rem; margin-top: .875rem; }

.toast {
  position: fixed; z-index: 60; left: 50%; bottom: 1.5rem; translate: -50% 0;
  max-width: calc(100vw - 2rem); width: max-content; padding: .75rem 1.125rem;
  color: #000; background: #fff; font-weight: 500; border-radius: var(--r-card);
  box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .5);
}
.toast[hidden] { display: none; }

@media (max-width: 900px) {
  .auth[open] { display: block; overflow-y: auto; scrollbar-width: none; }
  .auth__frame { height: 9.5rem; }
  .auth__caption { display: none; }
  .auth__frame::after { inset: 0; height: auto; background: linear-gradient(rgba(7, 6, 11, .15), var(--surface)); }
  .auth__panel { overflow: visible; }
  .auth[open] .auth__panel { animation: none; }
  .auth__close { position: fixed; z-index: 2; background: rgba(7, 6, 11, .6); color: #fff; }
  .auth__col { padding: .5rem 1rem 2rem; }
  .set__group { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .me__head { min-height: 22rem; padding-bottom: 1.5rem; }
  .me__id { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .me__name { font-size: 2.125rem; line-height: 1.08; }
  .me__line { font-size: 1rem; }
  .toast { bottom: calc(var(--tab-h) + .75rem); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- Планшеты и узкие окна ---------- */
@media (max-width: 1100px) {
  html { font-size: 100%; }
  .top { gap: 1.5rem; }
  .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .leaders__body { grid-template-columns: minmax(0, 1fr); }
  .foot__main { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .foot__main > .brand { grid-column: 1 / -1; }

  /* Семь колонок не помещаются: дни листаются вбок */
  .week {
    display: flex; gap: .625rem; overflow-x: auto;
    scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-left: var(--gutter);
  }
  .week::-webkit-scrollbar { display: none; }
  .day { flex: none; width: 15rem; min-height: 14rem; scroll-snap-align: start; }
}

/* ---------- Телефоны ---------- */
@media (max-width: 760px) {
  :root {
    --gutter: 1rem;
    --top-h: 3.5rem;
    --tab-h: 3.5rem;
    --card-land: min(78vw, 18rem);
  }
  html { -webkit-tap-highlight-color: transparent; }
  body { padding-bottom: var(--tab-h); }

  /* Шапка: размытие отключено, иначе нижняя панель привяжется к шапке, а не к экрану */
  .top { gap: .75rem; }
  .top.is-stuck { backdrop-filter: none; background: rgba(7, 6, 11, .96); }
  .brand__mark { width: 1.75rem; height: 1.75rem; }
  .brand__name { font-size: 1.125rem; }
  .top__right { gap: .5rem; height: 2.5rem; }
  .search-btn { width: 2.5rem; height: 2.5rem; padding: 0; justify-content: center; gap: 0; font-size: 0; border-radius: 50%; }
  .btn-login { height: 2.5rem; padding: 0 1rem; }
  .profile .ava { --size: 2.5rem; }

  /* Разделы переезжают в нижнюю панель */
  .top__nav {
    position: fixed; inset: auto 0 0; z-index: 40;
    height: var(--tab-h); gap: 0;
    font-size: .6875rem;
    background: rgba(7, 6, 11, .96); box-shadow: 0 -1px 0 var(--line);
  }
  .top__nav a { flex: 1; flex-direction: column; justify-content: center; gap: .125rem; }
  .top__nav .icon { display: block; }

  /* Баннер */
  .hero { height: clamp(34rem, 100vh, 46rem); height: clamp(34rem, 100svh, 46rem); }
  .hero__media, .hero__media > * { object-position: 52% 50%; }
  .hero__scrim {
    background:
      linear-gradient(to top, var(--ink) 0, rgba(7, 6, 11, .9) 30%, rgba(7, 6, 11, 0) 64%),
      linear-gradient(to bottom, rgba(7, 6, 11, .55) 0, rgba(7, 6, 11, 0) 22%);
  }
  .hero__controls { top: calc(var(--top-h) + .5rem); bottom: auto; }
  .round { width: 2.75rem; height: 2.75rem; }
  .hero__jp { top: calc(var(--top-h) + 4rem); right: calc(var(--gutter) + .75rem); font-size: 1.25rem; }
  .hero__body { width: 100%; max-width: none; padding: 0 var(--gutter) 5.5rem; }
  .hero__title { font-size: 1.875rem; margin-bottom: .625rem; }
  .hero__meta { font-size: .875rem; }
  .hero__meta > span:not(:last-child)::after { margin: 0 .5rem; }
  .hero__desc {
    margin-top: .625rem; font-size: .9375rem;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  }
  .hero__actions { gap: .5rem; margin-top: 1rem; }
  .hero__actions .btn { flex: 1 1 auto; justify-content: center; height: 3rem; padding: 0 .875rem; font-size: .9375rem; white-space: nowrap; }
  .hero__actions .save { flex: none; width: 3rem; height: 3rem; }

  /* Секции и ленты: листаются пальцем, стрелки не нужны */
  .block { padding-bottom: 2.5rem; }
  .block--continue { margin-top: -2.5rem; padding-bottom: 2.5rem; }
  .block__head { margin-bottom: .75rem; }
  .block__head h2 { font-size: 1.375rem; }
  .block__head--flush { flex-direction: column; align-items: flex-start; margin-bottom: 1rem; }
  .arrows { display: none; }
  .rail { gap: .75rem; scroll-snap-type: x proximity; scroll-padding-left: var(--gutter); }
  .rail > * { scroll-snap-align: start; }
  .c-post--rail { width: 8.75rem; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.125rem .625rem; }
  .grid .card__title { margin-top: .4375rem; font-size: .8125rem; }
  .queries { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .queries::-webkit-scrollbar { display: none; }
  .query { flex: none; }
  .day { width: 14rem; }

  /* Жанры */
  .genre { width: 16rem; height: 10rem; }
  .genre__panel img { width: 16rem; }
  .genre__name { font-size: 1.1875rem; }

  /* Топ по уровню */
  .leaders { padding: 1.125rem 1rem 1.25rem; }
  .podium { gap: .375rem; }
  .podium__user { padding: 1rem .375rem .75rem; }
  .podium__user--3 { min-height: 10.5rem; }
  .podium__user--2 { min-height: 12rem; }
  .podium__user--1 { min-height: 14rem; padding-top: 1.25rem; }
  .podium__user .ava { --size: 3.5rem; }
  .podium__user--1 .ava { --size: 4.5rem; }
  .podium__rank { left: .5rem; top: .5rem; font-size: 1.25rem; }
  .podium__name { font-size: .875rem; }
  .podium__sub { font-size: .75rem; }
  .ladder li { gap: .625rem; padding: 0 0 .25rem; }

  /* Случайный тайтл: обложка над текстом. Место под текст постоянное, чтобы блок не прыгал при смене */
  .pick { grid-template-columns: minmax(0, 1fr); gap: 1.125rem; min-height: 0; padding: 1.25rem 1rem; }
  .pick::before { background: linear-gradient(to top, rgba(20, 18, 27, .94) 45%, rgba(20, 18, 27, .55)); }
  .pick__cover { width: 8.5rem; }
  .pick__heading { font-size: 1.375rem; }
  .pick__title { min-height: 2.6em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .pick__desc { min-height: 4.5em; }
  .pick__actions .btn { flex: 1; justify-content: center; padding: 0 .75rem; }

  /* Подвал */
  .foot { margin-top: 0; padding: 2rem var(--gutter) 1.5rem; }
  .foot__main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
  .foot__col a { padding: .1875rem 0; }
  .foot__note { margin-top: 1.5rem; }

  /* Поиск */
  .finder { height: 100vh; height: 100dvh; }
  .finder__col { width: calc(100vw - 2rem); gap: .875rem; padding-top: 1rem; }
  .finder__field { height: 3.25rem; padding-left: 1rem; }
  .hit { grid-template-columns: 3.5rem minmax(0, 1fr); gap: .75rem; }
  .hit img { width: 3.5rem; height: 4.875rem; }
}

/* Самые узкие телефоны: две кнопки и закладка в ряд не помещаются */
@media (max-width: 359px) {
  .hero__actions .btn--ghost { display: none; }
}

/* Телефон, повёрнутый горизонтально */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { height: 28rem; }
}

/* На сенсорных экранах наведения нет: кнопка видна сразу, а эффект не залипает после касания */
@media (hover: none) {
  .save--card { opacity: 1; }
  .card:hover .card__media { translate: 0 0; box-shadow: none; }
  .card:hover .card__media img { transform: none; }
  .c-land:hover .c-land__play { opacity: 0; }
  .c-all:hover .c-all__arrow { background: rgba(255, 255, 255, .12); color: inherit; translate: 0 0; }
  .genre__panel:hover { flex-grow: 1; }
  .genre__panel:hover img { filter: saturate(.9) brightness(.82); transform: translateX(-50%) skewX(9deg) scale(1.2); }
}