.discover-page {
  background:
    radial-gradient(ellipse at 72% -8%, rgba(153, 65, 48, 0.2), transparent 38%),
    radial-gradient(circle at 5% 36%, rgba(119, 32, 42, 0.15), transparent 30%),
    linear-gradient(145deg, #26090d 0%, #140205 54%, #21070a 100%);
  background-attachment: fixed;
}

.discover-shell {
  width: min(1240px, calc(100% - 40px));
  margin: 0 auto;
  padding: 24px 0 88px;
  color: #fff8ed;
}

.discover-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(340px, 1.12fr);
  gap: clamp(34px, 7vw, 96px);
  align-items: end;
  min-height: 168px;
  border: 1px solid rgba(255, 248, 237, 0.18);
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at 79% 12%, rgba(219, 170, 76, 0.18), transparent 28%),
    linear-gradient(112deg, rgba(95, 15, 22, 0.92), rgba(46, 8, 13, 0.95) 54%, rgba(24, 3, 7, 0.98));
  box-shadow: 0 30px 72px rgba(7, 0, 1, 0.32), inset 0 1px 0 rgba(255,255,255,0.05);
  padding: clamp(20px, 3vw, 38px);
}

.discover-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.025), transparent);
  pointer-events: none;
}

.discover-hero-copy,
.discover-search {
  position: relative;
  z-index: 1;
}

.discover-eyebrow,
.discover-kicker,
.discover-dialog-kicker {
  color: #e0b85e;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: none;
}

.discover-hero h1 {
  margin: 4px 0 2px;
  color: #fffaf1;
  font-family: var(--font-display);
  font-size: 4.7rem;
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 0.84;
}

.discover-hero-copy > p {
  margin: 12px 0 0;
  color: #daccc0;
  font-family: var(--font-display);
  font-size: 1.35rem;
}

.discover-search {
  display: grid;
  gap: 10px;
}

.discover-search > label {
  color: #f4eadf;
  font-size: 0.77rem;
  font-weight: 800;
  letter-spacing: 0;
}

.discover-search-control {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(255, 248, 237, 0.35);
  border-radius: 12px;
  background: rgba(255, 252, 245, 0.98);
  box-shadow: 0 17px 40px rgba(7, 0, 0, 0.26);
  padding: 6px;
}

.discover-search-control > span {
  color: #721b20;
  font-size: 1.65rem;
  padding-left: 10px;
}

.discover-search-control input {
  min-height: 47px;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding-inline: 0;
}

