/* ================================================================
   EPISODE PAGE — Page-specific styles
   Ported 1:1 from animeoshi-web's episode detail (EpisodesPageClient
   + OshimeterSection/Chart + EpisodeDesktopTitle/NavButtons/Context/
   Sidebar). CSS-module classes flattened to global `aep-` prefixes.
   Requires: ao-external.v1.css (tokens) + site-chrome.css (Montra).
   ================================================================ */

/* These animeoshi-scale token overrides apply to the episode page AND to the
   rate modal + its overlays. The modal (#ao-rate-modal), episode picker and
   celebration overlays (.ao-cel-overlay) are rendered OUTSIDE .aep-page (fixed
   siblings of <main> / appended to <body>), so without listing them here they
   fall back to tokens.css — where --font-size-* and --radius-4xl don't exist,
   breaking fonts and the modal's rounded corner. Layout props (position/bg/etc.)
   stay on .aep-page only, below — the fixed overlays must not inherit those. */
.aep-page,
#ao-rate-modal,
.ao-cel-overlay {
  --spacing-smd: 12px;
  --spacing-mlg: 20px;
  --spacing-4xl: 56px;
  --spacing-6xl: 72px;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;
  --font-size-4xl: 36px;
  --font-size-base: 16px;
  --font-display: var(--font-montra), sans-serif;

  /* Match animeoshi's exact scale where the vendored tokens.css diverges. These
     are scoped to the episode page (and its overlays) so the shared site CSS is
     untouched. animeoshi uses translucent pebble tokens; tokens.css uses solids. */
  --spacing-xs: 5px;
  --radius-2xl: 21px;
  --radius-4xl: 32px; /* QuickRating modal corner (animeoshi --radius-4xl) */
  --radius-new: 10px;
  --p-small-font-size: clamp(10px, 9px + 0.1786vw, 12px);
  --label-small-font-size: clamp(10px, 9px + 0.1786vw, 12px);
  --p-font-size: clamp(12px, 11px + 0.1786vw, 16px);
  --color-text-secondary: rgba(237, 237, 237, 0.8);
  --color-text-tertiary: rgba(237, 237, 237, 0.5);
  --color-border: rgba(237, 237, 237, 0.2);
  --color-surface: rgba(237, 237, 237, 0.05);
  /* animeoshi's page content gutter (breadcrumb/hero/body all align to this) —
     clamp(16px, 5vw, 104px) = ~72px @1440, matching the live. Was a fixed 140px. */
  --page-gutter: clamp(16px, 5vw, 104px);
  /* animeoshi's --detail-rail (Weekly Verdict rail + right sidebar width). Was 373px. */
  --detail-rail: 420px;
}

/* Layout props for the page container only (NOT the fixed modal/overlays). */
.aep-page {
  position: relative;
  background: var(--charcoal);
  color: var(--pebble);
  min-height: 100vh;
}

/* ── Hero band (full-bleed black) ─────────────────────────────── */
.aep-hero { position: relative; width: 100vw; margin-left: calc(-50vw + 50%); background: var(--black); }
.aep-hero-inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  max-width: 1512px;
  margin: 0 auto;
  padding: var(--spacing-xl) var(--page-gutter) var(--spacing-2xl);
  box-sizing: border-box;
}

/* ── Breadcrumb ───────────────────────────────────────────────── */
/* Breadcrumb — mirrors animeoshi's EpisodeBreadcrumb: 14px, 5px gap, links at
   text-secondary (normal weight), current at text-primary semibold, 12px chevron. */
.aep-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-xs); margin-top: 17px; font-size: var(--font-size-sm); line-height: 20px; color: rgba(237, 237, 237, 0.8); min-width: 0; }
.aep-crumbs a { color: inherit; text-decoration: none; }
.aep-crumbs a:hover { color: var(--pebble); text-decoration: underline; }
.aep-crumb-sep { width: 12px; height: 12px; flex-shrink: 0; color: rgba(237, 237, 237, 0.5); }
.aep-crumb-current { color: var(--pebble); font-weight: var(--font-weight-semibold); }
/* Episode-number crumb dropdown (mirrors AO BreadcrumbEpisodeDropdown). */
.aep-crumb-dd { display: inline-flex; align-items: center; }
.aep-crumb-trigger { display: inline-flex; align-items: center; gap: var(--spacing-xs); background: transparent; border: 0; padding: 0; cursor: pointer; color: var(--pebble); font: inherit; font-weight: var(--font-weight-semibold); }
.aep-crumb-trigger:hover { text-decoration: underline; }
.aep-crumb-chevron { width: 14px; height: 14px; flex-shrink: 0; color: rgba(237, 237, 237, 0.5); transition: transform 0.2s ease; }
.aep-crumb-chevron-open { transform: rotate(180deg); }
.aep-epdd-menu {
  min-width: min(280px, calc(100vw - 32px)); max-height: 320px; overflow-y: auto;
  background: var(--color-bg); border: var(--border-normal) solid var(--color-border);
  border-radius: var(--radius-lg); z-index: 1000; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  animation: aepEpddFade 0.15s ease;
}
@keyframes aepEpddFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.aep-epdd-item {
  display: flex; align-items: center; gap: var(--spacing-sm); width: 100%;
  padding: var(--spacing-sm) var(--spacing-md); background: transparent; border: 0; cursor: pointer;
  text-align: left; font: inherit; transition: background-color 0.15s ease;
}
.aep-epdd-item:hover, .aep-epdd-selected { background: var(--color-surface); }
.aep-epdd-num { font-size: 0.875rem; font-weight: var(--font-weight-semibold); color: var(--pebble); flex-shrink: 0; }
/* AO's --p-tiny-font-size is undefined, so its .latestBadge inherits the larger
   dropdown font — mirror that (inherit) rather than pinning a small size. */
