/* =============================================================================
   05b-person-filmography-studio.css
   v14.110 CSS REORG: moved VERBATIM out of 05-messages-early-polish.css
   (which is the DM/messages file — none of this is messages). Loads
   immediately AFTER 05 in index.html, so the cascade position of every
   rule is unchanged.
   Contents: actor/director filmography page, full cast overlay, anime
   studio page, characters row/page, FPMP shelf-loader animation.
   ============================================================================= */

/* =============================================================================
   v735: Filmography page — UNSCOPED rules (apply at every viewport).
   The earlier copies of these rules live inside @media (max-width: 700px)
   which can be flaky on PWA when the overlay-open transition reads viewport
   metrics. Duplicating them outside any media query guarantees the slide-in
   page is fully styled regardless of breakpoint match.
   Animation duration bumped from 0.28s → 0.6s per spec.
   ============================================================================= */
.discover-person-filmography-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 0;
  margin: 0 0 6px 0;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.discover-person-filmography-header h3 { margin: 0; flex: 1 1 auto; }
.discover-person-filmography-header svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: rgba(255,255,255,0.55);
  transition: transform 0.18s ease, color 0.18s ease;
}
.discover-person-filmography-header:hover svg,
.discover-person-filmography-header:active svg {
  color: rgba(255,255,255,0.95);
  transform: translateX(2px);
}

body.filmography-page-open { overflow: hidden; }
body.filmography-page-open .mobile-bottom-nav { display: none !important; }
/* v12.289: while a TITLE media profile is open from the filmography page, keep
   the filmography overlay VISIBLE but drop it just behind the media profile
   (whose overlay is z-index 3100) instead of hiding it. Previously it was
   visibility:hidden — so an edge-swipe-back slid the media profile off to reveal
   the discover/universal-search page underneath, and only snapped back to the
   filmography page once the profile was fully gone. Now the filmography page sits
   directly behind and is revealed correctly during the whole swipe. */
