/* AniBublik / CINEMA EDITION — Design system 2026
   Visual-only layer. Existing Auth, Supabase, player and catalog data stay intact. */
:root {
  --ink: #0a1023;
  --ink-2: #101a32;
  --surface: #172441;
  --surface-2: #223456;
  --surface-3: #2c4569;
  --line: rgba(185, 213, 255, 0.14);
  --line-strong: rgba(194, 219, 255, 0.27);
  --text: #f6f7ff;
  --muted: #b5c4df;
  --faint: #8d9fbd;
  --sun: #ffe078;
  --sun-hover: #ffeb9e;
  --pink: #f9849e;
  --cyan: #7ed9d9;
  --mint: #79e1bc;
  --r-lg: 25px;
  --header-h: 72px;
  --wrap: 1270px;
}
html {
  scroll-padding-top: 110px;
}
.cinema {
  background: #0a1023;
  color: var(--text);
  background-image:
    radial-gradient(
      1100px 600px at 90% 300px,
      rgba(43, 78, 117, 0.13),
      transparent 65%
    ),
    radial-gradient(
      700px 700px at 0 1300px,
      rgba(62, 51, 107, 0.1),
      transparent 70%
    );
}
.cinema .wrap {
  width: min(calc(100% - clamp(34px, 6vw, 96px)), var(--wrap));
}
.cinema .site-header {
  border-color: rgba(169, 203, 246, 0.12);
}
.cinema .site-header::before {
  background: rgba(12, 19, 37, 0.85);
  backdrop-filter: blur(23px) saturate(1.55);
}
.cinema .site-header.is-scrolled::before {
  background: rgba(12, 19, 37, 0.97);
}
.cinema .site-header__row {
  min-height: 72px;
  gap: clamp(9px, 1.1vw, 20px);
}
.cinema .logo__mark {
  border-radius: 11px;
  box-shadow: 0 8px 24px -12px #e97b80bb;
}
.cinema .logo__text {
  font-size: 1.13rem;
  letter-spacing: -0.055em;
}
.cinema .nav__link {
  color: #b8c6df;
  font-size: 0.9rem;
  font-weight: 550;
  transition:
    color 0.2s,
    background 0.2s;
}
.cinema .nav__link:hover,
.cinema .nav__link[aria-current="page"] {
  color: #fff;
  background: #ffffff12;
}
.cinema .search__field {
  border: 1px solid #bdcffb24;
  border-radius: 12px;
  background: #ffffff0a;
}
.cinema .search__field:focus-within {
  border-color: #ffe07888;
  box-shadow: 0 0 0 3px #ffe07816;
}
.cinema .btn {
  font-weight: 720;
  letter-spacing: -0.014em;
  transition:
    transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    background 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
}
.cinema .btn--primary {
  background: #ffe078;
  color: #182033;
  box-shadow: 0 13px 30px -15px #ffca57c0;
}
.cinema .btn--primary:hover {
  background: #fff0ac;
  transform: translateY(-2px);
  box-shadow: 0 20px 38px -18px #ffce75d7;
}
.cinema .btn--ghost {
  background: #e6eeff0e;
  border-color: #e1eaff36;
  color: #eaf2ff;
}
.cinema .btn--ghost:hover {
  background: #e6eeff1c;
  border-color: #ffe0786b;
  transform: translateY(-2px);
}
.cinema .section {
  padding-block: 64px;
}
.cinema .section__title {
  font: 750 clamp(1.6rem, 2.25vw, 2.35rem)/1.16 var(--font-display);
  letter-spacing: -0.045em;
}
.cinema .section__note {
  margin-top: 12px;
  color: #a4b4d1;
  font-size: 0.92rem;
}
.cinema .section__head {
  margin-bottom: 28px;
  align-items: center;
}
.cinema .section__more {
  display: inline-flex;
  align-items: center;
  padding: 10px 15px;
  border: 1px solid #b8c9e139;
  border-radius: 12px;
  color: #d9e5f8;
  font-size: 0.87rem;
  transition: all 0.2s;
}
.cinema .section__more:hover {
  color: var(--sun);
  border-color: #ffe07888;
  transform: translateX(2px);
}
.cin-section-kicker,
.cin-section-number {
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.17em;
  font-size: 0.68rem;
  font-weight: 800;
  color: #91c7d9;
}
.cin-section-number {
  margin-bottom: 12px;
  color: #e7c679;
}
.cin-kicker-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffe078;
  box-shadow: 0 0 0 5px #ffe0781b;
}
.cin-kicker-line {
  height: 1px;
  width: 32px;
  background: #cfdbff65;
}
.cinema .chip {
  min-height: 30px;
  height: auto;
  padding: 5px 12px;
  border-radius: 9px;
  font-size: 0.76rem;
  font-weight: 700;
  border: 1px solid #b9ccec2a;
  background: #fff1;
  color: #e1ebfc;
}
.cinema .chip--sun {
  background: #ffe078;
  color: #16213a;
  border-color: transparent;
}
.cinema .site-footer {
  border-top: 1px solid #dde7ff16;
  background: #10192f;
}
.cinema .poster {
  border-radius: 18px;
  box-shadow: 0 18px 40px -25px #000e;
  overflow: hidden;
}
.cinema .poster > img {
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0.75, 0.15, 1);
}
.cinema .anime-card__link:hover .poster > img {
  transform: scale(1.07);
}
.cinema .anime-card__title {
  margin-top: 12px;
  font-size: 0.96rem;
  font-weight: 730;
  line-height: 1.4;
  letter-spacing: -0.02em;
}
.cinema .anime-card__type {
  font-size: 0.82rem;
  margin-top: 2px;
  color: #a5b8d2;
}
.cinema .anime-card__link:focus-visible {
  outline: 2px solid var(--sun);
  outline-offset: 5px;
}
.cinema .rating {
  border: 1px solid #ffffff22;
  backdrop-filter: blur(8px);
}
/* HOME — immersive editorial key visual */
.cinema .cin-hero {
  position: relative;
  isolation: isolate;
  min-height: 720px;
  overflow: hidden;
  background: linear-gradient(115deg, #0b1128 4%, #132947 53%, #15596a 145%);
  display: block;
}
.cinema .cin-hero::before {
  content: "";
  z-index: -1;
  position: absolute;
  inset: 0;
  background:
    radial-gradient(620px 580px at 77% 38%, #70c9da29, transparent 72%),
    radial-gradient(650px 460px at 27% 105%, #be62851a, transparent 75%);
}
.cinema .cin-hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  height: 120px;
  pointer-events: none;
  background: linear-gradient(transparent, #0b1225);
}
.cin-hero__noise {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.45' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}
.cin-hero__wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, #0d1531d9 0%, transparent 70%),
    radial-gradient(850px 550px at 88% 56%, #60c5c91b, transparent 75%);
}
.cinema .cin-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  align-items: center;
  gap: 20px;
  min-height: 655px;
  position: relative;
  z-index: 1;
}
.cin-hero__copy {
  padding-block: 72px 64px;
  max-width: 680px;
}
.cin-hero__copy > .cin-section-kicker {
  margin-bottom: 36px;
}
.cin-hero__copy .chips {
  margin-bottom: 24px;
  gap: 7px;
}
.cinema .cin-hero .hero__title {
  margin: 0 0 27px;
  font: 800 clamp(3.4rem, 7vw, 7rem)/0.96 var(--font-display);
  letter-spacing: -0.085em;
  color: #fff;
}
.cinema .cin-hero .cin-hero__headline {
  display: block;
  white-space: nowrap;
  line-height: 1.06;
}
.cinema .cin-hero .cin-hero__subtitle {
  display: block;
  margin-top: 18px;
  max-width: 620px;
  font: 700 clamp(1.1rem, 2.1vw, 1.65rem)/1.4 var(--font-display);
  letter-spacing: -0.04em;
  color: #c5e6ed;
}
.cinema .cin-hero .hero__desc {
  max-width: 57ch;
  font-size: 0.98rem;
  line-height: 1.82;
  color: #b6c9df;
}
.cinema .cin-hero .hero__actions {
  margin-top: 32px;
  gap: 12px;
}
.cinema .cin-hero .btn--lg {
  height: 56px;
  border-radius: 13px;
}
.cin-hero__micro {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 28px;
  color: #879ab5;
  font-size: 0.76rem;
}
.cin-hero__visual {
  position: relative;
  align-self: stretch;
  display: grid;
  place-items: center;
  min-height: 590px;
  isolation: isolate;
}
.cin-hero__halo {
  position: absolute;
  inset: 8% -5% 4% 4%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    #72c9c745 0%,
    #4566a322 34%,
    transparent 65%
  );
  filter: blur(12px);
}
.cin-hero__backplate {
  position: absolute;
  width: 70%;
  height: 72%;
  top: 12%;
  right: 5%;
  border: 1px solid #9cd2df25;
  border-radius: 38px;
  transform: rotate(9deg);
  background: linear-gradient(135deg, #6796bd12, #63f0bc08);
}
.cin-hero__backplate::before,
.cin-hero__backplate::after {
  content: "";
  position: absolute;
  border: 1px solid #cbf4ff14;
  inset: 22px;
  border-radius: 30px;
}
.cin-hero__backplate::after {
  inset: 45px;
  border-color: #a7d6e31a;
}
.cin-hero__backplate span {
  position: absolute;
  right: -22px;
  top: 23px;
  writing-mode: vertical-rl;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  color: #b8e5f366;
}
.cin-hero__poster {
  position: relative;
  width: min(70%, 370px);
  aspect-ratio: 3/4.3;
  margin-left: -10px;
  margin-top: 15px;
  transform: rotate(-6deg);
  border: 8px solid #f4f2f313;
  border-radius: 27px;
  box-shadow:
    0 35px 85px #000b,
    0 0 0 1px #fff3;
  background: linear-gradient(150deg, #533f74, #193e6e);
  overflow: hidden;
  animation: cin-arrive 0.85s both cubic-bezier(0.2, 0.8, 0.15, 1);
}
.cin-hero__poster-img {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(145deg, #b89aad55, #1d3475a8),
    radial-gradient(circle at 70% 20%, #fba9cf55, transparent 45%);
}
.cin-hero__poster-img::after {
  content: attr(data-k);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 900 clamp(140px, 18vw, 240px) var(--font-jp);
  color: #fff2;
}
.cin-hero__poster-img img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.cin-hero__poster-meta {
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  padding: 45px 25px 27px;
  background: linear-gradient(transparent, #050d23ea);
}
.cin-hero__poster-meta span {
  display: block;
  letter-spacing: 0.2em;
  font-weight: 800;
  font-size: 0.65rem;
  color: #c3dee7;
}
.cin-hero__poster-meta b {
  display: block;
  letter-spacing: -0.035em;
  font: 800 clamp(1.8rem, 2.7vw, 2.7rem)/1.3 var(--font-display);
}
.cin-hero__floating {
  position: absolute;
  right: 0;
  bottom: 22%;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 17px 22px;
  min-width: 240px;
  border: 1px solid #def7ff40;
  border-radius: 16px;
  background: #172b45d9;
  box-shadow: 0 18px 55px #0008;
  backdrop-filter: blur(20px);
  animation: cin-float 6s ease-in-out infinite;
}
.cin-hero__floating-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: #ffe078;
  color: #202a38;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
}
.cin-hero__floating span,
.cin-hero__floating strong {
  display: block;
}
.cin-hero__floating span {
  font-size: 0.72rem;
  color: #b8d4e6;
}
.cin-hero__floating strong {
  font-size: 0.95rem;
  margin-top: 3px;
  color: #fff;
}
.cin-hero__vertical {
  position: absolute;
  right: -15px;
  bottom: 9%;
  writing-mode: vertical-rl;
  letter-spacing: 0.28em;
  font-size: 0.58rem;
  color: #aacddb88;
}
.cin-hero__bottom {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 27px;
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  font-weight: 800;
  color: #a7bed6;
}
.cin-hero__bottom span i {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--mint);
  border-radius: 50%;
  margin-right: 7px;
}
.cin-hero__bottom a {
  color: #e3ecfb;
  letter-spacing: 0.03em;
  font-size: 0.82rem;
}
.cin-hero__bottom a span {
  font-size: 1.2rem;
  margin-left: 8px;
}
.cin-benefits {
  position: relative;
  z-index: 2;
  margin-top: -2px;
  background: #0d172b;
  border-bottom: 1px solid #ffffff0d;
}
.cin-benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.cin-benefit {
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 26px 23px;
  border-right: 1px solid #ffffff16;
  transition: background 0.2s;
}
.cin-benefit:first-child {
  padding-left: 0;
}
.cin-benefit:last-child {
  border-right: 0;
}
.cin-benefit:hover {
  background: #ffffff08;
}
.cin-benefit__icon {
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid #abc8de4b;
  color: #ffe078;
  border-radius: 13px;
  width: 49px;
  height: 49px;
  font: 800 0.78rem var(--font-display);
}
.cin-benefit strong,
.cin-benefit small {
  display: block;
}
.cin-benefit strong {
  font-size: 0.93rem;
  letter-spacing: -0.015em;
}
.cin-benefit small {
  font-size: 0.77rem;
  color: #91a4c1;
  margin-top: 3px;
  line-height: 1.5;
}
.cin-benefit__arrow {
  margin-left: auto;
  color: #d1e4eb;
  font-size: 1.15rem;
}
.cinema--index .grid-eps {
  gap: 20px;
}
.cinema--index .ep-card__link {
  display: block;
  padding: 12px 12px 19px;
  background: #15223b;
  border: 1px solid #c2d9fa23;
  border-radius: 20px;
  transition:
    transform 0.25s,
    background 0.25s,
    border 0.25s;
}
.cinema--index .ep-card__link:hover {
  transform: translateY(-6px);
  border-color: #ffe07866;
  background: #1b304b;
}
.cinema--index .ep-card .poster {
  border-radius: 14px;
}
.cinema--index .ep-card__title {
  font-weight: 730;
  margin: 13px 4px 4px;
}
.cinema--index .ep-card__link .tags {
  margin-inline: 4px;
}
.cinema--index .grid-posters {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 22px;
}
.cinema--index .anime-card__link .poster {
  aspect-ratio: 0.71;
  border: 1px solid #bfd9fa1d;
}
.cinema--index .anime-card__link:hover .poster {
  transform: translateY(-5px);
  box-shadow: 0 30px 54px -30px #000;
}
.cin-discover {
  padding: 32px 0 92px;
}
.cin-discover__inner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 285px;
  border-radius: 28px;
  border: 1px solid #b5d6ff2b;
  padding: 45px clamp(25px, 5vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  background:
    radial-gradient(480px 320px at 80% 50%, #2c68726b, transparent 72%),
    linear-gradient(115deg, #233453, #1a2c4a 60%, #183e4e);
}
.cin-discover__inner > div,
.cin-discover__inner > .btn {
  position: relative;
  z-index: 1;
}
.cin-discover__inner h2 {
  font: 780 clamp(1.75rem, 3.1vw, 3.1rem)/1.2 var(--font-display);
  letter-spacing: -0.05em;
  margin: 14px 0;
}
.cin-discover__inner h2 em {
  font-style: normal;
  color: #ffe078;
}
.cin-discover__inner p {
  max-width: 50ch;
  color: #bcd0e0;
  font-size: 0.9rem;
}
.cin-discover__decor {
  position: absolute;
  right: 4%;
  top: -40%;
  font: 900 25rem var(--font-jp);
  color: #c4ecfc08;
  pointer-events: none;
}
/* CATALOG — editorial masthead, real filters, sorting and view toggles */
.cinema--catalog .cin-catalog-section {
  padding-block: 28px 100px;
}
.cin-catalog-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(115deg, #213f5b, #1d2f54 65%, #245161);
  border-radius: 26px;
  border: 1px solid #cee6ff2c;
  padding: clamp(30px, 4.8vw, 62px);
  min-height: 282px;
  box-shadow: 0 25px 60px -40px #0009;
}
.cin-catalog-head::before {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  right: -90px;
  top: -180px;
  border-radius: 50%;
  border: 1px solid #c1ecff23;
  box-shadow:
    0 0 0 52px #c1ecff06,
    0 0 0 103px #c1ecff08;
}
.cin-catalog-head__corner {
  position: absolute;
  z-index: -1;
  right: 4%;
  top: -29%;
  font: 900 clamp(14rem, 28vw, 30rem)/1 var(--font-jp);
  color: #cbefff12;
  pointer-events: none;
}
.cin-catalog-head > .cin-section-kicker {
  color: #ffe078;
  margin-bottom: 14px;
}
.cin-catalog-head .section__title {
  font-size: clamp(2.3rem, 4.3vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.07em;
  line-height: 1.1;
}
.cin-catalog-head .watch-note {
  max-width: 52ch;
  font-size: 0.98rem;
  margin-top: 14px;
  line-height: 1.7;
  color: #c6d9e9;
}
.cinema .cin-catalog-head .catalog-form {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 760px;
  margin: 25px 0 0;
}
.cin-catalog-head .catalog-form input {
  flex: 1;
  max-width: none;
  min-width: 0;
  min-height: 56px;
  padding: 0 16px 0 50px;
  border: 1px solid #c9defd56;
  border-radius: 14px;
  background: #09172dc9;
  color: #f8fbff;
  font: 500 0.93rem var(--font-body);
  outline: none;
  transition:
    border 0.2s,
    box-shadow 0.2s;
}
.cin-catalog-head .catalog-form input:focus {
  border-color: #ffe078;
  box-shadow: 0 0 0 3px #ffe07822;
}
.cin-catalog-head .catalog-form input::placeholder {
  color: #8da7bb;
}
.cin-catalog-head .catalog-form .btn {
  height: 56px;
  border-radius: 14px;
  min-width: 122px;
}
.cin-search-mark {
  position: absolute;
  left: 17px;
  font-size: 1.6rem;
  color: #b5d6e4;
  pointer-events: none;
}
.cin-catalog-bar {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 22px;
  margin: 48px 0 25px;
}
.cin-catalog-bar__title h2 {
  font: 780 clamp(1.45rem, 2.2vw, 2.05rem)/1.2 var(--font-display);
  letter-spacing: -0.045em;
  margin: 7px 0 3px;
}
.cin-catalog-bar .catalog-count {
  font-size: 0.8rem;
  color: #9cafcb;
  margin: 7px 0 0;
}
.cin-catalog-tools {
  display: flex;
  gap: 9px;
  align-items: center;
}
.cin-catalog-tools select {
  appearance: none;
  min-height: 44px;
  color: #e7f0ff;
  background: #16233c;
  border: 1px solid #bbcee635;
  border-radius: 12px;
  padding: 0 38px 0 15px;
  cursor: pointer;
  font: 650 0.85rem var(--font-body);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23d0dced' stroke-width='2'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.cin-catalog-tools select:focus-visible {
  outline: 2px solid var(--sun);
}
.cin-view {
  display: flex;
  padding: 4px;
  gap: 3px;
  background: #172440;
  border: 1px solid #b3c8e92e;
  border-radius: 12px;
}
.cin-view button {
  width: 37px;
  height: 34px;
  border-radius: 8px;
  font-size: 1.15rem;
  color: #91aac4;
}
.cin-view button:hover,
.cin-view button.is-active {
  background: #324766;
  color: #fff;
}
.cin-catalog-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: start;
  gap: 30px;
}
.cin-catalog-aside {
  position: sticky;
  top: 100px;
  padding: 23px 18px;
  border: 1px solid #c5dcfb28;
  border-radius: 20px;
  background: linear-gradient(150deg, #182a44, #111d34);
}
.cin-filter-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  border-bottom: 1px solid #b6cbe027;
  padding-bottom: 22px;
  margin-bottom: 23px;
}
.cin-filter-heading .cin-section-kicker {
  font-size: 0.59rem;
  color: #9fc5d2;
}
.cin-filter-heading h3 {
  font: 700 1.1rem var(--font-display);
  letter-spacing: -0.04em;
  width: 100%;
}
.cin-filter-heading h3 span {
  float: right;
  color: #ffe078;
}
.cin-filter-label {
  font-size: 0.63rem;
  letter-spacing: 0.17em;
  font-weight: 800;
  color: #8fa7c3;
  margin-bottom: 14px;
}
.cin-filter-buttons {
  display: grid;
  gap: 7px;
}
.cin-filter-buttons button {
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
  width: 100%;
  min-height: 45px;
  padding: 10px 12px;
  color: #b6c8e3;
  border: 1px solid transparent;
  border-radius: 12px;
  font-weight: 650;
  font-size: 0.83rem;
  transition:
    background 0.2s,
    border 0.2s,
    color 0.2s;
}
.cin-filter-buttons button:hover {
  color: #fff;
  background: #ffffff10;
}
.cin-filter-buttons button.is-active {
  background: #f9df7940;
  border-color: #ffe07863;
  color: #ffe9ac;
}
.cin-filter-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid currentColor;
  flex: none;
}
.cin-filter-buttons button.is-active .cin-filter-dot {
  background: #ffe078;
  border-color: #ffe078;
}
.cin-filter-tick {
  margin-left: auto;
  opacity: 0;
}
.cin-filter-buttons button.is-active .cin-filter-tick {
  opacity: 1;
}
.cin-filter-tip {
  margin-top: 24px;
  padding: 17px 15px;
  border-radius: 14px;
  background: #ffffff0c;
  border: 1px solid #bdd5f019;
  color: #8da3bd;
}
.cin-filter-tip > span {
  color: #ffe078;
  font-size: 1.3rem;
}
.cin-filter-tip p {
  font-size: 0.76rem;
  line-height: 1.6;
  margin-top: 9px;
}
.cin-catalog-results {
  min-width: 0;
}
.cin-results-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 0 14px;
  margin-bottom: 17px;
  border-bottom: 1px solid #ffffff17;
  color: #7ea5b6;
  font-size: 0.63rem;
  font-weight: 820;
  letter-spacing: 0.17em;
}
.cin-results-top span:last-child {
  color: #c1b67d;
}
.cinema--catalog .grid-posters {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 18px;
}
.cinema--catalog .anime-card {
  min-width: 0;
}
.cinema--catalog .anime-card__link {
  display: block;
  position: relative;
  transition: transform 0.25s;
}
.cinema--catalog .anime-card__link:hover {
  transform: translateY(-5px);
}
.cinema--catalog .poster {
  aspect-ratio: 0.71;
  border-radius: 15px;
  border: 1px solid #bfd7f51e;
  transition:
    box-shadow 0.25s,
    border 0.25s;
}
.cinema--catalog .anime-card__link:hover .poster {
  border-color: #ffe078a6;
  box-shadow: 0 23px 50px -23px #000;
}
.cinema--catalog .anime-card__type {
  font-size: 0.76rem;
}
.cin-no-results {
  padding: 48px 25px;
  text-align: center;
  border-radius: 18px;
  border: 1px dashed #bed5e951;
  color: #bdcee5;
  background: #ffffff09;
}
.cinema--catalog .grid-posters.cin-list-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}
.cinema--catalog .cin-list-mode .anime-card__link {
  display: grid;
  grid-template-columns: 77px minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  align-items: center;
  column-gap: 14px;
  padding: 10px;
  border-radius: 15px;
  background: #162640;
  border: 1px solid #c6d9f723;
}
.cinema--catalog .cin-list-mode .anime-card__link:hover {
  border-color: #ffe07877;
  background: #1c304c;
}
.cinema--catalog .cin-list-mode .poster {
  grid-row: 1/3;
  width: 77px;
  height: 99px;
  aspect-ratio: auto;
  border-radius: 9px;
}
.cinema--catalog .cin-list-mode .anime-card__title {
  margin: 0;
  align-self: end;
}
.cinema--catalog .cin-list-mode .anime-card__type {
  margin-top: 5px;
  align-self: start;
}
/* ANIME DETAIL — readable cover/header, sticky information, cinema player */
.cinema--anime .title-hero {
  z-index: 40;
  overflow: visible;
  padding: 30px 0 58px;
  background: #111e35;
}
.cinema--anime .title-hero__actions .dropdown--list {
  top: calc(100% + 10px);
  bottom: auto;
}
.cinema--anime .title-hero__bg {
  opacity: 1;
}
.cinema--anime .title-hero__bg::after {
  background:
    linear-gradient(90deg, #0c142bd9 0%, #0c142b92 46%, #0c142bbd 100%),
    linear-gradient(0deg, #101a31 0%, #0d172ad9 21%, #0c152b38 80%);
}
.cinema--anime .title-hero__bg > img {
  object-fit: cover;
  object-position: center 30%;
  filter: saturate(0.78);
}
.cinema--anime .title-hero__inner {
  grid-template-columns: minmax(190px, 245px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.cinema--anime .title-hero__poster {
  border: 1px solid #fbfcff55;
  border-radius: 23px;
  box-shadow:
    0 34px 68px -26px #000c,
    0 0 0 9px #ffffff0a;
}
.cinema--anime .crumbs {
  margin: 9px 0 38px;
  color: #b6cee2;
  font-size: 0.83rem;
}
.cin-detail-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  letter-spacing: 0.19em;
  font-size: 0.7rem;
  color: #d7c68e;
  font-weight: 850;
  margin: 0 0 19px;
}
.cinema--anime .title-hero h1 {
  font: 800 clamp(2.05rem, 4.4vw, 4.25rem)/1.16 var(--font-display);
  letter-spacing: -0.065em;
  max-width: 18ch;
  text-wrap: balance;
}
.cin-title-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.cin-title-chips span {
  font-size: 0.68rem;
  font-weight: 780;
  letter-spacing: 0.03em;
  border-radius: 8px;
  padding: 6px 10px;
  border: 1px solid #d5e9ff33;
  background: #a5c0e014;
  color: #cde1ef;
}
.cin-title-chips span:first-child {
  border-color: #ffe07850;
  color: #ffe2a0;
  background: #ffe07815;
}
.cinema--anime .names {
  margin-top: 19px;
  gap: 6px;
  color: #d0d9e9;
  font-size: 0.87rem;
}
.cinema--anime .names dt {
  color: #8fa6c1;
}
.cinema--anime .score-row {
  margin-top: 23px;
  gap: 14px;
}
.cinema--anime .score,
.cinema--anime .rate {
  border: 1px solid #c9d9ff35;
  border-radius: 15px;
  background: #1c2d4d77;
  padding: 11px 14px;
  backdrop-filter: blur(10px);
}
.cinema--anime .score__star {
  width: 26px;
  height: 26px;
}
.cinema--anime .score__value {
  font-size: 1.8rem;
}
.cinema--anime .score__votes {
  max-width: 27ch;
  font-size: 0.76rem;
}
.cinema--anime .rate__label {
  font-size: 0.76rem;
}
.cinema--anime .title-hero__actions {
  margin-top: 23px;
  gap: 10px;
}
.cinema--anime .title-hero__actions .btn {
  height: 51px;
}
.cin-detail-nav {
  display: flex;
  position: relative;
  align-items: center;
  gap: 5px;
  margin-block: 22px 34px;
  border: 1px solid #aecbeb2b;
  background: #14213a;
  min-height: 62px;
  padding: 8px;
  border-radius: 15px;
  box-shadow: 0 15px 35px -25px #000;
}
.cin-detail-nav a {
  padding: 11px 20px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  color: #a9bbd5;
  font-size: 0.85rem;
  font-weight: 760;
  transition:
    color 0.2s,
    background 0.2s;
}
.cin-detail-nav a:hover,
.cin-detail-nav a.is-active {
  background: #ffffff16;
  color: #fff;
}
.cin-detail-nav a.is-active::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sun);
  margin-right: 9px;
}
.cin-detail-nav > span {
  margin-left: auto;
  padding-right: 18px;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  color: #758fac;
  font-weight: 850;
}
.cinema--anime .detail {
  grid-template-columns: minmax(0, 1fr) 310px;
  column-gap: 38px;
  row-gap: 45px;
  padding-bottom: 100px;
}
.cinema--anime .detail__main {
  gap: 47px;
}
.cinema--anime .block-title {
  font: 750 clamp(1.22rem, 1.8vw, 1.65rem)/1.25 var(--font-display);
  letter-spacing: -0.04em;
  align-items: center;
  margin-bottom: 17px;
}
.cinema--anime .block-title::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 22px;
  background: #ffe078;
  border-radius: 4px;
  flex: none;
}
.cinema--anime .synopsis {
  padding: 12px 0 8px;
}
.cinema--anime .synopsis p {
  font-size: 1.01rem;
  line-height: 1.85;
  color: #b9cce4;
  max-width: 73ch;
}
.cin-player-subtitle {
  color: #8fa7c5;
  font-size: 0.85rem;
  line-height: 1.55;
  margin: -8px 0 20px 15px;
}
.cinema--anime #player {
  scroll-margin-top: 130px;
}
.cinema--anime .player-module {
  border: 1px solid #c5d9fa3c;
  background: #14213a;
  border-radius: 21px;
  box-shadow: 0 26px 54px -34px #000a;
}
.cinema--anime .player {
  background: #050b18;
}
.cinema--anime .player__big {
  width: 72px;
  height: 72px;
  background: #ffe078;
  box-shadow:
    0 0 0 10px #ffe07828,
    0 14px 36px #0007;
}
.cinema--anime .player__big .icon {
  width: 27px;
  height: 27px;
}
.cinema--anime .player-module__bar {
  border-top-color: #bfcffe22;
  padding: 15px 18px;
  background: #14213a;
}
.cinema--anime .seg {
  background: #070e1d88;
}
.cinema--anime .seg__btn[aria-selected="true"] {
  background: #ffe078;
  color: #122039;
}
.cinema--anime .episodes-wrap,
.cinema--anime .watch-series {
  padding: 22px 22px 25px;
  border-top: 1px solid #c1d6ff24;
  background: #172644;
}
.cinema--anime .watch-series {
  border: 1px solid #c1d6ff23;
  border-radius: 0 0 20px 20px;
}
.cinema--anime .episodes-head {
  margin-bottom: 18px;
}
.cinema--anime .episodes-head h3 {
  font-size: 0.96rem;
  font-weight: 760;
}
.cinema--anime .episodes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(49px, 1fr));
  gap: 9px;
  overflow: visible;
}
.cinema--anime .ep-btn {
  width: 100%;
  height: 49px;
  aspect-ratio: auto;
  border-radius: 10px;
  border: 1px solid #c4d8f431;
  background: #223458;
  color: #d0ddf2;
  font-weight: 750;
  box-shadow: inset 0 1px #ffffff0a;
  transition:
    transform 0.2s,
    background 0.2s,
    border 0.2s;
}
.cinema--anime .ep-btn:hover:not(.is-current) {
  background: #3a5678;
  border-color: #cde6ff85;
  transform: translateY(-3px);
  color: #fff;
}
.cinema--anime .ep-btn.is-current {
  background: #ffe078;
  border-color: #ffe078;
  color: #162139;
  box-shadow: 0 8px 24px #ffdb7b3d;
}
.cinema--anime .ep-btn.is-viewed:not(.is-current) {
  background: #1a3c4d;
  border-color: #81dec251;
  color: #b8e3d7;
}
.cinema--anime .ep-btn.is-viewed:not(.is-current)::after {
  width: 6px;
  height: 6px;
  top: 6px;
  right: 6px;
  background: var(--mint);
}
.cinema--anime .legend {
  font-size: 0.7rem;
  gap: 12px;
}
.cinema--anime .detail__aside {
  top: calc(var(--header-h) + 24px);
}
.cinema--anime .detail__aside .panel {
  padding: 26px 25px 22px;
  background: linear-gradient(145deg, #1b2b4b, #16233d);
  border: 1px solid #c5dfff2a;
  border-radius: 21px;
  box-shadow: 0 18px 42px -34px #000a;
}
.cin-aside-kicker {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 0.67rem;
  letter-spacing: 0.17em;
  color: #adbed5;
  font-weight: 800;
  margin-bottom: 16px;
}
.cinema--anime .info-list > div {
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 8px;
  padding: 13px 0;
  border-color: #c4d7f81c;
}
.cinema--anime .info-list dt {
  font-size: 0.76rem;
  color: #93a9c8;
}
.cinema--anime .info-list dd {
  font-size: 0.86rem;
  color: #e2eafa;
  overflow-wrap: anywhere;
}
.cinema--anime .rel-card {
  background: #172640;
  border: 1px solid #c3d9f625;
  border-radius: 16px;
}
.cinema--anime .rel-card:hover {
  border-color: #ffe07875;
}
.cinema--anime .comments {
  scroll-margin-top: 130px;
}
.cinema--anime .comment-form {
  background: #192946;
  border: 1px solid #bfd6f52d;
  border-radius: 18px;
  padding: 18px;
}
.cinema--anime .comment-form:focus-within {
  border-color: #ffe078a6;
}
.cinema--anime .comment {
  border-color: #c1d6fb25;
}
.cinema--anime .comment__text {
  color: #cfdbec;
}
/* account page lightly harmonized without replacing its markup */
.cinema--profile .profile-banner {
  background-color: #162b4b;
}
.cinema--profile .panel {
  background: #192743;
}
/* motion: subtle, not distracting */
@keyframes cin-arrive {
  from {
    opacity: 0;
    transform: translate(24px, 30px) rotate(-11deg);
  }
  to {
    opacity: 1;
    transform: rotate(-6deg);
  }
}
@keyframes cin-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
/* responsive first: no horizontal overflow, touch targets >=44px */
@media (max-width: 1180px) {
  .cinema--index .grid-posters {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .cinema--catalog .grid-posters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .cin-catalog-layout {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 22px;
  }
  .cinema--anime .detail {
    grid-template-columns: minmax(0, 1fr) 270px;
    gap: 25px;
  }
}
@media (max-width: 970px) {
  .cinema .cin-hero__grid {
    grid-template-columns: 1fr 1fr;
    gap: 0;
    min-height: 650px;
  }
  .cin-hero__floating {
    right: -22px;
    min-width: 190px;
    padding: 12px;
  }
  .cin-hero__vertical {
    display: none;
  }
  .cin-hero__poster {
    width: 78%;
  }
  .cin-hero__copy {
    padding-block: 80px;
  }
  .cinema .cin-hero .hero__title {
    font-size: clamp(3.3rem, 7.4vw, 5rem);
  }
  .cin-benefit {
    padding-inline: 14px;
    gap: 12px;
  }
  .cin-benefit__icon {
    width: 42px;
    height: 42px;
  }
  .cin-benefit__arrow {
    display: none;
  }
  .cinema--anime .detail {
    grid-template-columns: 1fr;
    grid-template-areas: "main" "aside" "comments";
    gap: 36px;
  }
  .cinema--anime .detail__aside {
    position: static;
  }
}
@media (max-width: 740px) {
  .cinema .wrap {
    width: min(calc(100% - 36px), var(--wrap));
  }
  .cinema .section {
    padding-block: 44px;
  }
  .cinema .cin-hero {
    min-height: auto;
  }
  .cinema .cin-hero__grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: auto;
  }
  .cin-hero__copy {
    position: relative;
    z-index: 2;
    padding: 40px 0 8px;
  }
  .cin-hero__copy > .cin-section-kicker {
    margin-bottom: 24px;
    font-size: 0.58rem;
  }
  .cinema .cin-hero .hero__title {
    font-size: clamp(2.85rem, 12vw, 4.5rem);
    margin-bottom: 17px;
  }
  .cinema .cin-hero .cin-hero__subtitle {
    margin-top: 12px;
    font-size: 1.03rem;
  }
  .cinema .cin-hero .hero__desc {
    font-size: 0.88rem;
    line-height: 1.7;
  }
  .cinema .cin-hero .hero__actions {
    margin-top: 23px;
    gap: 10px;
  }
  .cinema .cin-hero .btn--lg {
    height: 48px;
    padding: 0 18px;
    font-size: 0.82rem;
  }
  .cin-hero__micro {
    display: none;
  }
  .cin-hero__visual {
    min-height: 360px;
    margin-top: 0;
    transform: translateY(-5px);
    align-self: stretch;
  }
  .cin-hero__poster {
    width: min(54%, 220px);
    aspect-ratio: 0.78;
    transform: rotate(-6deg);
  }
  .cin-hero__poster-meta {
    padding: 25px 16px 12px;
  }
  .cin-hero__poster-meta span {
    font-size: 0.45rem;
  }
  .cin-hero__poster-meta b {
    font-size: 1.4rem;
  }
  .cin-hero__backplate {
    width: 54%;
    height: 82%;
    top: 8%;
    right: 14%;
  }
  .cin-hero__floating {
    right: 3%;
    bottom: 20%;
    min-width: 0;
    padding: 10px;
  }
  .cin-hero__floating-icon {
    width: 28px;
    height: 28px;
    font-size: 1rem;
  }
  .cin-hero__floating span {
    font-size: 0.58rem;
  }
  .cin-hero__floating strong {
    font-size: 0.69rem;
  }
  .cin-hero__bottom {
    padding-bottom: 21px;
    font-size: 0.57rem;
  }
  .cin-benefits__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .cin-benefit {
    padding: 14px 0;
    border-right: 0;
    border-bottom: 1px solid #ffffff10;
  }
  .cin-benefit:last-child {
    border-bottom: 0;
  }
  .cin-benefit__arrow {
    display: block;
  }
  .cinema--index .grid-eps {
    grid-template-columns: 1fr;
  }
  .cinema--index .grid-posters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 13px;
  }
  .cin-discover {
    padding: 4px 0 50px;
  }
  .cin-discover__inner {
    display: block;
    padding: 29px 23px;
    min-height: auto;
  }
  .cin-discover__inner h2 {
    font-size: 1.7rem;
  }
  .cin-discover__inner > .btn {
    margin-top: 22px;
  }
  .cin-catalog-head {
    padding: 30px 22px;
    min-height: 0;
  }
  .cin-catalog-head .section__title {
    font-size: 2.3rem;
  }
  .cin-catalog-head .watch-note {
    font-size: 0.87rem;
  }
  .cin-catalog-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin-top: 33px;
  }
  .cin-catalog-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .cin-catalog-aside {
    position: static;
    padding: 15px 16px;
  }
  .cin-filter-heading {
    padding-bottom: 11px;
    margin-bottom: 11px;
  }
  .cin-filter-heading h3 {
    font-size: 0.97rem;
  }
  .cin-filter-tip {
    display: none;
  }
  .cin-filter-buttons {
    display: flex;
    flex-wrap: wrap;
  }
  .cin-filter-buttons button {
    width: auto;
    padding: 9px 12px;
    font-size: 0.77rem;
  }
  .cin-filter-tick {
    display: none;
  }
  .cinema--catalog .grid-posters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 14px;
  }
  .cinema--catalog .grid-posters.cin-list-mode {
    grid-template-columns: 1fr;
  }
  .cinema--anime .title-hero {
    padding-bottom: 27px;
  }
  .cinema--anime .title-hero__inner {
    grid-template-columns: minmax(105px, 150px) minmax(0, 1fr);
    gap: 18px;
    align-items: center;
  }
  .cinema--anime .title-hero__poster {
    width: 100%;
    border-radius: 15px;
  }
  .cinema--anime .crumbs {
    margin: 6px 0 24px;
  }
  .cinema--anime .title-hero h1 {
    font-size: clamp(1.45rem, 5vw, 2.1rem);
  }
  .cin-detail-kicker {
    font-size: 0.54rem;
    letter-spacing: 0.1em;
    margin-bottom: 9px;
  }
  .cin-title-chips {
    margin-top: 10px;
  }
  .cin-title-chips span {
    padding: 5px 7px;
    font-size: 0.56rem;
  }
  .cinema--anime .names {
    font-size: 0.73rem;
    margin-top: 12px;
    gap: 4px;
  }
  .cinema--anime .names div {
    display: block;
  }
  .cinema--anime .score-row {
    gap: 7px;
  }
  .cinema--anime .score,
  .cinema--anime .rate {
    padding: 7px 10px;
  }
  .cinema--anime .score__star {
    width: 19px;
    height: 19px;
  }
  .cinema--anime .score__value {
    font-size: 1.3rem;
  }
  .cinema--anime .score__votes {
    font-size: 0.66rem;
    max-width: 12ch;
  }
  .cinema--anime .rate label {
    font-size: 1.04rem;
  }
  .cinema--anime .title-hero__actions {
    margin-top: 14px;
  }
  .cinema--anime .title-hero__actions .btn {
    height: 43px;
    padding: 0 12px;
    font-size: 0.73rem;
  }
  .cin-detail-nav {
    padding: 5px;
    gap: 0;
    min-height: auto;
    margin-block: 15px 26px;
  }
  .cin-detail-nav a {
    flex: 1;
    justify-content: center;
    padding: 10px 7px;
    font-size: 0.75rem;
    white-space: nowrap;
  }
  .cin-detail-nav > span {
    display: none;
  }
  .cinema--anime .player-module {
    border-radius: 15px;
  }
  .cinema--anime .episodes-wrap,
  .cinema--anime .watch-series {
    padding: 16px 12px;
  }
  .cinema--anime .episodes {
    grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
    gap: 7px;
  }
  .cinema--anime .ep-btn {
    height: 44px;
  }
  .cinema--anime .detail__main {
    gap: 34px;
  }
}
@media (max-width: 440px) {
  .cin-catalog-head .catalog-form {
    flex-wrap: wrap;
  }
  .cin-catalog-head .catalog-form input {
    width: 100%;
    flex-basis: 100%;
  }
  .cin-catalog-head .catalog-form .btn {
    width: 100%;
  }
  .cin-catalog-tools {
    justify-content: space-between;
  }
  .cin-catalog-tools select {
    max-width: calc(100% - 100px);
    font-size: 0.77rem;
  }
  .cin-search-mark {
    top: 10px;
  }
  .cinema--anime .title-hero__inner {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 14px;
  }
  .cinema--anime .names {
    display: none;
  }
  .cinema--anime .score-row {
    margin-top: 12px;
  }
  .cinema--anime .rate {
    padding: 5px;
  }
  .cinema--anime .rate__label {
    font-size: 0.64rem;
  }
  .cinema--anime .title-hero__actions {
    grid-column: 1/-1;
  }
  .cinema--anime .title-hero__actions .btn {
    font-size: 0.68rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cin-hero__poster,
  .cin-hero__floating {
    animation: none !important;
  }
  .cinema .btn,
  .cinema .anime-card__link,
  .cinema .anime-card__link img,
  .cinema .ep-btn {
    transition: none !important;
  }
}

/* Modern player generated by app.ts for every anime with episodes */
.cinema--anime .watch-guide {
  display: grid;
  gap: 15px;
}
.cinema--anime .watch-preview {
  border: 1px solid #b8d0f73a;
  border-radius: 20px;
  background: #040b19;
  box-shadow: 0 22px 50px -35px #000b;
}
.cinema--anime .watch-preview iframe {
  border: 0;
}
.cinema--anime .watch-series {
  border: 1px solid #c4daf737;
  border-radius: 20px;
  padding: 22px 22px 24px;
  background: linear-gradient(130deg, #1d2b4c, #14223c);
}
.cinema--anime .watch-series .episodes-head {
  margin-bottom: 16px;
  padding-bottom: 15px;
  border-bottom: 1px solid #c4d9ff23;
}
.cinema--anime .watch-series .episodes-head h3 {
  font-size: 0.94rem;
  letter-spacing: -0.015em;
}
.cinema--anime .watch-series .episodes-head h3::before {
  background: #ffe078;
  box-shadow: none;
}
.cinema--anime .watch-series .episodes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: 9px;
}
.cinema--anime .watch-series .ep-btn {
  width: 100%;
  height: 48px;
  aspect-ratio: auto;
  border: 1px solid #c0d6f52e;
  border-radius: 11px;
  background: #26385a;
  color: #c6d8ee;
  font-size: 0.88rem;
  font-weight: 760;
  box-shadow: none;
  transform: none;
  animation: none;
}
.cinema--anime .watch-series .ep-btn:hover:not(.is-current) {
  background: #344e72;
  color: #fff;
  border-color: #b9d7f978;
  transform: translateY(-2px);
  box-shadow: none;
}
.cinema--anime .watch-series .ep-btn.is-current {
  background: #ffe078;
  color: #182037;
  border-color: #ffe078;
  box-shadow: 0 10px 22px -12px #ffda6faa;
  animation: none;
  transform: none;
}
.cinema--anime .watch-guide__links {
  gap: 9px;
}
.cinema--anime .watch-guide__links .btn {
  border-radius: 12px;
  min-height: 44px;
  height: auto;
  white-space: normal;
  padding-block: 10px;
  font-size: 0.82rem;
  text-align: center;
}
.cinema--anime .watch-note {
  color: #9aacc7;
  font-size: 0.78rem;
  line-height: 1.6;
}
@media (max-width: 740px) {
  .cinema--anime .watch-series {
    padding: 16px 14px;
    border-radius: 15px;
  }
  .cinema--anime .watch-series .episodes {
    grid-template-columns: repeat(auto-fill, minmax(43px, 1fr));
    gap: 7px;
  }
  .cinema--anime .watch-series .ep-btn {
    height: 43px;
  }
  .cinema--anime .watch-preview {
    border-radius: 14px;
  }
}

/* Detail-page polish: clearer hierarchy, calmer surfaces and stronger focus. */
.cinema--anime {
  --detail-surface: #121f36;
  --detail-card: #172741;
}
.cinema--anime .title-hero {
  isolation: isolate;
  padding-block: 24px 54px;
  background:
    radial-gradient(ellipse at 82% 24%, #74529a26, transparent 44%),
    linear-gradient(135deg, #121c32, #0d172b 68%);
}
.cinema--anime .title-hero__bg {
  opacity: 0.72;
  mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%);
}
.cinema--anime .title-hero__bg::after {
  background:
    linear-gradient(90deg, #0b1429e8 0%, #0b1429bd 48%, #0b14297a 100%),
    linear-gradient(0deg, #0d172b 0%, #0d172b9c 24%, transparent 82%);
}
.cinema--anime .title-hero__inner {
  align-items: center;
}
.cinema--anime .title-hero__poster {
  border-color: #e8edff45;
  box-shadow:
    0 28px 60px -26px #000e,
    0 0 0 7px #ffffff08;
}
.cin-detail-kicker {
  width: fit-content;
  min-height: 28px;
  padding: 0 11px;
  border: 1px solid #ffe07835;
  border-radius: 999px;
  background: #ffe0780d;
  letter-spacing: 0.13em;
}
.cinema--anime .title-hero h1 {
  max-width: 20ch;
  line-height: 1.12;
  text-shadow: 0 2px 26px #050b18a8;
}
.cin-title-chips span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding-inline: 11px;
  border-radius: 999px;
}
.cinema--anime .names {
  display: grid;
  gap: 7px;
  max-width: 68ch;
}
.cinema--anime .names > div {
  display: flex;
  flex-wrap: wrap;
  column-gap: 9px;
  row-gap: 2px;
}
.cinema--anime .score,
.cinema--anime .rate {
  min-height: 60px;
  background: #101d34c9;
  border-color: #cadcff2b;
}
.cinema--anime .title-hero__actions .btn {
  min-height: 52px;
  border-radius: 14px;
}
.cinema--anime .title-hero__actions .btn--primary {
  box-shadow: 0 12px 32px -15px #ffcf5bd9;
}
.cin-detail-nav {
  position: sticky;
  top: calc(var(--header-h) + 10px);
  z-index: 20;
  margin-block: 18px 34px;
  min-height: 58px;
  background: #101c31ed;
  border-color: #b6cbed24;
  backdrop-filter: blur(18px) saturate(1.3);
}
.cin-detail-nav a {
  min-height: 40px;
  padding-inline: 16px;
}
.cinema--anime .detail {
  column-gap: clamp(24px, 3vw, 42px);
}
.cinema--anime .detail__main > section,
.cinema--anime .detail__aside .panel,
.cinema--anime .comments {
  border: 1px solid #b9d1f021;
  border-radius: 20px;
  background: linear-gradient(145deg, #14223a, #111e34);
}
.cinema--anime .detail__main > section {
  padding: clamp(20px, 2.4vw, 30px);
}
.cinema--anime .detail__main > section[aria-labelledby="player-h"] {
  padding: clamp(20px, 2.4vw, 30px);
}
.cinema--anime .synopsis {
  border-left: 3px solid #ffe078a6 !important;
}
.cinema--anime .synopsis p {
  max-width: 68ch;
  color: #d0dbee;
}
.cinema--anime #player {
  scroll-margin-top: calc(var(--header-h) + 90px);
}
.cinema--anime .cin-player-subtitle {
  margin-left: 15px;
  margin-bottom: 18px;
}
.cinema--anime .player-module {
  overflow: clip;
  border-color: #c5d9fa32;
  background: #101c30;
}
.cinema--anime .watch-guide {
  grid-template-columns: minmax(0, 1fr);
}
.cinema--anime .watch-preview {
  order: 1;
  aspect-ratio: 16 / 9;
  border-color: #d2e0fa34;
  box-shadow: 0 25px 55px -38px #000;
}
.cinema--anime .watch-series {
  order: 2;
  padding: 20px;
  background: #111f35;
}
.cinema--anime .watch-guide__links {
  order: 3;
}
.cinema--anime .watch-note {
  order: 4;
  margin: 0;
  padding: 12px 14px;
  border-left: 2px solid #ffe07876;
  border-radius: 0 10px 10px 0;
  background: #ffe0780a;
}
.cinema--anime .detail__aside .panel {
  padding: 24px;
}
.cinema--anime .info-list > div {
  grid-template-columns: minmax(86px, 0.7fr) minmax(0, 1.3fr);
}
.cinema--anime .info-list .chips {
  gap: 6px;
}
.cinema--anime .info-list .chip {
  min-height: 27px;
  padding-inline: 9px;
  font-size: 0.72rem;
}
.cinema--anime .comments {
  padding: clamp(20px, 2.4vw, 30px);
}
.cinema--anime .comment-form {
  border-color: #c5d9fa26;
  background: #0e1a2e;
}
.cinema--anime .comment {
  padding-block: 20px;
}
.cinema--anime .comment__text {
  line-height: 1.75;
}
.cinema--anime .rel-card {
  min-height: 96px;
  border-radius: 15px;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}
.cinema--anime .rel-card:hover {
  transform: translateY(-2px);
}
.cinema--anime :is(.title-hero__actions, .watch-guide__links) .btn:focus-visible,
.cin-detail-nav a:focus-visible,
.cinema--anime .ep-btn:focus-visible {
  outline: 3px solid #ffe078;
  outline-offset: 3px;
}

@media (max-width: 740px) {
  .cinema--anime .title-hero {
    padding-block: 16px 30px;
  }
  .cinema--anime .title-hero__inner {
    align-items: start;
  }
  .cinema--anime .title-hero__poster {
    box-shadow: 0 18px 40px -24px #000e, 0 0 0 4px #ffffff08;
  }
  .cinema--anime .score-row {
    align-items: stretch;
  }
  .cinema--anime .score,
  .cinema--anime .rate {
    min-width: 0;
  }
  .cin-detail-nav {
    top: calc(var(--header-h) + 4px);
    margin-block: 12px 22px;
  }
  .cinema--anime .detail__main > section,
  .cinema--anime .detail__main > section[aria-labelledby="player-h"],
  .cinema--anime .comments {
    padding: 18px 15px;
    border-radius: 16px;
  }
  .cinema--anime .detail__aside .panel {
    padding: 19px 16px;
  }
  .cinema--anime .watch-series {
    padding: 16px 13px;
  }
}
@media (max-width: 440px) {
  .cinema--anime .title-hero__actions .dropdown--list {
    left: auto;
    right: 0;
  }
  .cinema--anime .title-hero__inner {
    grid-template-columns: 102px minmax(0, 1fr);
    gap: 12px;
  }
  .cinema--anime .title-hero__poster {
    border-radius: 12px;
  }
  .cin-detail-kicker {
    min-height: 24px;
    padding-inline: 8px;
    font-size: 0.48rem;
    letter-spacing: 0.07em;
  }
  .cinema--anime .title-hero h1 {
    font-size: clamp(1.24rem, 6vw, 1.72rem);
  }
  .cin-title-chips span {
    min-height: 26px;
    padding-inline: 8px;
    font-size: 0.53rem;
  }
  .cinema--anime .names {
    display: grid;
    font-size: 0.66rem;
  }
  .cinema--anime .score-row {
    grid-column: 1 / -1;
  }
  .cinema--anime .score,
  .cinema--anime .rate {
    padding: 7px;
  }
  .cinema--anime .score__votes {
    max-width: 15ch;
  }
  .cinema--anime .title-hero__actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .cinema--anime .title-hero__actions .btn {
    width: 100%;
    min-height: 44px;
    height: auto;
    padding-inline: 9px;
    white-space: normal;
    text-align: center;
  }
  .cin-detail-nav a {
    padding-inline: 5px;
    font-size: 0.69rem;
  }
  .cin-detail-nav a.is-active::before {
    margin-right: 5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cinema--anime .rel-card {
    transition: none;
  }
}

/* Mobile home: long translations must never stretch the whole page sideways. */
@media (max-width: 740px) {
  html:lang(ru) .cinema--index .section__head {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  html:lang(ru) .cinema--index .section__head > .section__title {
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  html:lang(ru) .cinema--index .section__head > .section__more {
    flex: 0 1 auto;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}