.aep-epdd-latest { font-size: inherit; font-weight: var(--font-weight-semibold); color: var(--peach-spark); background: hsla(23, 100%, 50%, 0.15); padding: 2px 6px; border-radius: var(--radius-lg); flex-shrink: 0; }
.aep-epdd-title { font-size: var(--p-small-font-size); color: rgba(237, 237, 237, 0.8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aep-epdd-more {
  width: 100%; padding: var(--spacing-sm) var(--spacing-md); background: transparent; border: 0;
  border-top: var(--border-normal) solid var(--color-border); color: rgba(237, 237, 237, 0.8);
  font: inherit; font-size: var(--p-small-font-size); cursor: pointer; transition: background-color 0.15s ease;
}
.aep-epdd-more:hover { background: var(--color-surface); }

/* ── Countdown banner ─────────────────────────────────────────── */
.aep-countdown {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  width: 100%;
  padding: var(--spacing-md);
  background-color: rgba(237, 237, 237, 0.05);
  border: var(--border-normal) solid rgba(237, 237, 237, 0.2);
  border-radius: var(--radius-2xl);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  box-sizing: border-box;
  overflow: hidden;
}
.aep-countdown::before { content: ""; position: absolute; top: -60%; left: 20%; width: 60%; height: 160%; background: radial-gradient(ellipse at center, hsl(346 100% 71% / 0.18), transparent 70%); pointer-events: none; }
.aep-countdown-info { position: relative; display: flex; flex-direction: column; gap: var(--spacing-xs); min-width: 0; }
.aep-countdown-label { font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--color-text-primary); line-height: 1.2; }
.aep-countdown-clock { display: flex; align-items: baseline; gap: var(--spacing-xs); flex-wrap: nowrap; }
.aep-countdown-seg { font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); color: var(--color-accent); line-height: 1; white-space: nowrap; }
.aep-countdown-unit { font-size: 1em; font-weight: var(--font-weight-bold); margin-left: 1px; color: var(--color-accent); }
.aep-countdown-sep { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); color: var(--color-text-tertiary); line-height: 1; }
.aep-countdown-notify { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; padding: var(--spacing-xs) 10px; background: var(--pebble); color: rgb(23, 13, 33); border: var(--border-normal) solid transparent; border-radius: var(--radius-max); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); line-height: 16px; white-space: nowrap; text-decoration: none; transition: opacity 0.2s ease; }
.aep-countdown-notify:hover { opacity: 0.85; }
.aep-countdown-notify-outline { background: transparent; color: var(--color-text-primary); border-color: var(--color-border); }
.aep-countdown-notify-outline:hover { opacity: 1; background: rgba(237, 237, 237, 0.08); }
.aep-bell-icon { width: 14px; height: 14px; flex-shrink: 0; }

/* ── Hero block ───────────────────────────────────────────────── */
.aep-hero-block {
  display: grid;
  /* Cover column matches live animeoshi.com (measured 251px at desktop); the old
     209px cap rendered the poster too narrow, so it looked thin/elongated. */
  grid-template-columns: clamp(96px, 26.4vw, 251px) minmax(0, 1fr);
  grid-template-areas:
    "cover title"
    "cover osh"
    "cover nav"
    "rate  watch";
  column-gap: var(--spacing-mlg);
  row-gap: var(--spacing-smd);
  align-items: stretch;
}
.aep-cover-stack { grid-area: cover; position: relative; width: 100%; min-height: clamp(126px, 35vw, 328px); align-self: stretch; }
.aep-cover { position: absolute; border: 2.34px solid rgba(237, 237, 237, 0.2); border-radius: var(--radius-new); background-size: cover; background-position: center; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); }
.aep-cover-back { top: 9px; left: 9px; right: 0; bottom: 0; opacity: 0.85; }
.aep-cover-mid { top: 4.5px; left: 4.5px; right: 4.5px; bottom: 4.5px; opacity: 0.92; }
.aep-cover-front { top: 0; left: 0; right: 9px; bottom: 9px; }

/* Hero with the Weekly Verdict rail. The rail is taken OUT of grid flow
   (position:absolute into reserved padding-right) so its tall card can't
   inflate the grid rows and stretch the cover — the cover keeps its natural
   content height, and the card fills the full hero height + scrolls. Mirrors
   animeoshi-web's .heroBlockWithVote (reserved padding + absolute .titleRight);
   the base 2-col grid/areas are inherited from .aep-hero-block. */
.aep-hero-block-verdict {
  position: relative;
  padding-right: calc(var(--detail-rail) + var(--spacing-mlg));
}
.aep-title-right { position: absolute; top: 0; right: 0; bottom: 0; width: var(--detail-rail); min-width: 0; min-height: 0; overflow: hidden; }