body.filmography-title-profile-open .filmography-page-overlay {
  z-index: 3090;
  pointer-events: none;
}
.filmography-page-overlay {
  position: fixed;
  inset: 0;
  /* v12.795 → v12.800: the filmography page opens on top of whatever launched it.
     A plain actor profile is z 6500, BUT an actor profile opened OVER the cast
     page is lifted to 9999 (body.person-profile-over-cast .discover-media-profile-
     overlay). At 6550 the filmography page opened BEHIND that boosted profile —
     you had to swipe back twice to reach it. 10000 sits above both. (A title
     profile opened FROM filmography still drops filmography to 3090 via the
     body.filmography-title-profile-open rule, so that flow is unaffected.) */
  z-index: 10000;
  background: #05040d;
  color: #f8f4ff;
  transform: translateX(100%);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.filmography-page-overlay.open { transform: translateX(0); }
.filmography-page {
  display: flex;
  flex-direction: column;
  height: 100dvh;
}
.filmography-page-header {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(14px, var(--shelfd-safe-top, 0px)) 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.filmography-page-back {
  position: absolute;
  left: 16px;
  top: max(14px, var(--shelfd-safe-top, 0px));
}
/* v12.796: bare left-chevron — strip the circle chrome (background / border /
   shadow / blur) the .discover-media-back--icon variant adds, leaving just the
   chevron. The 40×40 hit area is kept for a comfortable tap target. Compound
   selector to outrank .discover-media-back.discover-media-back--icon. */
.filmography-page-back.discover-media-back.discover-media-back--icon {
  background: none;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}/* v12.803: two-line centered header — "Filmography" label over the actor name. */
.filmography-page-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  max-width: 66%;
  text-align: center;
}
.filmography-page-eyebrow {
  font-size: 15px;
  font-weight: 600; /* v12.804 */
  color: #f8f4ff;
  letter-spacing: 0;
  line-height: 1.25;
}
.filmography-page-person {
  max-width: 100%;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255,255,255,0.72);
  letter-spacing: 0;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.filmography-page-chips {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.filmography-page-chips::-webkit-scrollbar { display: none; }
.filmography-chip {
  flex: 0 0 auto;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: transparent;
  color: rgba(255,255,255,0.85);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.filmography-chip.active {
  background: #f8f4ff;
  color: #12082e;
  border-color: #f8f4ff;
}
.filmography-sort-wrap {
  position: relative;
  flex: 0 0 auto;
  margin: 0 16px 12px;
}
.filmography-sort-trigger {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.055);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 900;
}
.filmography-sort-trigger em {
  color: #f4d27a;
  font-style: normal;
  font-size: 16px;
  line-height: 1;
}
.filmography-sort-menu {
  position: absolute;
  z-index: 6;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  padding: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  background: rgba(13,12,24,0.96);
  box-shadow: 0 22px 52px rgba(0,0,0,0.48);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.filmography-sort-option {
  width: 100%;
  min-height: 40px;
  border: 0;
  border-radius: 11px;
  padding: 9px 10px;
  background: transparent;
  color: rgba(255,255,255,0.84);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 850;
  text-align: left;
}
.filmography-sort-option.active {
  background: rgba(244,210,122,0.16);
  color: #fff;
}
.filmography-sort-option em {
  color: rgba(244,210,122,0.86);
  font-style: normal;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.filmography-sort-option b {
  color: #f4d27a;
  font-size: 14px;
  line-height: 1;
}
.filmography-page-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 16px max(24px, env(safe-area-inset-bottom, 24px));
  -webkit-overflow-scrolling: touch;
}
.filmography-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.filmography-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* v12.798: suppress the iOS long-press image callout (Share / Save to Photos /
     Copy) so a hold triggers the Quick Add modal instead — same treatment the
     More Like This cards get. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  min-width: 0;
}
.filmography-card-poster img { -webkit-touch-callout: none; pointer-events: none; }
.filmography-card-poster {
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 3.9px; /* v12.797 */
  background: rgba(255,255,255,0.07);
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0,0,0,0.32);
  transition: transform 0.18s ease;
}
.filmography-card:active .filmography-card-poster { transform: scale(0.97); }
.filmography-card-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* v12.800: line order title → ★rating · year → role (year merged inline into
   the rating line). */
.filmography-card-title {
  order: 1;
  margin-top: 8px;
  color: #fff;
  font-size: 12.5px;
  line-height: 1.25;
  font-weight: 800;
  overflow: hidden;
  display: block;
  -webkit-line-clamp: unset;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  min-height: 0;
}
.filmography-card-rating {
  order: 2;
  margin-top: 3px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 400; /* v12.801 */
}
.filmography-card-rating span:first-child { color: #e6c766; }/* v12.797: the rating NUMBER span is marked with [data-card-imdb-rating] (not the
   -value class), so it was inheriting the amber .filmography-card-rating color.
   Force it white; the star (first-child) stays gold. */
.filmography-card-rating [data-card-imdb-rating] { color: #fff; }
/* v12.800: inline "· year" tail on the rating line — muted so the star+rating
   stay the emphasis. */
.filmography-card-rating-dot,
.filmography-card-rating-year { color: rgba(255,255,255,0.72); font-weight: 300; }.filmography-card-character {
  order: 3;
  margin-top: 2px;
  color: rgba(255,255,255,0.72); /* v12.801 */
  font-size: 10.5px;
  line-height: 1.2;
  font-weight: 300; /* v12.801 */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 13px;
}
.discover-person-credit-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
  color: #f5b73b;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 800;
  min-height: 11px;
}
.discover-person-credit-rating[hidden] {
  display: none !important;
}
.discover-person-credit-rating-star {
  color: #f5b73b;
  line-height: 1;
}
.discover-person-credit-card-filmography .discover-person-credit-role {
  min-height: 24px;
}
/* v12.799: infinite-scroll spinner (replaces the old Load More button). */
.filmography-infinite-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 0 14px;
}
.filmography-spinner {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2.5px solid rgba(255,255,255,0.16);
  border-top-color: rgba(255,255,255,0.85);
  animation: filmography-spin 0.7s linear infinite;
}
@keyframes filmography-spin { to { transform: rotate(360deg); } }
@media (min-width: 1024px) { .filmography-grid { gap: 20px; } }.media-cast-show-all-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(167,139,250,0.18);
  color: #c9b2ff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.media-cast-page-overlay {
  position: fixed;
  inset: 0;
  z-index: 6500;
  background: #05040d;
  color: #f8f4ff;
  transform: translateX(100%);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.media-cast-page-overlay.open { transform: translateX(0); }
.media-cast-page {
  display: flex;
  flex-direction: column;
  height: 100dvh;
}
.media-cast-page-header {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: max(14px, var(--shelfd-safe-top, 0px)) 16px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.media-cast-page-back {
  position: absolute;
  left: 16px;
  top: max(14px, var(--shelfd-safe-top, 0px));
}
.media-cast-page-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #f8f4ff;
  letter-spacing: -0.01em;
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.media-cast-page-subtitle {
  color: rgba(214, 205, 232, 0.72);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.media-cast-page-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 16px max(28px, env(safe-area-inset-bottom, 28px));
  -webkit-overflow-scrolling: touch;
}
.media-cast-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 14px;
}
/* Override the inline-row .discover-media-cast-card horizontal-scroll sizing
   when the same markup appears inside the full-cast grid. */
