/* shared components — styled through each theme's CSS variables */

/* episode grid */
.ep-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:18px;padding:24px;max-width:var(--maxw,1200px);margin:0 auto}
.ep-tile{display:block;background:var(--panel,#161922);border:1px solid var(--line,#262b38);
  overflow:hidden;transition:.18s;opacity:.62}
.ep-tile.is-written{opacity:1}
.ep-tile:hover{transform:translateY(-4px);border-color:var(--cyan,var(--gold,#888))}
.ep-thumb{aspect-ratio:16/9;background:#0a0a10;overflow:hidden}
.ep-thumb img{width:100%;height:100%;object-fit:cover}
.ep-tmeta{padding:12px 14px}
.ep-num{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--soft,#999)}
.ep-tmeta b{display:block;font-size:1.06rem;margin:3px 0 6px}
.ep-tmeta p{margin:0;font-size:.86rem;color:var(--soft,#999);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* episode detail */
.ep-hero{position:relative;min-height:52vh;display:flex;align-items:flex-end;overflow:hidden}
.ep-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.55)}
.ep-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,var(--bg,#0b0c10),transparent 60%)}
.ep-hero-txt{position:relative;z-index:2;padding:40px 24px}
.ep-hero-txt h1{font-size:clamp(2rem,5vw,3.6rem);margin:6px 0}
.ep-body{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;
  padding:44px 24px;max-width:var(--maxw,1200px);margin:0 auto}
@media(max-width:860px){.ep-body{grid-template-columns:1fr}}
.ep-syn p{margin:0 0 1em}
.ep-log{color:var(--gold,#e8b866);font-style:italic}
.ep-status{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--soft,#999)}
.ep-cast h3{font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--soft,#999);margin-bottom:12px}
.ep-cast .ch-grid{grid-template-columns:repeat(2,1fr);gap:10px}