/* ── Weekly Verdict card ──────────────────────────────────────── */
.aep-verdict { position: relative; display: flex; flex-direction: column; gap: var(--spacing-md); border: var(--border-normal) solid rgba(237, 237, 237, 0.2); border-radius: var(--radius-xl); padding: var(--spacing-lg); width: 100%; height: auto; max-height: 100%; min-height: 0; box-sizing: border-box; background: rgba(237, 237, 237, 0.05); }
.aep-verdict-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: var(--font-size-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-secondary); }
.aep-verdict-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 8px var(--color-accent); flex-shrink: 0; }
.aep-verdict-heading { margin: 0; font-family: var(--font-display); font-size: var(--font-size-lg); font-weight: var(--font-weight-normal); line-height: 1.05; letter-spacing: 0.5px; text-transform: uppercase; color: var(--color-text-primary); word-break: break-word; }
.aep-verdict-rank { color: var(--color-accent); font-size: 1.4em; line-height: 0.9; vertical-align: -0.05em; }
.aep-verdict-behind { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius-full); background: var(--color-accent); color: var(--charcoal); font-family: var(--font-display); font-size: var(--font-size-xs); letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 0 24px hsl(68 100% 50% / 0.3); }
.aep-verdict-empty { padding: var(--spacing-lg) var(--spacing-md); text-align: center; font-size: var(--font-size-sm); color: var(--color-text-secondary); background: rgba(255, 255, 255, 0.05); border-radius: var(--radius-lg); }
/* Vote button — mirrors animeoshi-web's VoteButton pill (light fill / dark label). */
.aep-verdict-vote { display: inline-flex; align-self: flex-start; }
/* Author display rules beat the UA [hidden] rule — re-hide explicitly. */
.aep-verdict-vote[hidden], .aep-verdict-behind[hidden] { display: none; }
.aep-verdict-vote-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-xs); min-height: 25px; padding: var(--spacing-xs) 10px; border: 0; border-radius: var(--radius-full); background: var(--color-text-primary); color: var(--charcoal); font-family: var(--font-body); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); line-height: 16px; white-space: nowrap; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease; }
.aep-verdict-vote-btn:hover:not(:disabled) { opacity: 0.85; }
.aep-verdict-vote-active { background: rgba(255, 255, 255, 0.1); color: var(--color-text-primary); box-shadow: inset 0 0 0 var(--border-normal) var(--color-border); }
.aep-verdict-vote-btn:disabled { cursor: not-allowed; background: rgba(255, 255, 255, 0.1); color: var(--color-text-secondary); box-shadow: inset 0 0 0 var(--border-normal) var(--color-border); }
/* Cap the visible list to ~8 rows (each row ~35px) then scroll for the rest —
   the card sizes to its content so there's no empty gap below the list. */
.aep-verdict-list { list-style: none; margin: var(--spacing-xs) 0 0; padding: 10px var(--spacing-xs) var(--spacing-md) 0; display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; max-height: 200px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--color-accent) rgba(237, 237, 237, 0.1); }
.aep-verdict-list::-webkit-scrollbar { width: 8px; }
.aep-verdict-list::-webkit-scrollbar-track { background: rgba(237, 237, 237, 0.1); border-radius: 999px; }
.aep-verdict-list::-webkit-scrollbar-thumb { background: var(--color-accent); border-radius: 999px; border: 2px solid var(--color-surface); background-clip: padding-box; }
.aep-verdict-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); padding: var(--spacing-sm); }
.aep-verdict-row + .aep-verdict-row { border-top: var(--border-normal) solid rgba(237, 237, 237, 0.1); }
/* Current anime's row — accent inset border + "YOU'RE HERE" pill (mirrors the live VerdictRow highlighted state). */
.aep-verdict-row-current { border-radius: var(--radius-md); box-shadow: inset 0 0 0 var(--border-large) var(--color-accent); padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); }
.aep-verdict-row-current, .aep-verdict-row-current + .aep-verdict-row { border-top-color: transparent; }
.aep-verdict-youre-here { position: absolute; top: -7px; right: 12px; padding: 2px 6px; border-radius: var(--radius-full); background: var(--color-accent); color: var(--charcoal); font-family: var(--font-display); font-size: var(--font-size-2xs, 10px); font-weight: var(--font-weight-medium); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; z-index: 1; }
.aep-verdict-link { display: flex; align-items: center; gap: var(--spacing-sm); min-width: 0; text-decoration: none; flex: 1; }
.aep-verdict-link:hover .aep-verdict-name { color: var(--color-accent); }
.aep-verdict-rank-num { flex-shrink: 0; width: 18px; text-align: center; font-family: var(--font-display); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-tertiary); }
.aep-verdict-name { font-size: var(--font-size-xs); line-height: var(--line-height-sm, 1.4); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Episode tag: AO's .ep is normal-weight + secondary color; rendered smaller here. */
.aep-verdict-ep { font-size: var(--font-size-2xs, 10px); font-weight: var(--font-weight-normal); color: var(--color-text-secondary); }
.aep-verdict-row-current .aep-verdict-rank-num { color: var(--color-accent); }
.aep-verdict-trailing { display: inline-flex; align-items: center; gap: var(--spacing-sm); flex-shrink: 0; }
.aep-verdict-votes { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.aep-verdict-votes-n { font-family: var(--font-display); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-primary); line-height: 1; }
.aep-verdict-votes-l { font-size: var(--font-size-2xs, 10px); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-secondary); }
.aep-mv { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 40px; padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-full); font-family: var(--font-display); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); line-height: 1; box-sizing: border-box; }
.aep-mv-arrow { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; }
.aep-mv-arrow-up { border-bottom: 6px solid var(--color-accent); }
.aep-mv-arrow-down { border-top: 6px solid var(--cherry-top); }
.aep-mv-up { color: var(--color-accent); background: hsl(68 100% 50% / 0.3); }
.aep-mv-down { color: var(--cherry-top); background: hsl(0 85% 60% / 0.12); }
.aep-mv-new { color: var(--kawaii-core); background: hsl(305 100% 76% / 0.15); }

/* ── Mobile sticky action bar — mirrors AO AnimeBottomStickyBar ────
   Fixed to the bottom on mobile; Share (copy link) + Rate Episode CTA.
   Hidden ≥769px, where the rate pill + sidebar surface these actions.
   The floating mobile dock (.aod-container, bottom:20px / z-index:50)
   floats over this bar (z-index:40) — exactly as it does on AO. */