.media-cast-page-overlay .discover-media-cast-card {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  font-family: 'Sohne', 'Söhne', 'DM Sans', system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.media-cast-page-overlay .discover-media-cast-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  box-shadow: 0 10px 22px rgba(0,0,0,0.28);
  transition: transform 0.18s ease;
}
.media-cast-page-overlay .discover-media-cast-card:active .discover-media-cast-photo {
  transform: scale(0.97);
}
.media-cast-page-overlay .discover-media-cast-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media-cast-page-overlay .discover-media-cast-card strong {
  display: block;
  margin-top: 9px;
  color: #ffffff;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 32px;
}
.media-cast-page-overlay .discover-media-cast-card span {
  display: block;
  margin-top: 3px;
  color: rgba(214, 205, 232, 0.72);
  font-size: 11.5px;
  line-height: 1.32;
  font-weight: 500;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 15px;
}
@media (min-width: 720px) {
  .media-cast-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
}
@media (min-width: 1024px) {
  .media-cast-grid { grid-template-columns: repeat(5, 1fr); gap: 22px; }
}

/* v12.580: Anime studio profile page — poster grid + clickable studio name */
.media-studio-page-overlay { z-index: 6600; }
/* v12.587: de-promote the slid-in studio overlay so retina posters re-raster at
   native DPR (WebKit blurs content inside a persistently transformed layer). */
.media-studio-page-overlay.is-settled {
  will-change: auto;
  transform: none;
}

/* v12.587: FPMP loading indicator — the splash "shelf of books" animation
   (self-contained; the splash's own copy lives in 00-live-update-pwa.js and is
   only injected during boot). Replaces the circular spinner. */
