/* ===== Anime details page (Yomikaze TV) ===== */
.anime-page { max-width: var(--maxw); margin: 0 auto; }

/* Full-bleed key art. The hero breaks out of the page padding to the edges of the
   content column and runs up under the top bar, then dissolves into the page rather
   than stopping at a rounded border. That one change is most of what separates "a card
   with a picture in it" from artwork the page is built on. */
.anime-hero {
  position: relative;
  margin: calc(-1 * var(--pt)) calc(-1 * var(--px)) 26px;
  border-radius: 0;
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(340px, 42vw, 560px);
  display: flex; align-items: flex-end;
}
.anime-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center 20%; z-index: -2; }
.anime-hero-bg.no-banner { filter: blur(34px) saturate(1.2) brightness(0.5); transform: scale(1.25); }
/* Three passes: darken downward to the page colour, darken from the left so the text
   has something to sit on, and a faint violet wash that ties any show's palette back
   to the site's own. The last one is why this reads as Yomikaze and not as a stock
   streaming template. */
.anime-hero-bg::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(11,11,18,0.15), rgba(11,11,18,0.72) 58%, var(--bg) 97%),
    linear-gradient(90deg, rgba(11,11,18,0.9), rgba(11,11,18,0.35) 58%, transparent),
    linear-gradient(115deg, rgba(139,92,246,0.20), transparent 46%, rgba(236,72,153,0.14));
}
.anime-hero-top { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; justify-content: space-between; padding: 14px; }
.anime-back, .anime-share {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(10,10,16,0.55); backdrop-filter: blur(8px); color: #fff; border: 1px solid rgba(255,255,255,0.14); cursor: pointer;
  transition: background 0.15s, transform 0.15s var(--ease);
}
.anime-back svg, .anime-share svg { width: 22px; height: 22px; }
.anime-back:hover, .anime-share:hover { background: var(--accent); transform: scale(1.06); }

.anime-hero-inner {
  width: 100%;
  display: flex; gap: 30px; align-items: flex-end;
  padding: clamp(80px, 11vw, 150px) var(--px) clamp(24px, 2.6vw, 36px);
}
.anime-poster {
  flex: 0 0 auto; width: 208px; max-width: 36vw; aspect-ratio: 2/3;
  border-radius: var(--radius); overflow: hidden; background: var(--surface-2);
  /* A hairline of brand colour around the poster, and a shadow deep enough that it
     sits in front of the artwork instead of on it. */
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 26px 60px -18px rgba(0,0,0,0.95),
              0 0 60px -26px var(--accent);
}
.anime-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.anime-head { flex: 1 1 auto; min-width: 0; }
/* The same gradient bar that marks every section heading on the home page, reused as
   the title's own mark — one motif carried across the site. */
.anime-title {
  position: relative; padding-left: 18px;
  font-size: clamp(1.6rem, 3.6vw, 2.9rem); font-weight: 800; line-height: 1.08;
  letter-spacing: -0.025em; margin: 0 0 6px; text-shadow: 0 2px 18px rgba(0,0,0,0.6);
}
.anime-title::before {
  content: ""; position: absolute; left: 0; top: 0.14em; bottom: 0.16em; width: 5px;
  border-radius: var(--radius-xs); background: var(--accent-grad);
  box-shadow: 0 0 14px rgba(139, 92, 246, 0.65);
}
.anime-title-native { color: var(--muted); font-size: 0.95rem; margin: 0 0 10px 18px; }
/* One-glance synopsis, so the hero answers "what is this" without a scroll. */
.anime-blurb {
  margin: 0 0 18px 18px; max-width: 62ch;
  color: rgba(232,236,243,0.82); font-size: 0.95rem; line-height: 1.6;
  text-shadow: 0 1px 10px rgba(0,0,0,0.6);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Background trailer — the key art cross-fades into the muted video after a few
   seconds. It carries its own scrim so the title stays readable over moving video. */
.anime-hero-trailer { position: absolute; inset: 0; z-index: -2; overflow: hidden; opacity: 0; transition: opacity 0.9s ease; pointer-events: none; }
.anime-hero-trailer.on { opacity: 1; }
.anime-hero-trailer iframe {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 177.78vh; height: 100vh; min-width: 100%; min-height: 100%; border: 0; pointer-events: none;
}
.anime-hero-trailer::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,11,18,0.30), rgba(11,11,18,0.78) 62%, var(--bg));
}