.aep-actionbar { display: none; }
@media (max-width: 768px) {
  .aep-actionbar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--spacing-smd);
    padding: 10px var(--spacing-md) calc(10px + env(safe-area-inset-bottom));
    background: rgba(20, 14, 28, 0.92);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(237, 237, 237, 0.08);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
  }
}
.aep-actionbar-share {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(237, 237, 237, 0.08); color: var(--pebble);
  cursor: pointer; flex-shrink: 0; transition: background 0.15s ease;
}
.aep-actionbar-share:hover { background: rgba(237, 237, 237, 0.16); }
.aep-actionbar-share:active { background: rgba(237, 237, 237, 0.2); }
.aep-actionbar-share-icon { width: 20px; height: 20px; }
.aep-actionbar-rate {
  flex: 1; height: 44px; max-width: 240px; border: 0;
  border-radius: var(--radius-max);
  background: var(--pebble); color: var(--charcoal);
  font-family: inherit; font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold); letter-spacing: 0.02em;
  padding: 0 var(--spacing-lg); cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.aep-actionbar-rate:hover { background: var(--ivory); }
.aep-actionbar-rate:active { transform: scale(0.98); }

/* Title */
.aep-title-text { grid-area: title; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-sm); }
.aep-title-main {
  font-family: var(--font-display);
  font-size: var(--font-size-4xl);
  font-weight: normal;
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.1;
  text-transform: uppercase;
}
.aep-source { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin: 0; }
.aep-tag-row { display: flex; align-items: center; gap: var(--spacing-sm); flex-wrap: wrap; }
.aep-tag { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.aep-tag-sep { font-size: var(--font-size-sm); color: var(--color-text-tertiary); }

/* Oshimeter */
.aep-osh { grid-area: osh; min-width: 0; max-width: 460px; }
.aep-osh-section { background: rgba(237, 237, 237, 0.05); border-radius: var(--radius-lg); display: flex; flex-direction: column; }
.aep-osh-main { padding: var(--spacing-md); display: flex; flex-direction: row; gap: 30px; align-items: center; justify-content: space-between; }
.aep-osh-group { display: flex; flex-direction: column; gap: 30px; flex-shrink: 0; }
.aep-osh-title { font-family: var(--font-display); font-size: var(--font-size-lg); line-height: 22px; letter-spacing: 1px; margin: 0; text-transform: uppercase; font-weight: var(--font-weight-normal); color: var(--pebble); }
.aep-osh-row { display: flex; gap: var(--spacing-mlg); align-items: center; }
.aep-osh-score-col { display: flex; flex-direction: column; gap: 10px; align-items: center; flex-shrink: 0; }
.aep-osh-score { font-size: 48px; font-weight: var(--font-weight-bolder); color: var(--sundrop); line-height: 1; text-align: center; }
.aep-osh-fans { font-size: var(--font-size-sm); line-height: 18px; color: rgba(237, 237, 237, 0.55); text-align: center; white-space: nowrap; margin: 0; }
.aep-osh-bars { display: flex; align-items: stretch; gap: 5px; height: 66px; opacity: 0.5; }
.aep-osh-bar-col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; align-self: stretch; }
.aep-osh-bar-track { width: 8px; height: 100%; border-radius: var(--radius-sm, 4px); display: flex; align-items: flex-end; overflow: hidden; }
.aep-osh-bar-fill { width: 100%; background: #d9d9d9; border-radius: var(--radius-sm, 4px); min-height: 0; }
.aep-osh-bar-label { display: inline-flex; align-items: center; gap: 2px; font-size: 10px; line-height: 10px; color: rgba(237, 237, 237, 0.8); font-weight: var(--font-weight-medium); }
.aep-osh-star { font-size: 8px; line-height: 1; }
.aep-osh-chart-slot { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; }
/* "You've rated this X/10" — shown client-side by rate.js (mirrors OshimeterSection). */
.aep-osh-userrating { padding: var(--spacing-smd) 15px; border-top: 1px solid rgba(237, 237, 237, 0.1); font-size: var(--font-size-sm); line-height: 18px; color: var(--pebble); }
.aep-osh-userrating[hidden] { display: none; }
.aep-osh-userrating-score { color: var(--color-accent); font-weight: var(--font-weight-medium); }

/* Radar chart */
.aep-chart-wrap { position: relative; width: 100%; max-width: 150px; aspect-ratio: 1; margin: 0 auto; }
.aep-chart { width: 100%; height: 100%; }
.aep-chart-ring { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 0.5; }
.aep-chart-axis { stroke: rgba(255, 255, 255, 0.1); stroke-width: 0.5; }
.aep-chart-area { fill: rgba(200, 220, 50, 0.3); }
.aep-chart-stroke { fill: none; stroke: rgba(200, 220, 50, 0.8); stroke-width: 0.3; stroke-linejoin: round; }
.aep-chart-label { position: absolute; transform: translate(-50%, -50%); font-size: 10px; color: var(--color-text-secondary); width: min-content; text-align: center; line-height: 1.2; pointer-events: none; }

/* Nav */
.aep-nav { grid-area: nav; max-width: 460px; }
.aep-nav-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-sm); }
.aep-nav-btn { display: flex; align-items: center; justify-content: center; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); border: var(--border-normal) solid var(--color-border); border-radius: var(--radius-full); color: var(--color-text-primary); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease; }
.aep-nav-btn:hover { background-color: var(--color-surface); border-color: var(--color-text-secondary); }
.aep-nav-btn.aep-disabled { opacity: 0.35; pointer-events: none; }