.discover-media-shelf-loader {
  position: relative;
  min-height: 104px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  padding: 24px 4px 12px;
  border: 0;
  background: transparent;
}
.discover-media-shelf-loader span {
  width: 7px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, #c4b5fd, #8b5cf6);
  box-shadow: 0 0 14px rgba(167, 139, 250, 0.45);
  transform: translateY(9px) scaleY(0.4);
  transform-origin: bottom center;
  opacity: 0;
  animation: discoverShelfBook 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.discover-media-shelf-loader span:nth-child(1) { height: 22px; animation-delay: 0s; }
.discover-media-shelf-loader span:nth-child(2) { height: 28px; animation-delay: 0.12s; background: linear-gradient(180deg, #ddd0ff, #a78bfa); }
.discover-media-shelf-loader span:nth-child(3) { height: 18px; animation-delay: 0.24s; }
.discover-media-shelf-loader span:nth-child(4) { height: 26px; animation-delay: 0.36s; background: linear-gradient(180deg, #ddd0ff, #a78bfa); }
.discover-media-shelf-loader span:nth-child(5) { height: 20px; animation-delay: 0.48s; }
.discover-media-shelf-loader::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  width: 64px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.28);
  box-shadow: 0 0 10px rgba(167, 139, 250, 0.4);
}
@keyframes discoverShelfBook {
  0% { transform: translateY(9px) scaleY(0.4); opacity: 0; }
  18% { transform: translateY(0) scaleY(1); opacity: 1; }
  72% { transform: translateY(0) scaleY(1); opacity: 1; }
  90%, 100% { transform: translateY(9px) scaleY(0.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .discover-media-shelf-loader span { animation-duration: 3s; }
}
/* v12.583: studio header — large name on top, circular studio logo beneath.
   Scoped to .media-studio-page so the shared cast/staff header is untouched. */
.media-studio-header {
  gap: 14px;
  /* clear the absolute back-button (left) + filter/sort controls (right) row */
  padding-top: calc(max(14px, var(--shelfd-safe-top, 0px)) + 44px);
  padding-bottom: 20px;
}
.media-studio-page .media-cast-page-title.media-studio-title {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.15;
  white-space: normal;
  max-width: 80%;
  text-align: center;
}
.media-studio-logo {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
  flex: 0 0 auto;
}
.media-studio-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media-studio-poster-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 12px;
}
.studio-anime-card {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  font-family: 'Sohne', 'DM Sans', sans-serif;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.studio-anime-card-poster {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 9px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
  box-shadow: 0 8px 20px rgba(0,0,0,0.32);
  transition: transform 0.18s ease;
}
.studio-anime-card:active .studio-anime-card-poster { transform: scale(0.96); }
.studio-anime-card-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* v12.588: poster meta lines — rating (gold star + white number) / title / year */
.studio-anime-card-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 7px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
}
.studio-anime-card-star {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  color: #E6C87E; /* champagne gold */
}
.studio-anime-card-rating em { font-style: normal; }
.studio-anime-card-title {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 3px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.3;
}
.studio-anime-card-year {
  display: block;
  margin-top: 2px;
  color: #ffffff;
  opacity: 0.6;
  font-size: 11.5px;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1.2;
}
.anime-info-studio-btn {
  display: inline;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(165, 138, 255, 0.95);
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(165, 138, 255, 0.45);
}
.anime-info-studio-btn:active { opacity: 0.7; }
@media (min-width: 720px) {
  .media-studio-poster-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
}
@media (min-width: 1024px) {
  .media-studio-poster-grid { grid-template-columns: repeat(5, 1fr); gap: 22px; }
}

/* v12.585: poster tap opens the anime FPMP ABOVE the studio page (the FPMP
   overlay is z 3100 by default — below the studio overlay's 6600). Mirrors the
   person-profile-over-cast lift so the tapped title actually shows. */
body.anime-fpmp-over-studio .discover-media-profile-overlay { z-index: 9999 !important; }
body.anime-fpmp-over-studio .media-studio-page-overlay { z-index: 1000 !important; }

/* v12.677: FPMP opened from a DM chat thread — the DM page itself sits at
   z-index 2147482000 (see 18-dm-instagram-rebuild.css), far above the FPMP's
   default 3100. Previously we closed the DM page to let the FPMP show at all,
   but that revealed whatever page sat beneath it (usually the shelf tab) for
   the entire time the FPMP was open — visible during the swipe-back drag and
   as a flash after closing, before the DM thread was async-reopened. Instead,
   leave the DM thread mounted and bump the FPMP above it, so closing the FPMP
   (back button or swipe) instantly and correctly reveals the same thread. */
body.fpmp-over-dm-thread .discover-media-profile-overlay,
body.fpmp-over-dm-thread .game-media-profile-overlay { z-index: 2147483001 !important; }

/* v12.585: filter + sort controls, top-right of the studio header.
   v12.588: the header gets a stacking context above the scrolling body so the
   dropdown menus render OVER the poster grid (were painting behind it). */
.media-studio-header { position: relative; z-index: 3; }
.media-studio-controls {
  position: absolute;
  top: max(14px, var(--shelfd-safe-top, 0px));
  right: 14px;
  display: flex;
  gap: 8px;
  z-index: 40;
}
.studio-control { position: relative; }
.studio-control-btn {
  -webkit-appearance: none;
  appearance: none;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #f8f4ff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.studio-control-btn svg { width: 18px; height: 18px; }
.studio-control-btn:active { background: rgba(255, 255, 255, 0.12); }
.studio-control-btn.is-active {
  background: rgba(165, 138, 255, 0.18);
  border-color: rgba(165, 138, 255, 0.5);
  color: #c5b3ff;
}
.studio-control-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 41;
  min-width: 168px;
  max-height: 320px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px;
  border-radius: 14px;
  background: #15131d;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.studio-control-menu.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.studio-menu-item {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: rgba(232, 226, 245, 0.82);
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.studio-menu-item:active { background: rgba(255, 255, 255, 0.05); }
.studio-menu-item.is-active {
  color: #ffffff;
  background: rgba(165, 138, 255, 0.16);
}
.studio-menu-item.is-active::after {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c5b3ff;
  flex: 0 0 auto;
  margin-left: 10px;
}

/* ==========================================================================
   v10.117: Characters row + full-page Characters view for anime profiles.

   Characters use the same .discover-media-cast-card layout as the cast
   row (so the inline row and the full grid both inherit the existing
   sizing rules) with a .discover-media-character-card modifier that
   strips the heart-favorite affordances and the tap-to-open cursor —
   characters aren't navigable in-app, they're informational.

   The "Show All" button on the characters row is the same pill button
   class (.media-cast-show-all) just with a tiny accent override so the
   two consecutive buttons read as parallel actions, not duplicates.

   The full-page Characters overlay re-uses .media-cast-page-overlay
   styling (slide-in, grid) so a single visual system covers both
   anime-specific sections.
   ========================================================================== */
.discover-media-section-characters {
  margin-top: 4px;
}
.discover-media-character-card {
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
/* Character art often frames the head near the top — bias the crop so
   we don't slice off faces when the photo is forced into a 2:3 box. */
.discover-media-character-card .discover-media-cast-photo img {
  object-position: center top;
}/* Characters page reuses the cast page overlay shell — only the
   per-card behavior differs (no heart, no cursor, biased crop). */
.media-characters-page-overlay .discover-media-character-card {
  cursor: default;
}
.media-characters-page-overlay .discover-media-character-card .discover-media-cast-photo img {
  object-position: center top;
}