/* Transparent title logo (TMDB) instead of the text title, once it has loaded. */
.anime-title.has-logo { text-shadow: none; }
.anime-title.has-logo .anime-title-txt { display: none; }
.anime-title.has-logo .hero-logo {
  display: block; width: auto; height: auto;
  /* Scales with the viewport rather than dropping at one breakpoint: a fixed 132px cap
     meant that on a tablet the logo alone was taller than the title, poster and buttons
     put together, and the hero swallowed the whole screen. */
  max-width: min(420px, 52vw); max-height: clamp(60px, 10.5vw, 132px);
  object-fit: contain; object-position: left bottom;
  filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.65));
}
.anime-title.has-logo .hero-season { display: inline-block; margin-top: 6px; }
@media (max-width: 640px) {
  /* Stacked, the head gets the full width — so the logo may use more of it. */
  .anime-head { width: 100%; }
  .anime-title.has-logo .hero-logo { max-width: 78vw; }
}

.anime-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }

/* Season / special switcher — search folds a show's seasons into one result, so this
   is how you reach the others. */
/* Season picker above the episode list (dropdown — a button row got unwieldy). */
.season-bar { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; flex-wrap: wrap; }
.season-bar-label {
  color: var(--faint); font-size: 0.68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.14em;
}
.season-select-wrap { position: relative; }
.season-select-wrap::after {
  content: ""; position: absolute; right: 12px; top: 50%; width: 9px; height: 9px;
  transform: translateY(-65%) rotate(45deg); border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted); pointer-events: none;
}
.season-select {
  appearance: none; -webkit-appearance: none;
  min-width: 190px; height: 38px; padding: 0 34px 0 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); font-size: 13.5px; font-weight: 700; cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.season-select:hover { border-color: var(--accent); }
.season-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.season-select option { background: var(--surface); color: var(--text); }
/* Which season you're looking at, spelled out next to the picker. */
.season-now { color: var(--accent-2); font-weight: 800; font-size: 13px; letter-spacing: 0.02em; }

/* Only the episode block fades while the new season loads. */
.episodes-wrap { transition: opacity 0.16s ease, transform 0.16s ease; }
.episodes-wrap.swapping { opacity: 0; transform: translateY(6px); }

@media (max-width: 640px) {
  .season-select { min-width: 0; width: 100%; }
  .season-select-wrap { flex: 1 1 auto; }
}
/* Sits above the title, so it reads as a label on the artwork rather than as data
   under a heading. Small caps and wide tracking keep it quiet next to the big title. */
.anime-badges { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 12px 18px; }
.a-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.16); color: #e7e8f0;
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
  backdrop-filter: blur(4px);
}
/* The first badge — the format — carries brand colour so the row has one anchor. */
.anime-badges .a-badge:first-child:not(.airing) {
  background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: #fff;
}
.a-badge.a-score { color: #fcd34d; }
.a-badge.a-score b { color: #fff; }
.a-badge.airing { color: #6ee7b7; border-color: rgba(52,211,153,0.4); }
.a-dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; animation: pulse-dot 1.8s infinite; }
@keyframes pulse-dot { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,0.5); } 70% { box-shadow: 0 0 0 7px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }

/* One row that scrolls sideways instead of wrapping — a show with twenty tags used to
   push the whole hero down. The mask fades the last chip out, which is also the hint
   that there is more to the right. */
.anime-genres {
  display: flex; flex-wrap: nowrap; gap: 8px; margin: 0 0 4px 18px;
  overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
  -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent);
          mask-image: linear-gradient(90deg, #000 90%, transparent);
}
.anime-genres::-webkit-scrollbar { display: none; }
.anime-genres .chip { flex: 0 0 auto; }
.anime-rating { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px 18px; min-height: 30px; }
.anime-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px 18px; }
.info-watch { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; font-size: 15px; }
.info-watch svg { width: 19px; height: 19px; }