/* Rate + Watch */
.aep-rate { grid-area: rate; }
.aep-watch { grid-area: watch; max-width: 460px; }
.aep-rate-pill { display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 44px; padding: 0 var(--spacing-md); border-radius: var(--radius-max); background: rgba(237, 237, 237, 0.05); border: 1px solid rgba(237, 237, 237, 0.1); color: var(--pebble); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); line-height: 1.4; text-decoration: none; box-sizing: border-box; }
.aep-rate-pill:hover { background: rgba(237, 237, 237, 0.08); }
.aep-star-row { flex-shrink: 0; }
/* ── Rate stars: half-star hover preview (mirrors the live EpRatingPill) ──
   Slots are 5→1 in DOM + row-reverse, so :has() fills the hovered star's half
   and `~` fills the visually-preceding stars. */
.ao-stars { --rate-star: 22px; display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: var(--spacing-xs); color: rgba(237, 237, 237, 0.55); }
.ao-star-slot { position: relative; width: var(--rate-star); height: var(--rate-star); flex-shrink: 0; }
.ao-star-slot .ao-star { width: var(--rate-star); height: var(--rate-star); display: block; }
.ao-star-fill { position: absolute; top: 0; left: 0; height: 100%; width: 0; overflow: hidden; transition: width 0.08s ease; color: var(--pebble); }
.ao-star-fill .ao-star-solid { width: var(--rate-star); }
.ao-half { position: absolute; top: 0; height: 100%; width: 50%; z-index: 2; cursor: pointer; }
.ao-half-l { left: 0; }
.ao-half-r { left: 50%; }
.ao-star-slot:has(.ao-half-l:hover) .ao-star-fill { width: 50%; }
.ao-star-slot:has(.ao-half-r:hover) .ao-star-fill { width: 100%; }
.ao-star-slot:hover ~ .ao-star-slot .ao-star-fill { width: 100%; }
.aep-btn { display: inline-flex; align-items: center; justify-content: center; gap: clamp(var(--spacing-xs), 0.6vw, 6px); width: 100%; height: clamp(42px, 5.3vw, 48px); padding: 0 clamp(var(--spacing-smd), 1.4vw, var(--spacing-md)); border-radius: var(--radius-full); background-color: var(--pebble); border: var(--border-normal) solid var(--pebble); color: var(--color-button-text); font-size: clamp(11px, 1.4vw, var(--font-size-sm)); font-weight: var(--font-weight-semibold); line-height: 1.4; white-space: nowrap; text-decoration: none; box-sizing: border-box; transition: opacity 0.15s ease; }
.aep-btn:hover { opacity: 0.85; }
/* Watched state (client-side): transparent + border, like the live splitActive. */
.aep-btn-watched { background-color: transparent; border-color: var(--color-border); color: var(--color-text-primary); }
.aep-btn-watched:hover { opacity: 1; background-color: rgba(237, 237, 237, 0.06); }
.aep-btn-icon { width: clamp(13px, 1.6vw, 16px); height: clamp(13px, 1.6vw, 16px); flex-shrink: 0; }
/* Green filled check when watched (live: .pillIconWatched { color: var(--color-success) }). */
.aep-btn-watched .aep-btn-icon { color: var(--color-success); }

/* ── Backfill catch-up prompt (mirrors animeoshi-web EpisodeBackfillPrompt) ──
   Shown client-side under the button after marking an episode watched, when
   earlier episodes are still unwatched. --color-surface-5 / -button-text-primary
   aren't vendored here, so map to their resolved values (pebble-5 / charcoal). */
.aep-watch { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.aep-backfill { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); min-height: 41px; padding: var(--spacing-sm); background: rgba(237, 237, 237, 0.05); border: var(--border-normal) solid var(--color-border); border-radius: var(--radius-md); box-sizing: border-box; }
.aep-backfill-text { flex: 1 1 auto; min-width: 0; margin: 0; font-family: var(--font-body); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); line-height: 1.4; color: var(--color-text-primary); }
.aep-backfill-actions { display: flex; align-items: center; gap: var(--spacing-xs); flex-shrink: 0; }
.aep-backfill-skip, .aep-backfill-confirm { height: 25px; padding: 0 var(--spacing-sm); border-radius: var(--radius-full); font-family: var(--font-body); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); cursor: pointer; white-space: nowrap; }
.aep-backfill-skip { border: var(--border-normal) solid var(--color-border); background: var(--color-bg); color: var(--color-text-primary); }
.aep-backfill-confirm { border: 0; background: var(--color-text-primary); color: var(--color-button-text); }
.aep-backfill-skip:hover, .aep-backfill-confirm:hover { opacity: 0.85; }
.aep-backfill-skip:disabled, .aep-backfill-confirm:disabled { cursor: not-allowed; opacity: 0.6; }

/* ── Body (main + sidebar) ────────────────────────────────────── */
.aep-container { display: flex; flex-direction: column; gap: var(--spacing-xl); padding: var(--spacing-2xl) var(--page-gutter) var(--spacing-7xl); max-width: 1512px; margin: 0 auto; box-sizing: border-box; }
.aep-grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--detail-rail); column-gap: var(--spacing-md); width: 100%; }
.aep-main { display: flex; flex-direction: column; gap: var(--spacing-mlg); min-width: 0; }
.aep-sidebar { display: flex; flex-direction: column; gap: var(--spacing-mlg); align-self: start; }

/* Overview card (main) */
.aep-card { background: rgba(237, 237, 237, 0.05); border-radius: var(--radius-lg); padding: 15px; display: flex; flex-direction: column; gap: var(--spacing-smd); }
.aep-card h2 { font-family: var(--font-display); font-size: var(--font-size-lg); line-height: 22px; letter-spacing: 1px; margin: 0; text-transform: uppercase; font-weight: var(--font-weight-normal); color: var(--pebble); }
.aep-card p { margin: 0; font-size: var(--font-size-sm); line-height: 1.6; color: var(--pebble); }