.discover-search-control button {
  min-height: 42px;
  border: 1px solid #922523;
  border-radius: 8px;
  background: linear-gradient(180deg, #bd3933, #982723);
  color: #fffaf2;
  font-weight: 800;
  padding: 0 18px;
}

.discover-search small { color: #a99b92; }

.discover-tabs {
  display: flex;
  gap: 6px;
  margin: 24px 0 38px;
  border-bottom: 1px solid rgba(255, 248, 237, 0.13);
  overflow-x: auto;
  scrollbar-width: none;
}

.discover-tabs::-webkit-scrollbar { display: none; }

.discover-tabs button {
  flex: 0 0 auto;
  min-height: 48px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #a89b92;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0 17px;
}

.discover-tabs button:hover,
.discover-tabs button:focus-visible { color: #fff8e8; }

.discover-tabs button.is-active {
  border-bottom-color: var(--gold);
  color: #fff8e8;
}

.discover-content { min-height: 420px; }

.discover-spotlight-carousel {
  position: relative;
  margin-bottom: 54px;
}

.discover-spotlight-carousel .discover-spotlight { margin-bottom: 0; }
.discover-spotlight-stage { height: 430px; }

.discover-spotlight-controls {
  position: absolute;
  z-index: 3;
  right: 24px;
  bottom: 22px;
  display: flex;
  gap: 9px;
}

.discover-spotlight-controls button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid rgba(255, 248, 232, 0.72);
  border-radius: 50%;
  background: rgba(30, 3, 7, 0.62);
  cursor: pointer;
}

.discover-spotlight-controls button.is-active {
  border-color: #efc457;
  background: #efc457;
}

.discover-spotlight.is-entering { animation: discover-spotlight-enter 420ms ease both; }

@keyframes discover-spotlight-enter {
  from { opacity: 0.35; }
  to { opacity: 1; }
}

.discover-spotlight {
  --spotlight-poster-width: clamp(230px, 22vw, 292px);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--spotlight-poster-width);
  height: 430px;
  align-items: stretch;
  margin-bottom: 54px;
  border: 1px solid rgba(255, 248, 237, 0.2);
  border-radius: 8px;
  overflow: hidden;
  background: #1b0306;
  box-shadow: 0 30px 70px rgba(5, 0, 1, 0.38);
  cursor: pointer;
}

.discover-spotlight::before {
  content: "";
  position: absolute;
  inset: 0 var(--spotlight-poster-width) 0 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(17, 2, 5, 0.98) 0%, rgba(24, 4, 8, 0.88) 46%, rgba(18, 2, 5, 0.38) 78%),
    var(--spotlight-image, linear-gradient(135deg, #5f161c, #21060a)) center 28% / cover no-repeat;
  pointer-events: none;
}

.discover-spotlight::after {
  content: "";
  position: absolute;
  inset: auto var(--spotlight-poster-width) 0 0;
  z-index: 0;
  height: 55%;
  background: linear-gradient(transparent, rgba(13, 1, 3, 0.88));
  pointer-events: none;
}

.discover-spotlight-copy {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-width: 0;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: clamp(22px, 3vw, 36px);
}

.discover-spotlight h2 {
  display: block;
  max-width: 100%;
  margin: 0 0 2px;
  overflow: hidden;
  color: #fff9ec;
  font-family: var(--font-display);
  font-size: 70px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.02;
  text-wrap: nowrap;
  white-space: nowrap;
}

.discover-spotlight-synopsis {
  width: min(100%, 720px);
  min-height: 0;
  margin: 8px 0 0;
  overflow: hidden;
}

.discover-spotlight-synopsis h3 {
  margin: 0 0 3px;
  color: #efc457;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0;
}

.discover-spotlight-synopsis p {
  display: -webkit-box;
  max-height: 126px;
  margin: 0;
  overflow: hidden;
  color: #e2d8cf;
  font-size: 0.88rem;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
}

.discover-spotlight-meta {
  display: flex;
  flex-wrap: wrap;
  width: min(100%, 720px);
  gap: 4px 18px;
  align-items: baseline;
}

.discover-spotlight-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
}

.discover-spotlight-meta span {
  min-width: 0;
  overflow: hidden;
  color: #f2e8dd;
  font-size: 0.72rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-spotlight-meta .discover-spotlight-rating { color: #efc457; }
.discover-spotlight-meta .discover-spotlight-date { color: #fff9ec; }
.discover-spotlight-meta .discover-spotlight-genres { color: #d2c4b9; }

.discover-spotlight-actions { align-self: end; justify-self: start; margin-top: 14px; }
.discover-spotlight-actions .secondary-button { display: inline-flex; min-height: 42px; align-items: center; border-color: rgba(255,255,255,0.3); background: rgba(28,4,7,0.72); color: #fff8eb; padding: 0 16px; }

.discover-spotlight-poster {
  position: relative;
  z-index: 2;
  min-width: 0;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border-left: 1px solid rgba(255,248,237,0.2);
  background: #1b0306;
}
.discover-spotlight-poster img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.discover-spotlight-poster.is-fallback { display: grid; place-items: center; align-content: center; gap: 8px; color: #efc457; padding: 18px; text-align: center; }
.discover-spotlight-poster.is-fallback span { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; }
.discover-spotlight-poster.is-fallback strong { color: #fff8e9; font-family: var(--font-display); font-size: 1.6rem; }

.discover-collection { margin: 0 0 54px; }
.discover-collection.is-release-major { margin-bottom: 28px; }
.discover-collection.is-release-secondary { margin-bottom: 64px; }

.discover-release-month {
  display: block;
  margin-bottom: 8px;
  color: #fffaf0;
  font-family: var(--font-display);
  font-size: 3.4rem;
  font-weight: 600;
  line-height: 1;
}

.discover-collection.is-release-major .discover-collection-heading h2,
.discover-collection.is-release-secondary .discover-collection-heading h2 {
  color: #e8c46f;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
}

.discover-collection-heading {
  display: flex;
  gap: 22px;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 20px;
}

.discover-collection-heading h2 {
  display: flex;
  gap: 11px;
  align-items: center;
  margin: 0;
  color: #fffaf0;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.025em;
}

.discover-collection-heading h2 span { font-family: "Segoe UI Emoji", sans-serif; font-size: 0.6em; }
.discover-collection-heading p { margin: 4px 0 0; color: #9f928a; font-size: 0.82rem; }
.discover-collection-count { flex: 0 0 auto; color: #887c75; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }

.discover-poster-row {
  display: grid;
  grid-auto-columns: minmax(154px, 188px);
  grid-auto-flow: column;
  gap: 18px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: 2px 2px 20px;
  scroll-snap-type: inline proximity;
  scrollbar-color: rgba(202, 162, 77, 0.48) rgba(255,255,255,0.045);
  scrollbar-width: thin;
}

.discover-poster-card {
  min-width: 0;
  border-radius: 12px;
  outline: 0;
  cursor: pointer;
  scroll-snap-align: start;
}

.discover-poster-art {
  position: relative;
  aspect-ratio: 2 / 3;
  border: 1px solid rgba(255, 248, 237, 0.2);
  border-radius: 11px;
  overflow: hidden;
  background: #2c080d;
  box-shadow: 0 18px 36px rgba(3, 0, 1, 0.33);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.discover-poster-card:hover .discover-poster-art,
.discover-poster-card:focus-visible .discover-poster-art {
  border-color: rgba(229, 188, 94, 0.72);
  box-shadow: 0 22px 44px rgba(3,0,1,0.45), 0 0 0 3px rgba(202,162,77,0.1);
  transform: translateY(-5px);
}

.discover-poster-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

.discover-poster-art.is-fallback {
  display: grid;
  place-content: center;
  gap: 10px;
  background:
    radial-gradient(circle at 70% 15%, rgba(216,163,62,0.22), transparent 27%),
    linear-gradient(145deg, #8a2529, #3b0a10 56%, #1d0307);
  padding: 18px;
  text-align: center;
}

.discover-poster-art.is-fallback > span:not(.discover-type-badge) { color: #dcb45c; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.discover-poster-art.is-fallback > strong { color: #fff6e7; font-family: var(--font-display); font-size: 1.28rem; line-height: 1.04; }

.discover-type-badge {
  position: absolute;
  top: 9px;
  left: 9px;
  border: 1px solid rgba(255,255,255,0.26);
  border-radius: 999px;
  background: rgba(23,3,6,0.76);
  color: #fff7e9;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 4px 7px;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}

.discover-poster-copy { display: grid; gap: 4px; padding: 13px 2px 0; }
.discover-poster-copy h3 { margin: 0; overflow: hidden; color: #fff8ec; font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.discover-poster-copy p { min-height: 18px; margin: 0; overflow: hidden; color: #92867f; font-size: 0.68rem; text-overflow: ellipsis; white-space: nowrap; }
.discover-social-note { display: -webkit-box; min-height: 33px; overflow: hidden; color: #c9bdb2; font-size: 0.65rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

.discover-keep-button {
  width: 100%;
  min-height: 36px;
  margin-top: 7px;
  border: 1px solid rgba(202, 162, 77, 0.62);
  border-radius: 7px;
  background: rgba(87, 20, 23, 0.7);
  color: #f5d681;
  font-size: 0.72rem;
  font-weight: 800;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.discover-keep-button:hover,
.discover-keep-button:focus-visible { border-color: #e3bd65; background: #862528; color: #fff7e8; }
.discover-keep-button.is-kept { border-color: rgba(84,144,111,0.62); background: rgba(41,91,68,0.42); color: #b9dcc8; }
.discover-spotlight-actions .discover-keep-button { width: auto; min-height: 42px; margin: 0; padding: 0 18px; }

.discover-source-note { margin: 18px 0 0; color: #776d67; font-size: 0.66rem; text-align: center; }

.discover-state {
  display: grid;
  min-height: 330px;
  place-items: center;
  align-content: center;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 16px;
  background: rgba(68,12,17,0.38);
  padding: 34px;
  text-align: center;
}
.discover-state > span { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(202,162,77,0.5); border-radius: 50%; color: #ddb65f; }
.discover-state h2 { margin: 18px 0 7px; color: #fff8ed; font-family: var(--font-display); font-size: 2.3rem; }
.discover-state p { max-width: 56ch; margin: 0 0 22px; color: #a99d94; line-height: 1.65; }
.discover-state .secondary-button { display: inline-flex; align-items: center; background: transparent; color: #f0d99d; padding: 0 16px; }

.discover-keep-card .dialog-header { align-items: start; }
.discover-keep-film { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 14px; align-items: center; border-bottom: 1px solid var(--line-on-light); padding: 0 0 16px; }
.discover-keep-thumb { aspect-ratio: 2 / 3; border-radius: 6px; overflow: hidden; background: #4a1117; }
.discover-keep-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.discover-keep-film > div:last-child { display: grid; gap: 3px; }
.discover-keep-film strong { color: #451012; font-family: var(--font-display); font-size: 1.3rem; }
.discover-keep-film span { color: #776b62; font-size: 0.75rem; }

.discover-watchlist-options legend { margin-bottom: 8px; color: #4b3f38; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.discover-watchlist-options > div { display: grid; gap: 7px; max-height: min(34dvh, 260px); overflow-y: auto; padding-right: 4px; }
.discover-watchlist-year { display: grid; gap: 4px; }
.discover-watchlist-year h3 { margin: 0; color: #8a5d28; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; }
.discover-watchlist-year label { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; align-items: center; min-height: 44px; border: 1px solid #ded3c6; border-radius: 8px; background: #fffdf9; padding: 6px 11px; cursor: pointer; }
.discover-watchlist-year label:has(input:checked) { border-color: #c69b40; background: #fff7df; }
.discover-watchlist-year input { width: 18px; min-height: 18px; accent-color: #9c2926; }
.discover-watchlist-year label > span { display: grid; gap: 2px; }
.discover-watchlist-year strong { color: #431013; font-size: 0.8rem; }
.discover-watchlist-year small { color: #81756d; font-size: 0.65rem; }
.discover-new-list-toggle { justify-self: start; border: 0; background: transparent; padding: 4px 0; }
.discover-new-list-fields label { display: grid; gap: 5px; color: #554841; font-size: 0.72rem; font-weight: 700; }

.discover-loading-intro h2 {
  margin: 7px 0 22px;
  color: #fffaf0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 600;
}

.discover-skeleton-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
}

.discover-skeleton-row span {
  aspect-ratio: 2 / 3;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  background: linear-gradient(105deg, rgba(255,255,255,0.035) 35%, rgba(255,255,255,0.09) 48%, rgba(255,255,255,0.035) 62%);
  background-size: 240% 100%;
  animation: discover-shimmer 1.55s infinite linear;
}

@keyframes discover-shimmer { to { background-position-x: -240%; } }

.discover-keep-dialog .discover-keep-card {
  width: 100%;
  max-height: calc(100dvh - 28px);
  box-sizing: border-box;
  overflow-x: hidden;
}

.discover-watchlist-options { min-width: 0; border: 0; padding: 0; }
.discover-new-list-toggle { color: #7b1f22; font-weight: 800; }
.discover-keep-status { min-height: 20px; color: #73685f; }

@media (max-width: 860px) {
  .discover-hero { grid-template-columns: 1fr; align-items: start; }
  .discover-hero h1 { font-size: 4.2rem; }
  .discover-spotlight { --spotlight-poster-width: 220px; }
  .discover-skeleton-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .discover-skeleton-row span:nth-child(n+5) { display: none; }
}

@media (max-width: 600px) {
  .discover-shell { width: 100%; padding-top: 8px; }
  .discover-hero { min-height: 0; gap: 18px; border-radius: 13px; padding: 20px 16px 18px; }
  .discover-hero h1 { font-size: 3.2rem; }
  .discover-search-control { grid-template-columns: auto minmax(0, 1fr); }
  .discover-search-control button { grid-column: 1 / -1; width: 100%; }
  .discover-tabs { margin-bottom: 30px; }
  .discover-spotlight { display: block; height: 510px; background: #1b0306; }
  .discover-spotlight::before { inset: 0; }
  .discover-spotlight::after { right: 0; }
  .discover-spotlight-stage { height: 510px; }
  .discover-spotlight-controls { right: 16px; bottom: 16px; }
  .discover-spotlight-copy { height: 510px; padding: 22px 16px; }
  .discover-spotlight h2 { max-width: calc(100% - 126px); min-height: 150px; font-size: clamp(2.2rem, 11vw, 3.4rem); white-space: normal; text-wrap: balance; }
  .discover-spotlight-meta { max-width: calc(100% - 118px); gap: 3px 10px; }
  .discover-spotlight-meta span { font-size: 0.62rem; }
  .discover-spotlight-synopsis { margin-top: 10px; }
  .discover-spotlight-synopsis p { max-height: 146px; font-size: 0.78rem; -webkit-line-clamp: 8; }
  .discover-spotlight-poster { position: absolute; z-index: 3; top: 14px; right: 14px; width: 108px; min-height: 0; aspect-ratio: 2 / 3; border: 1px solid rgba(255,248,237,0.24); border-radius: 4px; }
  .discover-release-month { font-size: 2.2rem; }
  .discover-collection-heading { align-items: start; }
  .discover-collection-count { display: none; }
  .discover-poster-row { grid-auto-columns: minmax(142px, 44vw); gap: 13px; margin-right: -12px; }
  .discover-skeleton-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .discover-skeleton-row span:nth-child(n+3) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .discover-skeleton-row span { animation: none; }
  .discover-spotlight.is-entering { animation: none; }
}

/* Discover-connected film pages. */
.film-page {
  background:
    radial-gradient(ellipse at 70% -6%, rgba(127, 43, 43, 0.22), transparent 42%),
    linear-gradient(145deg, #24080c, #130204 58%, #21070a);
  background-attachment: fixed;
}

.film-world-shell {
  width: min(1240px, calc(100% - 40px));
  padding-top: 10px;
  color: #fff8ec;
}

.film-world-shell .film-back-link { display: inline-flex; margin-bottom: 8px; color: #c8b9ad; font-size: 0.74rem; font-weight: 800; text-decoration: none; }
.film-world-shell .film-back-link[hidden] { display: none; }
.film-world-shell .film-back-link::before { content: "‹"; margin-right: 7px; color: #d5aa4e; font-size: 1.15em; }
.film-world-shell .film-back-link:hover { color: #fff7e8; }

.film-discover-return {
  display: flex;
  align-items: center;
  min-height: 24px;
  margin-bottom: 8px;
  color: #c8b9ad;
  font-size: 0.76rem;
  font-weight: 800;
}

.film-discover-return[hidden] { display: none; }
.film-discover-home { color: #c8b9ad; text-decoration: none; }
.film-discover-home::before { content: "‹"; margin-right: 7px; color: #d5aa4e; font-size: 1.15em; }
.film-discover-home:hover { color: #fff7e8; }
.film-discover-separator { margin: 0 8px; color: rgba(213, 170, 78, 0.62); }
.film-discover-menu { position: relative; }
.film-discover-menu summary {
  color: #f0cf85;
  cursor: pointer;
  list-style: none;
}
.film-discover-menu summary::-webkit-details-marker { display: none; }
.film-discover-menu summary::after { content: "⌄"; margin-left: 7px; color: #d5aa4e; }
.film-discover-menu summary:hover { color: #fff7e8; }
.film-discover-menu-panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: -10px;
  width: 190px;
  padding: 6px;
  border: 1px solid rgba(213, 170, 78, 0.45);
  border-radius: 6px;
  background: #2b070b;
  box-shadow: 0 16px 34px rgba(5, 0, 1, 0.46);
}
.film-discover-menu-panel a {
  display: block;
  padding: 9px 10px;
  border-radius: 4px;
  color: #e6d9cc;
  text-decoration: none;
}
.film-discover-menu-panel a:hover,
.film-discover-menu-panel a:focus-visible { color: #fff8e8; background: rgba(213, 170, 78, 0.13); }

.film-world {
  position: relative;
  min-height: 720px;
  border: 1px solid rgba(255,248,237,0.19);
  border-radius: 8px;
  overflow: hidden;
  background: #21060a;
  box-shadow: 0 34px 82px rgba(5,0,1,0.42);
}

.film-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 25%, #76242a, #25060a 72%) center / cover no-repeat;
  filter: saturate(0.85);
  transform: scale(1.02);
}

.film-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(19,2,5,0.97) 0%, rgba(23,3,6,0.83) 45%, rgba(17,2,5,0.5) 100%),
    linear-gradient(0deg, rgba(15,1,3,0.98), rgba(15,1,3,0.28) 74%);
}

.film-world-hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  grid-template-rows: 30px auto;
  column-gap: clamp(24px, 3vw, 42px);
  row-gap: 2px;
  align-items: start;
  min-height: 720px;
  padding: clamp(26px, 4vw, 48px);
}

.film-world-poster {
  width: 100%;
  aspect-ratio: 2 / 3;
  border: 1px solid rgba(255,248,237,0.36);
  border-radius: 7px;
  overflow: hidden;
  background: linear-gradient(145deg, #8a282d, #31070d);
  box-shadow: 0 28px 60px rgba(4,0,1,0.46);
}

.film-poster-column { display: grid; grid-column: 1; grid-row: 2; gap: 14px; align-self: start; }
.film-score-panel {
  border: 1px solid rgba(255,248,237,0.24);
  border-radius: 7px;
  background: rgba(24,2,6,0.92);
  box-shadow: 0 18px 38px rgba(4,0,1,0.3);
  padding: 13px;
  backdrop-filter: blur(8px);
}
.film-score-panel h2 { margin: 0 0 10px; color: #d7b55f; font-family: var(--font-ui); font-size: 0.61rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.film-rating-list { overflow: hidden; border-block: 1px solid rgba(255,248,237,0.14); }
.film-rating-row { display: flex; width: 100%; min-height: 46px; box-sizing: border-box; align-items: center; justify-content: space-between; gap: 12px; border: 0; border-bottom: 1px solid rgba(255,248,237,0.1); border-radius: 0; background: linear-gradient(90deg, rgba(105,24,30,0.24), rgba(46,6,10,0.08)); color: #fff8ec; padding: 8px 9px; font: inherit; text-decoration: none; }
.film-rating-row:last-child { border-bottom: 0; }
.film-rating-row[href]:hover,
.film-rating-row-button:hover { background: linear-gradient(90deg, rgba(139,34,40,0.42), rgba(71,10,15,0.18)); color: #f0c766; }
.film-rating-row-button { cursor: pointer; text-align: left; }
.film-rating-row.is-unavailable { color: rgba(255,248,236,0.58); }
.film-rating-source { display: flex; min-width: 0; align-items: center; gap: 9px; font-size: 0.72rem; font-weight: 800; }
.film-rating-kino-logo { width: 92px; height: 30px; object-fit: contain; object-position: left center; }
.film-rating-value { flex: 0 0 auto; color: #f0c766; font-size: 0.82rem; font-weight: 900; }
.film-rating-row.is-unavailable .film-rating-value { color: rgba(255,248,236,0.42); }
.film-score-summary { margin: 9px 2px 0; color: #a9998f; font-size: 0.59rem; }
.film-score-form { display: grid; gap: 6px; border-top: 1px solid rgba(255,255,255,0.13); padding-top: 11px; }
.film-score-form[hidden] { display: none; }
.film-score-form > label { color: #d8cabe; font-size: 0.63rem; font-weight: 800; }
.film-score-control { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; }
.film-score-input-wrap { position: relative; display: block; }
.film-score-input-wrap input { width: 100%; min-height: 38px; border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; background: #fffaf1; color: #3e1215; padding: 7px 28px 7px 9px; font: inherit; }
.film-score-input-wrap > span { position: absolute; top: 50%; right: 9px; color: #765f59; font-size: 0.72rem; transform: translateY(-50%); }
.film-score-control .secondary-button { min-height: 38px; border-color: rgba(255,255,255,0.24); background: #8f2025; color: #fff8ec; padding: 0 12px; }
.film-score-form small { color: #96877f; font-size: 0.56rem; line-height: 1.35; }

.film-world-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.film-world-poster > span { display: grid; height: 100%; place-items: center; color: #e2ba5d; font-family: var(--font-display); font-size: 3rem; }
.film-profile-content {
  display: grid;
  grid-column: 2;
  grid-row: 2;
  grid-template-rows: var(--film-poster-height, 420px) auto auto;
  min-width: 0;
  gap: 14px;
}
.film-profile-heading {
  --film-title-max: 32;
  --film-title-min: 18;
  display: flex;
  grid-column: 1 / -1;
  grid-row: 1;
  width: 100%;
  height: 30px;
  box-sizing: border-box;
  min-width: 0;
  align-items: flex-start;
  gap: 10px;
  overflow: hidden;
  padding-top: 1px;
}
.film-profile-heading h1 {
  display: block;
  flex: 0 1 auto;
  max-width: 100%;
  margin: 0;
  color: #fff9ed;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 0.92;
  white-space: nowrap;
}
.film-title-rating { flex: 0 0 auto; align-self: center; color: #e3bf68; font-family: var(--font-sans); font-size: 0.68rem; font-weight: 900; line-height: 1; }
.film-poster-actions { display: grid; }
.film-poster-actions :where(a,button) { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; text-decoration: none; padding: 0 14px; }
.film-poster-actions .secondary-button { border-color: rgba(255,255,255,0.29); background: rgba(25,3,6,0.78); color: #fff8ec; }

.film-feature-grid { display: grid; height: 100%; min-height: 0; grid-template-columns: minmax(0, 2fr) minmax(220px, 0.8fr); gap: 14px; align-items: stretch; }
.film-trailer-stage {
  position: relative;
  display: grid;
  height: 100%;
  min-height: 0;
  min-width: 0;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,248,237,0.36);
  border-radius: 6px;
  background: #080204;
  box-shadow: 0 18px 42px rgba(4,0,1,0.34);
}
.film-trailer-art { position: absolute; inset: 0; background: #080204 center / cover no-repeat; opacity: 0.62; filter: grayscale(0.15); }
.film-trailer-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,1,2,0.46), rgba(7,1,2,0.06)); }
.film-trailer-placeholder { position: relative; z-index: 1; display: grid; justify-items: center; gap: 11px; padding: 18px; color: #fff8ec; text-align: center; }
.film-trailer-placeholder strong { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; }
.film-trailer-placeholder .secondary-button { min-height: 38px; border-color: rgba(255,255,255,0.3); background: rgba(25,3,6,0.82); color: #fff8ec; padding: 0 14px; text-decoration: none; }
.film-trailer-frame { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.film-trailer-external { position: absolute; z-index: 3; right: 12px; bottom: 11px; border-radius: 4px; background: rgba(13,2,4,0.82); color: #fff8ec; padding: 7px 10px; font-size: 0.68rem; font-weight: 800; text-decoration: none; }
.film-trailer-external:hover, .film-trailer-external:focus-visible { background: #751e23; color: #fff; outline: 2px solid rgba(246,217,141,0.34); }
.film-trailer-stage.is-playing::after, .film-trailer-stage.is-playing .film-trailer-art, .film-trailer-stage.is-playing .film-trailer-placeholder { display: none; }

.film-synopsis-panel {
  display: grid;
  height: 100%;
  min-height: 0;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  align-content: start;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255,248,237,0.3);
  border-radius: 6px;
  background: rgba(20,2,5,0.76);
  padding: clamp(16px, 2vw, 24px);
  backdrop-filter: blur(7px);
}
.film-release-block { display: grid; gap: 4px; border-bottom: 1px solid rgba(255,255,255,0.13); padding-bottom: 15px; }
.film-release-block span,
.film-synopsis-panel h2 { color: #d8b45c; font-family: var(--font-sans); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.film-release-block strong { color: #fff8ec; font-size: 0.8rem; line-height: 1.4; }
.film-genre { display: block; color: #d8ccc1; font-size: 0.72rem; line-height: 1.45; }
.film-synopsis-panel h2 { margin: 17px 0 6px; }
.film-synopsis-panel .film-detail-notes { min-height: 0; margin: 0; overflow: hidden; color: #d8ccc1; font-size: 0.78rem; line-height: 1.65; }
.film-synopsis-panel.is-expanded .film-detail-notes { overflow-y: auto; padding-right: 7px; scrollbar-color: rgba(216,180,92,0.58) rgba(255,255,255,0.06); scrollbar-width: thin; }
.film-synopsis-toggle { justify-self: start; margin-top: 10px; border: 0; border-bottom: 1px solid rgba(216,180,92,0.52); border-radius: 0; background: transparent; color: #e3bf68; font-size: 0.66rem; font-weight: 800; padding: 2px 0; }
.film-synopsis-toggle:hover { border-color: #f2cf78; color: #f2cf78; }

.film-people-section { position: relative; min-width: 0; }
.film-people-list { display: flex; min-width: 0; gap: 10px; overflow-x: auto; overflow-y: hidden; cursor: grab; scroll-behavior: smooth; scroll-snap-type: x proximity; scrollbar-color: rgba(213,170,78,0.5) rgba(255,255,255,0.06); scrollbar-width: thin; padding-bottom: 6px; }
.film-people-list.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; user-select: none; }
.film-person-card { flex: 0 0 calc((100% - 40px) / 5); min-width: 0; overflow: hidden; border: 1px solid rgba(255,248,237,0.29); border-radius: 5px; background: rgba(20,2,5,0.78); scroll-snap-align: start; }
.film-person-card img { pointer-events: none; user-select: none; }
.film-people-next { position: absolute; z-index: 3; top: 50%; right: 7px; display: grid; width: 38px; height: 56px; place-items: center; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #fff8ec; font-size: 2.5rem; line-height: 1; padding: 0 0 4px; text-shadow: 0 2px 8px rgba(4,0,1,0.9); transform: translateY(-50%); }
.film-people-next:hover { background: transparent; color: #e3bf68; }
.film-people-next[hidden] { display: none; }
.film-person-portrait { display: grid; aspect-ratio: 4 / 5; place-items: center; overflow: hidden; border-bottom: 1px solid rgba(255,248,237,0.22); background: linear-gradient(145deg, rgba(111,31,36,0.72), rgba(29,4,8,0.95)); }
.film-person-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 24%; }
.film-person-portrait span { color: rgba(244,211,137,0.72); font-family: var(--font-display); font-size: clamp(1.2rem, 2vw, 2rem); }
.film-person-card > div:last-child { display: grid; gap: 3px; min-height: 58px; align-content: center; padding: 9px; text-align: center; }
.film-person-card strong { color: #fff8ec; font-family: var(--font-display); font-size: 0.78rem; line-height: 1.15; overflow-wrap: anywhere; }
.film-person-card > div:last-child span { color: #c4b5aa; font-size: 0.72rem; line-height: 1.3; }
.film-people-empty { margin: 0; border: 1px dashed rgba(255,248,237,0.2); border-radius: 6px; color: #b9aaa0; padding: 22px; font-size: 0.75rem; text-align: center; }
.film-catalog-actions { display: grid; justify-items: start; transform: translateY(var(--film-catalog-action-offset, 0px)); }
.film-catalog-actions .primary-button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 0 14px; text-decoration: none; }

.film-ecosystem {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
}

.film-connect-card {
  min-width: 0;
  border: 1px solid rgba(255,248,237,0.16);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(84,18,23,0.72), rgba(36,6,10,0.9));
  box-shadow: 0 22px 48px rgba(5,0,1,0.24);
  padding: clamp(24px, 4vw, 38px);
}

.film-connect-card h2 { margin: 0 0 10px; color: #fff9ee; font-family: var(--font-display); font-size: 2rem; font-weight: 600; }
.film-connect-card > p { margin: 0 0 20px; color: #aa9d94; font-size: 0.78rem; line-height: 1.65; }
.film-keep-actions { display: grid; grid-template-columns: auto minmax(150px, 1fr); gap: 12px; align-items: end; }
.film-keep-actions > label,
.film-note-field { display: grid; gap: 6px; color: #cdbfb4; font-size: 0.68rem; font-weight: 800; }
.film-connect-card :where(select,textarea) { border-color: rgba(255,255,255,0.18); background: rgba(255,252,246,0.96); }
.film-note-field { margin-top: 14px; }
.film-your-keep > .secondary-button { margin-top: 11px; }
.film-connect-card .secondary-button { min-height: 40px; border-color: rgba(255,255,255,0.24); background: rgba(25,3,6,0.46); color: #f6e7d9; padding: 0 14px; text-decoration: none; }
.film-connect-card .secondary-button:disabled { opacity: 0.45; cursor: not-allowed; }

.film-social-list { display: grid; gap: 10px; }
.film-social-note { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 11px; align-items: start; border: 1px solid rgba(255,255,255,0.12); border-radius: 9px; background: rgba(16,2,4,0.28); padding: 11px; }
.film-social-note .friend-avatar { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: #fff6e8; font-size: 0.62rem; }
.film-social-note strong { color: #f7eadf; font-size: 0.75rem; }
.film-social-note p { margin: 3px 0 0; color: #a99b91; font-size: 0.7rem; line-height: 1.55; }
.film-social-empty { display: grid; gap: 4px; border: 1px dashed rgba(255,255,255,0.17); border-radius: 9px; color: #c9bbb0; padding: 18px; }
.film-social-empty strong { font-size: 0.78rem; }
.film-social-empty span { color: #8e8179; font-size: 0.69rem; line-height: 1.5; }
.film-lobby-card > .secondary-button { display: inline-flex; align-items: center; margin-top: 16px; }

.film-provider-links { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.film-provider-links a { display: grid; min-height: 52px; place-items: center; border: 1px solid rgba(255,255,255,0.16); border-radius: 8px; background: rgba(255,252,246,0.94); padding: 8px; }
.film-provider-links img { width: 100%; max-width: 84px; max-height: 30px; object-fit: contain; }
.film-store-link { display: inline-flex; margin-top: 14px; color: #e1bd69; font-size: 0.72rem; font-weight: 800; }
.film-lite-providers { display: none; }

@media (max-width: 1100px) {
  .film-world-hero { grid-template-columns: minmax(180px, 230px) minmax(0,1fr); min-height: 620px; }
  .film-world { min-height: 620px; }
  .film-person-card { flex-basis: calc((100% - 20px) / 3); }
  .film-profile-heading { --film-title-max: 30; --film-title-min: 18; }
}

@media (max-width: 700px) {
  .film-world-shell { width: 100%; padding-top: 10px; }
  .film-world { border-radius: 8px; }
  .film-world-hero { grid-template-columns: 1fr; grid-template-rows: 58px auto auto; gap: 26px; align-items: start; padding: 22px 18px 30px; }
  .film-backdrop::after { background: linear-gradient(0deg, rgba(16,1,4,0.99) 0%, rgba(17,2,5,0.82) 58%, rgba(17,2,5,0.28)); }
  .film-poster-column { grid-column: 1; grid-row: 2; width: min(64vw, 230px); justify-self: center; margin-top: 0; }
  .film-world-poster { width: 100%; margin-top: 0; }
  .film-profile-content { grid-column: 1; grid-row: 3; grid-template-rows: auto auto auto; }
  .film-profile-heading { --film-title-max: 48; --film-title-min: 22; grid-column: 1; grid-row: 1; height: 58px; justify-content: center; padding-top: 0; text-align: center; }
  .film-catalog-actions { transform: none; }
  .film-feature-grid { grid-template-columns: 1fr; }
  .film-trailer-stage { height: auto; aspect-ratio: 16 / 9; }
  .film-synopsis-panel { height: 280px; min-height: 0; }
  .film-person-card { flex: 0 0 138px; scroll-snap-align: start; }
  .film-ecosystem { grid-template-columns: 1fr; }
  .film-keep-actions { grid-template-columns: 1fr; align-items: stretch; }
}

@media (max-width: 430px) {
  .film-world-hero { padding-inline: 14px; }
  .film-poster-column { width: min(68vw, 220px); }
  .film-score-panel { padding: 12px; }
  .film-score-panel h2 { font-size: 0.61rem; }
  .film-score-control { grid-template-columns: minmax(0,1fr) 58px; }
  .film-provider-links { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.film-embedded .topbar,
.film-embedded .film-discover-return,
.film-embedded .film-back-link { display: none; }
.film-embedded { height: 100dvh; overflow: hidden; }
.film-embedded .app-shell { height: 100%; padding: 0; }
.film-embedded .film-world-shell { width: 100%; height: 100%; box-sizing: border-box; padding: 0; }
.film-embedded .film-world { min-height: 100%; height: 100%; border: 0; border-radius: 0; overflow: hidden; background: #180305; }
.film-embedded .film-world-hero {
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  grid-template-rows: 30px auto;
  align-content: center;
  row-gap: 8px;
  padding: clamp(18px, 3vh, 28px) clamp(22px, 3vw, 38px);
}
.film-embedded .film-profile-content { grid-template-rows: var(--film-poster-height, 400px) auto auto; gap: 7px; }
.film-embedded .film-world-poster { width: 100%; justify-self: stretch; }
.film-embedded .film-poster-column { width: min(100%, 266px); justify-self: center; gap: 8px; }
.film-embedded .film-poster-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  gap: 5px;
}
.film-embedded .film-poster-actions > :where(a, button) {
  width: auto;
  min-width: 0;
  min-height: 38px;
  border: 1px solid rgba(255, 248, 237, 0.42);
  border-radius: 4px;
  background: rgba(25, 3, 6, 0.82);
  box-shadow: none;
  color: #fff8ec;
  padding: 0 12px;
  font-size: 0.68rem;
  font-weight: 800;
}
.film-embedded .film-poster-actions > :where(a, button):hover,
.film-embedded .film-poster-actions > :where(a, button):focus-visible {
  border-color: #d8b45c;
  background: rgba(91, 18, 23, 0.9);
  color: #fff8ec;
}
.film-embedded .film-score-panel { padding: 10px; padding-bottom: calc(10px + var(--film-score-bottom-extension, 0px)); }
.film-embedded .film-rating-row { min-height: 34px; padding-block: 4px; }
.film-embedded .film-score-summary { margin-top: 7px; }
.film-embedded .film-profile-heading { height: 30px; padding-top: 2px; }
.film-embedded .film-people-list { padding-bottom: 2px; }
.film-embedded .film-person-card > div:last-child { min-height: 42px; padding: 5px; }
.film-embedded .film-lite-providers { display: block; }
.film-embedded .film-provider-links { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
.film-embedded .film-provider-links a { min-height: 36px; padding: 4px; }
.film-embedded .film-provider-links img { max-height: 21px; }
.film-embedded .film-catalog-actions { display: none; }
.film-embedded #film-ecosystem { display: none !important; }
.film-embedded::-webkit-scrollbar { width: 10px; }
.film-embedded::-webkit-scrollbar-track { background: #210508; }
.film-embedded::-webkit-scrollbar-thumb { border: 2px solid #210508; border-radius: 10px; background: #b88b35; }
.film-embedded::-webkit-scrollbar-thumb:hover { background: #dfb95e; }