/* Round icon buttons next to the one labelled action. */
.info-icon {
  width: 44px; height: 44px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.16);
  color: var(--text); backdrop-filter: blur(6px);
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s var(--ease);
}
.info-icon svg { width: 19px; height: 19px; }
.info-icon:hover { background: rgba(255,255,255,0.16); border-color: var(--accent); transform: translateY(-2px); }
.info-icon.active-fav { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 55%, transparent); }
/* AniList link — carries the site's own blue so it reads as an outbound source link. */
.info-anilist svg { width: 21px; height: 15px; color: #02a9ff; }
.info-anilist:hover { background: rgba(2,169,255,0.16); border-color: rgba(2,169,255,0.5); }

/* ---- tabs ---- */
.anime-tabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--border-soft); margin-bottom: 22px; scrollbar-width: none; }
.anime-tabs::-webkit-scrollbar { display: none; }
.anime-tab { position: relative; padding: 12px 18px; background: transparent; border: 0; color: var(--muted); font-weight: 700; font-size: 14.5px; white-space: nowrap; cursor: pointer; transition: color 0.15s; }
.anime-tab:hover { color: var(--text); }
.anime-tab.active { color: #fff; }
.anime-tab.active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent-grad); }
.anime-panel[hidden] { display: none; }
.anime-panel { animation: sectionIn 0.35s var(--ease) both; }

.synopsis { color: var(--text); opacity: 0.9; line-height: 1.7; max-width: 78ch; margin: 0 0 6px; }
.synopsis.clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.read-more { background: none; border: 0; color: var(--accent); font-weight: 700; padding: 4px 0; cursor: pointer; }