/* ── Readthrough (main) — scene-by-scene recap, collapsed by default ──
   Ported 1:1 from animeoshi-web's ReadthroughSection. */
.aer-section { display: flex; flex-direction: column; gap: var(--spacing-md); background: var(--color-surface); border: var(--border-normal) solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-md); }
.aer-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-md); }
.aer-header-left { display: flex; flex-direction: column; gap: var(--spacing-xs); min-width: 0; }
.aer-title { font-family: var(--font-display); font-size: var(--font-size-lg); font-weight: normal; text-transform: uppercase; color: var(--color-text-primary); margin: 0; line-height: 1.2; display: inline-flex; align-items: center; gap: var(--spacing-xs); }
.aer-info-icon { color: var(--color-text-tertiary); display: inline-flex; align-items: center; }
.aer-meta { font-size: var(--p-font-size); color: var(--color-text-secondary); margin: 0; line-height: 1.4; }
.aer-toggle { background: none; border: none; padding: 0; font-family: inherit; font-size: var(--p-font-size); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); cursor: pointer; display: inline-flex; align-items: center; gap: var(--spacing-xs); white-space: nowrap; flex-shrink: 0; align-self: flex-start; }
.aer-toggle-caret { transition: transform 0.15s ease; }
.aer-section.aer-open .aer-toggle-caret { transform: rotate(90deg); }
.aer-scene-list { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.aer-scene-list[hidden] { display: none; } /* author display:flex would otherwise beat the [hidden] UA rule */
.aer-scene { display: flex; flex-direction: column; gap: 10px; background: var(--color-surface); border: var(--border-normal) solid var(--color-border); border-radius: var(--radius-lg); padding: 10px 15px 15px; }
.aer-scene-head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); }
.aer-scene-title { font-size: var(--p-font-size); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin: 0; line-height: 1.4; min-width: 0; }
.aer-scene-body { font-size: var(--p-font-size); color: var(--color-text-secondary); line-height: 1.6; margin: 0; }
.aer-scene-body strong { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
.aer-tag-list { display: flex; align-items: center; gap: var(--spacing-xs); flex-shrink: 0; flex-wrap: wrap; }
.aer-tag { font-size: var(--label-small-font-size); font-weight: var(--font-weight-semibold); padding: 2px var(--spacing-sm); border-radius: var(--radius-full); line-height: 1.4; white-space: nowrap; }
.aer-tag-default, .aer-tag-setup { background: rgba(237, 237, 237, 0.05); color: var(--color-text-tertiary); }
.aer-tag-plot { background: hsl(203 100% 50% / 0.18); color: var(--aqua-zap); }
.aer-tag-emotional { background: hsl(305 100% 76% / 0.18); color: var(--kawaii-core); }
.aer-tag-action { background: hsl(0 85% 60% / 0.18); color: var(--cherry-top); }
.aer-tag-reveal { background: hsl(174 100% 50% / 0.18); color: var(--cotton-sky); }
.aer-tag-comedy { background: hsl(68 100% 50% / 0.18); color: var(--sundrop); }
@media (max-width: 600px) {
  .aer-header-row { align-items: center; gap: var(--spacing-sm); }
  .aer-section { gap: var(--spacing-sm); }
  .aer-scene-head { flex-direction: column; align-items: flex-start; }
}

/* Episode context (sidebar) */
.aep-context { display: flex; flex-direction: column; gap: var(--spacing-sm); padding: var(--spacing-lg); background: var(--color-surface); border-radius: var(--radius-lg); }
.aep-context-title { font-family: var(--font-display); font-size: var(--font-size-md); font-weight: normal; text-transform: uppercase; color: var(--color-text-primary); margin: 0; }
.aep-context-text { font-size: var(--p-small-font-size); color: var(--color-text-secondary); line-height: 1.6; margin: 0; }

/* Sidebar info grid */
.aep-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-sm); }
.aep-info-item { background: var(--color-surface); border-radius: var(--radius-md); border: var(--border-normal) solid var(--color-border); padding: var(--spacing-md); display: flex; flex-direction: column; gap: var(--spacing-xs); }
.aep-info-label { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.aep-info-value { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }

/* Legal */
.aep-legal { display: flex; flex-direction: column; gap: var(--spacing-md); }
.aep-legal p { font-size: var(--p-small-font-size); color: var(--color-text-secondary); line-height: 1.5; margin: 0; }

/* ── Embed code generator (ported from EmbedCodeGenerator.module.css) ─── */

/* ── Quick Takes (client-side reviews) ────────────────────────── */
.aeq-section { background: rgba(237, 237, 237, 0.05); border-radius: var(--radius-lg); padding: var(--spacing-md); display: flex; flex-direction: column; gap: var(--spacing-mlg); min-width: 0; }
.aeq-header { display: flex; align-items: center; gap: var(--spacing-smd); flex-wrap: wrap; }
.aeq-header-left { display: flex; align-items: center; gap: var(--spacing-smd); flex-wrap: wrap; }
.aeq-title { font-family: var(--font-display); font-size: var(--font-size-lg); font-weight: normal; text-transform: uppercase; color: var(--color-text-primary); margin: 0; line-height: 1.2; white-space: nowrap; }
.aeq-filters { display: inline-flex; gap: 3px; }
.aeq-pill { padding: 5px 10px; border-radius: var(--radius-max); background: rgba(255, 255, 255, 0.1); color: var(--pebble); font: inherit; font-size: var(--font-size-xs); line-height: 16px; font-weight: var(--font-weight-medium); border: 0; cursor: pointer; transition: background 0.15s ease, opacity 0.15s ease; white-space: nowrap; }
.aeq-pill:not(.aeq-pill-active):hover { background: rgba(255, 255, 255, 0.15); }
.aeq-pill-active { background: var(--pebble); color: var(--charcoal); }
.aeq-view-all { margin-left: auto; display: inline-flex; align-items: center; gap: var(--spacing-xs); background: none; border: none; padding: 0; font-family: inherit; font-size: var(--font-size-sm); line-height: 20px; font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); text-decoration: none; white-space: nowrap; flex-shrink: 0; cursor: pointer; }
.aeq-caret { width: 12px; height: 12px; flex-shrink: 0; }
.aeq-view-all:hover { color: var(--color-text-primary); }
.aeq-view-all:disabled { opacity: 0.6; cursor: default; }
/* Bottom slot — matches the live .viewAllBottom: centered, full-width, sundrop.
   Used directly as the collapsed "View all" button, and as a flex wrapper that
   centers the secondary-grey "Load more" (.aeq-view-all) button. */
.aeq-view-all-bottom { align-self: center; width: 100%; padding-top: var(--spacing-sm); background: none; border: none; font-family: inherit; font-size: var(--font-size-sm); line-height: 20px; font-weight: var(--font-weight-semibold); color: var(--sundrop); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 2px; }
.aeq-view-all-bottom:hover { text-decoration: underline; }
.aeq-list { display: flex; flex-direction: column; gap: 15px; min-width: 0; }
.aeq-loading, .aeq-empty { padding: var(--spacing-lg) var(--spacing-smd); text-align: center; color: rgba(237, 237, 237, 0.55); font-size: var(--font-size-sm); line-height: 20px; margin: 0; }

.aeq-card { display: flex; flex-direction: column; gap: 10px; padding-bottom: 15px; border-bottom: var(--border-normal) solid rgba(237, 237, 237, 0.1); min-width: 0; background: transparent; text-decoration: none; color: inherit; cursor: pointer; }
.aeq-card:last-child { border-bottom: none; padding-bottom: 0; }
.aeq-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); }
.aeq-user { display: flex; align-items: center; gap: 5px; min-width: 0; flex: 1; cursor: pointer; text-decoration: none; }
.aeq-user:hover .aeq-username { text-decoration: underline; }
.aeq-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: rgba(237, 237, 237, 0.1); }
.aeq-user-meta { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; }
.aeq-username { font-size: var(--font-size-sm); line-height: 18px; font-weight: var(--font-weight-medium); color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aeq-sub { display: flex; align-items: center; gap: var(--spacing-xs); }
.aeq-stars { display: inline-flex; align-items: center; gap: 2px; }
.aeq-star { width: 16px; height: 16px; color: var(--color-border); flex-shrink: 0; }
.aeq-star-filled { color: var(--ivory); }
.aeq-time { font-size: var(--font-size-xs); color: var(--color-text-secondary); white-space: nowrap; }
.aeq-verified { display: inline-flex; align-items: center; gap: var(--spacing-xs); padding: var(--spacing-xs) var(--spacing-md); border-radius: var(--radius-full); background: var(--aqua-zap); color: var(--ivory); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); white-space: nowrap; flex-shrink: 0; }
.aeq-head-right { display: inline-flex; align-items: center; gap: var(--spacing-sm); flex-shrink: 0; }
.aeq-votes { display: inline-flex; align-items: center; gap: var(--spacing-xs); }
.aeq-vote { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: var(--color-surface); border: 0; border-radius: 50%; color: var(--color-text-primary); cursor: pointer; flex-shrink: 0; transition: transform 0.15s ease, color 0.15s ease; }
.aeq-vote:hover { transform: scale(1.05); }
.aeq-vote-active { color: var(--color-accent); }
/* Edit affordance on the user's own take (mirrors animeoshi-web SignalCard .editButton). */
.aeq-edit { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-xs); padding: var(--spacing-sm) var(--spacing-md); background: var(--color-surface); border: 0; border-radius: var(--radius-full); font: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: transform 0.2s ease; }
.aeq-edit:hover { transform: scale(1.05); }
.aeq-review { font-size: var(--font-size-sm); line-height: 18px; color: var(--color-text-primary); margin: 0; overflow-wrap: anywhere; word-break: break-word; min-width: 0; max-width: 100%; }

/* ── Responsive ───────────────────────────────────────────────── */
/* ── Below 1100px: AO switches to its MOBILE layout (tablets included) ──
   AO's episode page uses one layout for everything < 1100px (its .mobileOnly).
   So at tablet width the hero drops the desktop verdict rail, the Oshimeter
   becomes a full-width row under the hero, and the content stacks in AO's order:
   Hero → Oshimeter → Episode Context → Readthrough → Reviews → Weekly Verdict.
   (Phone-specific sizing is layered on at ≤640 / ≤380 below.) */