.meta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 14px; }
.meta-cell { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 12px 14px; }
.meta-k { color: var(--faint); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.meta-v { color: var(--text); font-weight: 600; font-size: 14px; }
.tags-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- characters / staff ---- */
.char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.char-card { display: flex; justify-content: space-between; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); overflow: hidden; }
.char-card:hover { border-color: var(--border); }
.char-side { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.char-va { justify-content: flex-end; }
.char-img { width: 56px; height: 56px; object-fit: cover; flex: 0 0 auto; background: var(--surface-3); display: block; }
.char-txt { padding: 8px 10px; min-width: 0; }
.char-txt.right { text-align: right; }
.char-name { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.char-role { font-size: 11.5px; color: var(--faint); text-transform: capitalize; }

.staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.staff-card { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); overflow: hidden; }
.staff-card .char-img { width: 52px; height: 52px; }

/* ===== Episodes ===== */
.episodes-wrap { margin-top: 4px; }
.ep-tools { display: flex; flex-direction: column; gap: 12px; margin: 2px 0 18px; }
.ep-tool-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.ep-tool { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ep-tool-label { color: var(--faint); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; }
.ep-providers, .ep-cats { display: flex; gap: 6px; flex-wrap: wrap; }
.ep-prov, .ep-cat {
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  color: var(--muted); font-weight: 600; font-size: 0.86rem; cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.ep-prov:hover, .ep-cat:hover { color: var(--text); border-color: var(--accent); }
.ep-prov.active, .ep-cat.active { color: #fff; background: var(--accent-soft); border-color: var(--accent); }

/* filter bar */
.ep-searchbar { position: relative; display: flex; align-items: center; gap: 10px; }
.ep-search-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--faint); display: grid; pointer-events: none; }
.ep-search-ic svg { width: 17px; height: 17px; }
.ep-search-input {
  flex: 1 1 auto; height: 44px; padding: 0 14px 0 40px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: 14px; outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ep-search-input::placeholder { color: var(--faint); }
.ep-search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ep-tool-btn { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); color: var(--muted); cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.ep-tool-btn:hover { color: var(--text); border-color: var(--accent); }
.ep-tool-btn.active { color: #fff; background: var(--accent-soft); border-color: var(--accent); }
.ep-tool-btn svg { width: 20px; height: 20px; }

/* episode rows */
.ep-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
/* The grid cell holds the link and the watched button side by side, so the button is
   not nested inside the anchor. */
.ep-item { position: relative; display: flex; }
.ep-item .ep-row { flex: 1 1 auto; min-width: 0; }
.ep-row {
  position: relative; overflow: hidden;
  display: flex; gap: 14px; padding: 10px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border-soft);
  text-decoration: none; color: var(--text);
  transition: border-color 0.16s, background 0.16s, transform 0.16s var(--ease);
}
/* An accent edge that lights up on hover — the same mark the player uses for the
   episode you are on, so the two lists speak the same language. */
.ep-row::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--accent-grad);
  opacity: 0; transition: opacity 0.16s;
}
.ep-row:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: var(--surface-2); transform: translateY(-2px); }
.ep-row:hover::before { opacity: 1; }
.ep-row.current { border-color: var(--accent); background: linear-gradient(90deg, var(--accent-soft), var(--surface) 60%); }
.ep-row.current::before { opacity: 1; }
.ep-thumb { position: relative; flex: 0 0 auto; width: 168px; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-3); }
.ep-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s var(--ease); }
.ep-row:hover .ep-thumb img { transform: scale(1.06); }
.ep-play { position: absolute; inset: 0; margin: auto; width: 34px; height: 34px; display: grid; place-items: center; color: #fff; background: rgba(0,0,0,0.42); border-radius: 50%; opacity: 0; transition: opacity 0.15s; }
.ep-play svg { width: 18px; height: 18px; margin-left: 2px; }
.ep-row:hover .ep-play { opacity: 1; }
.ep-row.no-thumb .ep-play { opacity: 1; }
.ep-row.no-thumb .ep-thumb { filter: brightness(0.7) saturate(0.9); }
.ep-dur { position: absolute; right: 6px; bottom: 6px; padding: 1px 7px; border-radius: var(--radius-xs); background: rgba(0,0,0,0.78); color: #fff; font-size: 10.5px; font-weight: 700; }

/* ---- what you have already seen ----
   An episode you finished is dimmed and ticked, so a long season shows at a glance
   where you got to. The one you stopped part-way through keeps its colour and carries
   a progress bar instead — that is the episode you came back for. */
/* The tick sits over the thumbnail: a 34px target, dim until you have watched the
   episode, solid once you have. On a phone it is always visible; on a desktop it fades
   in with the row so it does not clutter a long list. */
.ep-mark {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  width: 34px; height: 34px; padding: 8px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(8,8,14,0.72); border: 1px solid rgba(255,255,255,0.22); color: #fff;
  opacity: 0; transition: opacity 0.15s, background 0.15s, border-color 0.15s, transform 0.12s var(--ease);
}
.ep-mark svg { width: 100%; height: 100%; }
.ep-item:hover .ep-mark, .ep-mark:focus-visible { opacity: 1; }
.ep-mark:hover { transform: scale(1.08); border-color: var(--accent); }
.ep-item.seen .ep-mark {
  opacity: 1; background: var(--accent); border-color: var(--accent);
}
@media (hover: none) { .ep-mark { opacity: 1; } }

.ep-item.seen .ep-thumb img { opacity: 0.42; }
.ep-item.seen .ep-row-title { color: var(--muted); font-weight: 600; }
.ep-item:hover.seen .ep-thumb img { opacity: 0.75; }

.ep-progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: rgba(255,255,255,0.22);
}
.ep-progress i { display: block; height: 100%; background: var(--accent-grad); }
.ep-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 2px 4px 2px 0; }
.ep-row-title { font-size: 14px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ep-row-desc { font-size: 12px; color: var(--muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ep-row-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ep-date { font-size: 11.5px; color: var(--faint); }
.ep-cc { color: var(--faint); display: grid; }
.ep-cc svg { width: 17px; height: 17px; }

@media (max-width: 1100px) {
  .ep-list { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  /* Thumbnails are smaller here, so the tick tucks in closer. */
  .ep-mark { left: 8px; top: 8px; width: 32px; height: 32px; padding: 7px; }
}
@media (max-width: 720px) {
  /* Stacked, the hero holds the poster AND all the text, so the generous run-up above
     it would push everything else off the first screen. Much less headroom here. */
  .anime-hero { min-height: clamp(280px, 62vw, 400px); }
  .anime-hero-inner { flex-direction: column; align-items: flex-start; padding: clamp(52px, 16vw, 92px) var(--px) 20px; gap: 14px; }
  .anime-poster { width: 116px; }
  .char-grid { grid-template-columns: 1fr; }
  .ep-thumb { width: 132px; }
  /* The 18px indent under the title bar is desktop breathing room; on a phone it just
     eats width. */
  .anime-badges, .anime-title-native, .anime-blurb, .anime-actions, .anime-rating, .anime-genres { margin-left: 0; }
  .anime-title { padding-left: 12px; }
  .anime-title::before { width: 4px; }
  .anime-blurb { -webkit-line-clamp: 2; margin-bottom: 14px; }
  .anime-actions { width: 100%; }
  .anime-actions .info-watch { flex: 1 1 auto; justify-content: center; }
}