@media (max-width: 1099.98px) {
  .aep-hero-inner, .aep-container { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }
  /* Breadcrumb is desktop-only on AO (hidden < 1100). */
  .aep-crumbs { display: none; }

  /* Hero: cover spans title+nav rows; Rate / Mark-as-watched / Oshimeter become
     full-width rows beneath. Verdict rail is undone (relocated by verdictCsr). */
  .aep-hero-block,
  .aep-hero-block-verdict {
    position: static;
    padding-right: 0;
    grid-template-columns: auto minmax(0, 1fr);
    /* AO tablet (measured at 820px): the cover is tall and everything — title,
       EP nav, Rate (star) pill, Mark-as-watched — sits BESIDE it in the right
       column, each spanning the full right-column width (nav's "Next EP" starts
       at x515, "Mark as watched" at x219 — both right of the cover, which ends
       ~x210). Only the Oshimeter is full-page-width, below the hero. */
    grid-template-areas:
      "cover title"
      "cover nav"
      "cover rate"
      "cover watch"
      "osh   osh"
      "right right";
    column-gap: var(--spacing-mlg);
  }
  /* Cover stretches (default align-items) to the right-column content height —
     no min-height floor / aspect lock so it never inflates past the stack. */
  .aep-cover-stack { width: clamp(120px, 18vw, 175px); min-height: 0; }
  /* Drop the desktop 460px cap so the EP nav + Mark-as-watched fill the full
     right column (beside the cover), like the star pill and AO. */
  .aep-nav, .aep-watch { max-width: none; }
  .aep-osh { max-width: none; }
  /* Title stays at AO's 36px (4xl) through the tablet range; phones shrink it
     to 20px in the ≤640 block below. */

  /* Flatten main/sidebar so the single-column grid can order sections directly,
     matching AO's mobile order. Stats grid + embed aren't shown on AO < 1100. */
  .aep-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--spacing-xl); }
  .aep-main, .aep-sidebar { display: contents; }
  .aep-context { order: 1; }
  .aer-section { order: 2; }   /* Readthrough */
  .aeq-section { order: 3; }   /* Episode Reviews */
  /* Weekly Verdict — relocated into .aep-grid by verdictCsr; clear the desktop
     "right" area so it doesn't spawn a phantom grid column. */
  .aep-title-right { position: static; width: auto; overflow: visible; grid-area: auto; order: 4; }
  .aep-legal { order: 5; }
  .aep-info-grid, .aoe-embed { display: none; }
  /* No bounding rail height in the stacked layout — re-cap the list so it scrolls. */
  .aep-verdict-list { max-height: 200px; }
}
@media (max-width: 640px) {
  .aep-hero-inner { padding: var(--spacing-md); }
  .aep-container { padding: var(--spacing-md); gap: var(--spacing-md); }
  /* Match AO mobile: breadcrumb hidden; the poster stays tall with the EP nav,
     Rate (star) pill, and Mark-as-watched all BESIDE it in the right column
     (measured on AO at 400px: star/watch left ≈ x150, right of the cover) —
     NOT full-width below. Only the Oshimeter is full-width. Tighter gap on phone. */
  .aep-crumbs { display: none; }
  .aep-hero-block,
  .aep-hero-block-verdict {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "cover title"
      "cover nav"
      "cover rate"
      "cover watch"
      "osh   osh"
      "right right";
    column-gap: 14px;
  }
  .aep-cover-stack { width: clamp(100px, 30vw, 180px); }
  .aep-title-main { font-size: var(--font-size-xl); }
  /* AO shortens the EP nav to just "EP N" on mobile (desktop keeps "Prev:/Next:"). */
  .aep-nav-word { display: none; }
  .aep-osh { max-width: none; }
  /* AO keeps the score group + radar on ONE row on mobile (don't stack). */
  .aep-osh-main { gap: var(--spacing-md); }
  /* Countdown DHMS: AO renders the segments at 18px / separator 14px on mobile
     (its ≤480 tier) — the desktop 36px (font-size-4xl) overflows the row and
     collides with "Notify Me". AO shrinks again ≤380px (see below). */
  .aep-countdown-seg { font-size: var(--font-size-lg); }
  .aep-countdown-sep { font-size: var(--font-size-sm); }

  /* Mobile section order after the Oshimeter: Episode Context → Readthrough →
     Episode Reviews (→ Weekly Verdict). Flatten .aep-main/.aep-sidebar with
     display:contents so the single-column grid can order their children
     directly, and drop the stats grid + embed (not shown on AO mobile). */
  .aep-grid { grid-template-columns: minmax(0, 1fr); }  /* force single column so flattened items stack full-width */
  .aep-main, .aep-sidebar { display: contents; }
  .aep-context { order: 1; }
  .aer-section { order: 2; }   /* Readthrough */
  .aeq-section { order: 3; }   /* Episode Reviews */
  .aep-title-right { grid-area: auto; order: 4; }  /* Weekly Verdict relocated into .aep-grid on mobile; clear the desktop "right" area so it doesn't spawn phantom grid columns */
  .aep-legal { order: 5; }
  .aep-info-grid, .aoe-embed { display: none; }
}

/* Narrow phones — AO's ≤380 countdown tier: segment 16px, separator 12px. */
@media (max-width: 380px) {
  .aep-countdown-seg { font-size: var(--font-size-base); }
  .aep-countdown-sep { font-size: var(--font-size-xs); }
}

/* ── Episode rate pill states (page-specific; the modal itself lives in
   the shared rate-modal.css) ─────────────────────────────────────── */
/* Pill is now a <button>; keep it visually identical to the old <a>. */
button.aep-rate-pill { font: inherit; cursor: pointer; }
button.aep-rate-pill:disabled { cursor: default; opacity: 0.6; }
.aep-rate-pill-rated { gap: var(--spacing-xs); }
.aep-rate-pill-rated .ao-stars { display: none; }
.aep-rate-state-label { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: inherit; white-space: nowrap; }
.aep-rate-vicon { width: 16px; height: 16px; flex-shrink: 0; }
/* "Verified Rating" — aqua badge, ivory text (animeoshi .verifiedBadge). */
.aep-rate-pill.aep-rate-verified-badge { background: var(--aqua-zap); border-color: var(--aqua-zap); color: var(--ivory); }
.aep-rate-pill.aep-rate-verified-badge:hover { background: var(--aqua-zap); opacity: 0.85; }
/* "Verify Rating" — primary (pebble) button (animeoshi Button variant="primary"). */
.aep-rate-pill.aep-rate-verify-cta { background: var(--pebble); border-color: var(--pebble); color: var(--color-button-text); }
.aep-rate-pill.aep-rate-verify-cta:hover { background: var(--pebble); opacity: 0.85; }