/* 空 · 水 · 云 · 鸟 · 共享设计系统（浅色留白风）
   四字四色：空=sky 水=water 云=cloud 鸟=bird。改色改 :root 变量。 */
:root{
  --bg:#fafbfc;
  --bg-soft:#f1f5f9;
  --card:#ffffff;
  --border:rgba(91,141,184,.14);
  --border-strong:rgba(91,141,184,.28);
  --text:#2c333e;
  --muted:#6b7688;
  --soft:#a8b2c1;

  --sky:#a8c8de;
  --water:#5b8db8;
  --water-deep:#3a6b94;
  --cloud:#dde4ec;
  --bird:#d97a4e;

  --good:#5cb88a;
  --warn:#c9a96e;
  --bad:#c75c5c;
  --gold:#c9a96e;

  --shadow-sm:0 2px 8px rgba(60,90,120,.06);
  --shadow:0 6px 22px rgba(60,90,120,.09);
  --shadow-lg:0 14px 40px rgba(60,90,120,.12);

  --radius:16px;
  --radius-sm:10px;

  /* 字体族。此前 --font-display / --font-body 全站从未定义过（15 处 var() 全走
     fallback）——「看着像有设计系统、其实没有」的味道正来自这里。下面的取值
     就是各处 fallback 的原值，所以**定义它们不会改变任何一处的渲染**。
     ⚠️ 中文 Windows 出厂没有 Noto Serif SC / Songti SC（苹果字体）/ PingFang SC：
     标题最终落到泛型 serif → 仍是宋体；正文落到 Microsoft YaHei。 */
  --font-display:"Noto Serif SC","Songti SC",serif;
  --font-body:"Noto Serif SC","Songti SC","PingFang SC","Microsoft YaHei",-apple-system,"Segoe UI",sans-serif;
  --font-latin:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;

  /* 字号刻度。原先全站有 25 种 font-size，其中 11 / 11.5 / 12 / 12.5 / 13 / 13.5 /
     14 / 14.5 八个值挤在 3.5px 的区间里 —— 人眼分辨不出 0.5px，这类「半像素级」
     取值只可能来自逐个元素手调，正是「一眼 AI 味」的视觉来源。现在收敛成 12 档。
     11px 是中文辅助文字的下限（原先还有 8.5 / 9 / 9.5px，属于「看得见读不了」）。 */
  --fs-2xs:11px;      /* 徽章 / 角标 / 极小辅助 */
  --fs-xs:12px;       /* 次要说明文字 */
  --fs-sm:13px;       /* 卡片标题 / 小标签 */
  --fs-base:14px;     /* 正文（也是原先 13.5px 那批的实际大小） */
  --fs-md:15px;       /* 首页卡片标题 */
  --fs-lg:16px;       /* 大号正文 */
  --fs-xl:20px;       /* 小标题 */
  --fs-2xl:24px;      /* 中标题 */
  --fs-3xl:26px;      /* 区块标题 h2 */
  --fs-4xl:30px;      /* 页级标题 */
  --fs-display:72px;  /* Hero 主标题 */
  --fs-mega:120px;    /* 页级装饰数字（不用作正文） */

  /* 层级刻度（原先是「盖不住就再加个 0」，最高一路冲到 99999） */
  --z-raise:1;
  --z-drop:10;
  --z-sticky:50;
  --z-nav:60;
  --z-progress:100;
  --z-skip:1000;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

:root{
  --bg-banner-h: 420px;
}

body{
  background:#fff;
  font-family: var(--font-body, "Noto Serif SC","Songti SC","PingFang SC","Microsoft YaHei",
    -apple-system,"Segoe UI",sans-serif);
  color:var(--text);min-height:100vh;
  line-height:1.65;
}

/* 首屏：flex 两列（图 58% / 标题列自适应）。
   旧方案用绝对定位硬算位置，只在 ≥1440px 放得下，其余宽度会撑出横向滚动条。 */
.banner-row{
  display:flex;
  align-items:center;
  gap:clamp(12px,3vw,40px);
  max-width:1180px;
  min-height:var(--bg-banner-h, 420px);
  margin:32px auto 64px;
}

.banner-img{
  flex:0 1 58%;
  width:58%;
  max-width:760px;
  height:auto;
  max-height:var(--bg-banner-h, 420px);
  background:transparent;
  object-fit:contain;
  display:block;
  border-radius:0;
  box-shadow:none;
  z-index:1;
  transform:translateX(-24px);
  opacity:.85;
  transition:
    transform 1s cubic-bezier(.7,.15,.25,1),
    opacity .8s ease;
}

.hero-side{
  flex:1 1 auto;
  min-width:0;
  z-index:0;
  text-align:left;
  transform:translateX(-32px) scale(.96);
  opacity:0;
  transition:
    transform 1s .05s cubic-bezier(.7,.15,.25,1),
    opacity .55s .05s ease;
}

.banner-row.expanded .banner-img{
  transform:none;
  opacity:1;
}
.banner-row.expanded .hero-side{
  transform:none;
  opacity:1;
}

.hero-side h1{
  font-size:clamp(26px,4.2vw,60px);
  font-weight:600;
  line-height:1.18;
  letter-spacing:5px;
  font-family: var(--font-display, "Noto Serif SC","Songti SC",serif);
  white-space:normal;
  overflow-wrap:anywhere;
}
.hero-side .hero-sub{
  margin-top:12px;
  font-size:clamp(13px,1.4vw,17px);
  letter-spacing:3px;
  line-height:1.6;
  color:var(--muted);
}
.hero-side .c1{color:var(--sky)}
.hero-side .c2{color:var(--water)}
.hero-side .c3{color:var(--muted)}
.hero-side .c4{color:var(--bird)}
.hero-side .sep{
  display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--text);opacity:.4;
  margin:0 10px 12px;vertical-align:middle;
}

.hero{display:none}
.bg-stage{display:none}

@media (max-width:720px){
  .banner-row{ flex-direction:column; align-items:stretch; gap:18px; min-height:0; margin:20px auto 40px; }
  .banner-img{ flex:none; width:100%; max-width:none; max-height:none; }
  .hero-side{ flex:none; width:100%; text-align:center; }
  .hero-side h1{ font-size:clamp(28px,8.5vw,44px); letter-spacing:4px; white-space:normal; }
  .hero-side .sep{ margin:0 6px 10px; }
}

a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,select{font-family:inherit;color:inherit}

.topbar{
  position:sticky;top:0;z-index:var(--z-sticky);
  background:rgba(250,251,252,.78);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--border);
  padding:14px clamp(20px,5vw,56px);
  display:flex;align-items:center;gap:18px;
}
.brand{
  font-weight:700;font-size:var(--fs-lg);letter-spacing:2px;
  display:flex;align-items:center;gap:10px;
}
.brand .glyph{
  display:inline-block;width:22px;height:22px;border-radius:50%;
  background:linear-gradient(135deg,var(--sky),var(--water));
}
.topbar .meta{color:var(--muted);font-size:var(--fs-sm);margin-left:auto}
.topbar .meta .dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--good);margin-right:6px;vertical-align:middle;
}
.topbar .meta .dot.warn{background:var(--warn)}
.topbar .meta .dot.bad{background:var(--bad)}

.wrap{max-width:1180px;margin:0 auto;padding:32px clamp(20px,5vw,40px) 80px}
section{margin-bottom:88px}
.section-head{margin-bottom:28px;display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap}
.section-head h2{font-size:var(--fs-4xl);font-weight:700;letter-spacing:1px}
.section-head h2 .accent{
  background:linear-gradient(90deg,var(--water),var(--bird));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.section-head .sub{color:var(--muted);font-size:var(--fs-base);margin-left:auto}

.weekday-bar{
  display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px;
  background:var(--card);padding:8px;border-radius:999px;
  box-shadow:var(--shadow-sm);border:1px solid var(--border);
  width:fit-content;
}
.weekday{
  padding:9px 18px;border-radius:999px;border:0;background:transparent;
  color:var(--muted);font-size:var(--fs-base);font-weight:600;cursor:pointer;
  transition:.2s;display:flex;flex-direction:column;align-items:center;
  min-width:64px;
}
.weekday .d{font-size:var(--fs-2xs);opacity:.7;font-weight:500}
.weekday .n{font-size:var(--fs-base);font-weight:700;line-height:1.2;margin-top:1px}
.weekday:hover{color:var(--text);background:var(--bg-soft)}
.weekday.today{color:var(--water)}
.weekday.active{
  color:#fff;
  background:linear-gradient(120deg,var(--water),var(--water-deep));
  box-shadow:0 4px 14px rgba(91,141,184,.32);
}
.weekday .badge{
  display:inline-block;font-size:var(--fs-2xs);background:var(--bird);color:#fff;
  padding:1px 6px;border-radius:999px;margin-top:2px;font-weight:600;
}

.anime-toolbar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:24px;
}
.anime-toolbar .weekday-bar{ margin-bottom:0; }
.anime-toolbar.past .weekday-bar{ display:none; }
.season-select{
  appearance:none;-webkit-appearance:none;
  padding:9px 34px 9px 16px;border-radius:999px;
  border:1px solid var(--border);background:var(--card);color:var(--text);
  font-size:var(--fs-base);font-weight:600;cursor:pointer;box-shadow:var(--shadow-sm);
  transition:.2s;

  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.season-select:hover{ color:var(--water);border-color:var(--water) }
.season-select:focus-visible{ outline:2px solid var(--water);outline-offset:2px }
.season-hint{ font-size:var(--fs-sm);color:var(--muted);font-weight:500 }
.season-progress{
  width:min(260px,70%);height:3px;margin:14px auto 6px;
  background:var(--bg-soft);border-radius:999px;overflow:hidden;
}
.season-progress i{
  display:block;height:100%;width:6%;border-radius:999px;
  background:linear-gradient(90deg,var(--water),var(--water-deep));
  transition:width .9s linear;
}
.season-elapsed{ font-size:var(--fs-xs);color:var(--muted);letter-spacing:.02em }
.retry-btn{
  padding:7px 20px;border-radius:999px;border:1px solid var(--border);
  background:var(--card);color:var(--water-deep);font-size:var(--fs-sm);font-weight:600;
  cursor:pointer;transition:.2s;
}
.retry-btn:hover{ background:var(--water);color:#fff;border-color:transparent }

.anime-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:22px;
}
.anime{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);cursor:pointer;
  transition:.25s;display:flex;flex-direction:column;
  box-shadow:var(--shadow-sm);
}
.anime:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--border-strong)}
.anime .cover{aspect-ratio:3/4.1;overflow:hidden;background:var(--bg-soft);position:relative}
.anime .cover img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.anime:hover .cover img{transform:scale(1.04)}
.anime .time-pill{
  position:absolute;top:10px;left:10px;background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);padding:3px 10px;border-radius:999px;
  font-size:var(--fs-2xs);font-weight:700;color:var(--water-deep);
  box-shadow:0 1px 4px rgba(0,0,0,.08);
}
.anime .body{padding:13px 14px 16px;display:flex;flex-direction:column;flex:1}
.anime h3{font-size:var(--fs-md);font-weight:700;line-height:1.4;margin-bottom:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.anime .jp{font-size:var(--fs-xs);color:var(--muted);margin-bottom:8px;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.anime .meta{
  margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding-top:8px;border-top:1px dashed var(--border);
}
.anime .hot{font-size:var(--fs-xs);color:var(--bird);font-weight:700;display:flex;align-items:center;gap:3px}
.anime .eps{font-size:var(--fs-2xs);color:var(--muted)}
.anime .tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.anime .tag{
  font-size:var(--fs-2xs);padding:2px 8px;border-radius:999px;
  background:var(--bg-soft);color:var(--muted);border:1px solid var(--border);
}
.anime .tag:nth-child(1){background:rgba(91,141,184,.10);color:var(--water-deep);border-color:rgba(91,141,184,.18)}

.anime .score-pill{
  position:absolute;top:10px;right:10px;z-index:2;
  padding:3px 9px;border-radius:999px;
  background:rgba(30,26,22,.74);backdrop-filter:blur(8px);
  color:#ffd166;font-size:var(--fs-xs);font-weight:800;line-height:1.5;
  box-shadow:0 1px 5px rgba(0,0,0,.18);letter-spacing:.02em;
  cursor:help;
}

.anime .time-pill{display:inline-flex;align-items:center}
.anime .time-pill .nd{
  margin-left:5px;padding:0 4px;border-radius:4px;
  font-style:normal;font-size:var(--fs-2xs);font-weight:700;line-height:1.6;
  background:var(--bird);color:#fff;
}
.anime .time-pill.na{background:rgba(255,255,255,.78);color:var(--muted);font-weight:600}

.anime .ep-bar{
  margin-top:10px;height:4px;border-radius:999px;overflow:hidden;background:var(--cloud);
}
.anime .ep-bar > i{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--water),var(--bird));
}
.anime .ep-bar.done > i{background:linear-gradient(90deg,var(--good),var(--water))}
.anime .eps b{color:var(--water-deep);font-weight:800}

.anime-grid{ --peers-opacity:1; }
.anime-grid:has(.anime:hover) .anime:not(:hover){
  opacity:.4;filter:saturate(.7);
  transition:opacity .35s, filter .35s;
}

.news-feed{display:flex;flex-direction:column;gap:2px}
.news-item{
  display:flex;align-items:flex-start;gap:14px;justify-content:space-between;
  padding:14px 16px;border-radius:var(--radius-sm);
  border:1px solid transparent;transition:.18s;cursor:pointer;
  text-decoration:none;color:inherit;
}
.news-item:hover{background:var(--card);border-color:var(--border);box-shadow:var(--shadow-sm);transform:translateX(2px)}
.news-main{flex:1;min-width:0}
.news-title{font-size:var(--fs-md);font-weight:600;line-height:1.5;color:var(--text)}
.news-orig{font-size:var(--fs-xs);color:var(--muted);margin-top:3px;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.news-meta{display:flex;align-items:center;gap:8px;flex-shrink:0;align-self:center;
  font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
.news-src{background:var(--bg-soft);color:var(--water-deep);padding:2px 9px;border-radius:999px;border:1px solid var(--border)}
.news-date{color:var(--muted)}
.news-go{color:var(--soft);font-size:var(--fs-base);transition:.18s}
.news-item:hover .news-go{color:var(--water);transform:translate(2px,-2px)}

.status{padding:60px 20px;text-align:center;color:var(--muted);font-size:var(--fs-md)}
.status .err{color:var(--bad)}
.spinner{
  width:30px;height:30px;margin:0 auto 14px;border-radius:50%;
  border:2.5px solid var(--border);border-top-color:var(--water);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.fade-in{animation:fadein .4s ease}

@keyframes fadein{from{opacity:0}to{opacity:1}}

footer{
  text-align:center;color:var(--muted);font-size:var(--fs-sm);
  padding:32px 16px 40px;line-height:2;
  border-top:1px solid var(--border);
  background:rgba(255,255,255,.4);
}
footer a{color:var(--water)}
footer .sep{margin:0 8px;opacity:.4}

.icp{
  text-align:center;color:var(--muted);font-size:var(--fs-sm);
  padding:22px 16px 34px;line-height:2;
  border-top:1px solid var(--border);
  background:rgba(255,255,255,.4);
}
.icp a{color:var(--water);text-decoration:none}
.icp a:hover{text-decoration:underline}
.icp-sep{margin:0 8px;color:var(--muted)}

.icp img.beian-icon{display:inline-block;width:auto;height:13px;max-width:none;vertical-align:-3px;margin-right:3px}

@media (max-width:640px){
  .topbar{padding:10px 16px}
  .wrap{padding:28px 16px 60px}
  section{margin-bottom:56px}
  .section-head h2{font-size:var(--fs-2xl)}
  .hero h1{letter-spacing:3px}
  .weekday-bar{width:100%;overflow-x:auto;flex-wrap:nowrap}
  .weekday{flex-shrink:0}
  .anime-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
  .anime h3{font-size:var(--fs-base)}
  .anime .body{padding:10px 11px 12px}
}

/* 番剧卡片悬停展开：panel 贴在卡的一侧
   卡在视口左半 → 向右展开（data-side="right"），右半 → 向左展开。 */
.anime{position:relative}
.anime .anime-detail{
  position:absolute;
  top:0;
  width:560px; max-width:min(94vw, 640px);
  max-height:min(82vh, 680px);
  border-radius:18px;
  background:#fff;
  box-shadow:0 22px 56px -10px rgba(0,0,0,.38),0 0 0 1px rgba(0,0,0,.06);
  padding:16px 22px 14px;
  opacity:0;
  transform:scaleX(0);
  transition:opacity .22s ease, transform .28s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
  z-index:5;
  color:var(--text, #2c333e);
  text-align:left;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--water,#a6c8ff) var(--bg-soft);
}

.anime[data-side="right"] .anime-detail{
  left:calc(100% + 8px);
  transform-origin:left center;
}

.anime[data-side="left"] .anime-detail{
  right:calc(100% + 8px);
  transform-origin:right center;
}
.anime .anime-detail::-webkit-scrollbar{ width:10px; }
.anime .anime-detail::-webkit-scrollbar-thumb{
  background:var(--water,#a6c8ff);border-radius:999px;border:2px solid #fff;
}
.anime .anime-detail::-webkit-scrollbar-track{
  background:var(--bg-soft);border-radius:999px;margin:4px;
}

.anime.ad-shown{ z-index:var(--z-sticky); }
.anime.ad-shown .anime-detail{
  opacity:1;
  transform:scaleX(1);
  pointer-events:auto;
}

.anime-detail .ad-loading,
.anime-detail .ad-error{
  font-size:var(--fs-sm);color:var(--muted);
  display:flex;align-items:center;gap:8px;
  padding:18px 4px;
}
.anime-detail .ad-loading .spinner,
.anime-detail .ad-error::before{ content:''; }
.anime-detail .ad-loading::before{
  content:'';width:14px;height:14px;border-radius:50%;
  border:2px solid var(--border);border-top-color:var(--water-deep);
  display:inline-block;animation:spin .8s linear infinite;
}

.anime-detail .ad-title{
  font-size:var(--fs-lg);font-weight:800;color:var(--text, #2c333e);
  line-height:1.4;margin-bottom:10px;padding-bottom:10px;
  border-bottom:1px dashed var(--border);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.anime-detail .ad-title a{color:var(--water-deep);text-decoration:none}
.anime-detail .ad-title a:hover{text-decoration:underline}

.anime-detail .ad-section{
  padding:10px 0 14px;
  border-bottom:1px dashed var(--border);
}
.anime-detail .ad-section:last-of-type{ border-bottom:none; }
.anime-detail .ad-section-title{
  font-size:var(--fs-sm);font-weight:800;color:var(--text, #2c333e);
  margin-bottom:10px;
  display:flex;align-items:center;gap:6px;
}
.anime-detail .ad-section-title::before{
  content:'';display:inline-block;width:4px;height:14px;
  background:var(--water,#a6c8ff);border-radius:2px;
}
.anime-detail .ad-section-count{
  font-size:var(--fs-2xs);font-weight:700;
  background:var(--bg-soft);color:var(--muted);
  padding:1px 8px;border-radius:999px;line-height:1.4;
}
.anime-detail .ad-scroll-hint{
  text-align:center;font-size:var(--fs-2xs);color:var(--muted);
  opacity:.45;margin-top:6px;letter-spacing:.04em;
}

.anime-detail .ad-synopsis-wrap{
  font-size:var(--fs-sm);line-height:1.75;color:var(--text, #2c333e);
  margin-bottom:6px;
  position:relative;
}

.anime-detail .ad-synopsis{
  white-space:pre-wrap;word-break:break-word;
  max-height:160px;
  overflow:hidden;
  position:relative;
  transition:max-height .35s ease, overflow .35s ease;
}
.anime-detail .ad-synopsis.expanded{
  max-height:2000px;
  overflow:visible;
}

.anime-detail .ad-synopsis.collapsed::after{
  content:'';
  position:absolute;left:0;right:0;bottom:0;height:36px;
  background:linear-gradient(180deg, rgba(255,255,255,0), #fff);
  pointer-events:none;
}
.anime-detail .ad-synopsis.expanded::after{ display:none; }
.anime-detail .ad-links{ margin-top:10px; }
.anime-detail .ad-links a{
  display:inline-block;font-size:var(--fs-sm);font-weight:600;
  color:var(--water-deep);text-decoration:none;
  padding:6px 14px;border-radius:999px;
  background:var(--bg-soft);border:1px solid var(--border);
}
.anime-detail .ad-links a:hover{
  background:var(--water,#a6c8ff);color:#fff;border-color:transparent;
}
.anime-detail .ad-meta-inline{
  font-size:var(--fs-xs);color:var(--muted);
  margin-top:10px;line-height:1.6;
}

/* 立绘原图高宽比从 1.2 跨到 2.6，不能给头像框写死 aspect-ratio：
   框比图扁 → 细长图缩成一条影；框比图高 → 图靠顶、底部空一截。
   改为固定格高 + 图按自身比例 + 垂直居中。 */
.anime-detail .ad-roles{
  display:grid;grid-template-columns:repeat(3, 1fr);
  gap:12px 8px;padding-right:4px;
}
.anime-detail .ad-role{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:4px;border-radius:10px;text-align:center;
  transition:background .2s,transform .2s;
  cursor:default;
}
.anime-detail .ad-role:hover{
  background:var(--bg-soft);transform:translateY(-2px);
}
.anime-detail .ad-role .avatar{
  width:100%;height:132px;
  border-radius:8px;overflow:hidden;

  background:transparent;
  display:flex;align-items:center;justify-content:center;
}
.anime-detail .ad-role .avatar img{
  width:auto;height:auto;max-width:100%;max-height:100%;
  object-fit:contain;object-position:center;
  display:block;background:transparent;
}
.anime-detail .ad-role .role-info{ width:100%;min-width:0; }
.anime-detail .ad-role .name{
  font-size:var(--fs-sm);font-weight:700;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  color:var(--text, #2c333e);
}
.anime-detail .ad-role .cv{
  font-size:var(--fs-2xs);color:var(--muted);margin-top:1px;line-height:1.2;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.anime-detail .ad-role.ad-hidden{ display:none; }

.anime-detail .avatar-fb{
  height:100%;aspect-ratio:3/4;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:var(--fs-xl);
  background:linear-gradient(135deg,#a6c8ff,#ffb8b8);
  border-radius:8px;
  letter-spacing:-1px;
}

.anime-detail .ad-staff{
  display:flex;flex-direction:column;gap:0;
  margin-top:6px;
}

.anime-detail .ad-staff-row{
  display:flex;align-items:baseline;gap:10px;
  padding:5px 0;
  border-bottom:1px dashed rgba(0,0,0,.06);
  font-size:var(--fs-sm);
}
.anime-detail .ad-staff-row:last-child{ border-bottom:none; }
.anime-detail .ad-staff-row .role{
  color:var(--muted);font-size:var(--fs-xs);
  min-width:96px;flex-shrink:0;
  font-weight:500;
}
.anime-detail .ad-staff-row .name{
  color:var(--text, #2c333e);font-weight:700;
  word-break:break-word;
}

.anime-detail.at-bottom:not(.at-top) .ad-scroll-hint{ display:none; }

.anime .anime-detail{
  -webkit-mask-image:linear-gradient(to bottom, #000 0, #000 calc(100% - 28px), transparent 100%);
  mask-image:linear-gradient(to bottom, #000 0, #000 calc(100% - 28px), transparent 100%);
  transition:-webkit-mask-image .2s, mask-image .2s;
}
.anime .anime-detail.at-top{
  -webkit-mask-image:linear-gradient(to bottom, #000 0, #000 calc(100% - 28px), transparent 100%);
  mask-image:linear-gradient(to bottom, #000 0, #000 calc(100% - 28px), transparent 100%);
}
.anime .anime-detail.at-bottom{
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 28px, #000 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 28px, #000 100%);
}
.anime .anime-detail.at-top.at-bottom{
  -webkit-mask-image:linear-gradient(#000);
  mask-image:linear-gradient(#000);
}

.anime-detail .ad-more{
  display:inline-block;margin-top:10px;
  padding:5px 14px;font-size:var(--fs-xs);font-weight:600;
  color:var(--water-deep);background:var(--bg-soft);
  border:1px solid var(--border);border-radius:999px;
  cursor:pointer;transition:.2s;
}
.anime-detail .ad-more:hover{
  background:var(--water,#a6c8ff);color:#fff;border-color:transparent;
}

@media (max-width:900px){
  .anime .anime-detail{
    position:fixed;
    left:16px;right:16px;
    top:50%;transform:translateY(-50%) scale(.96);
    margin:0;width:auto;max-height:80vh;overflow-y:auto;
    transform-origin:center;
  }
  .anime.ad-shown .anime-detail,
  .anime:hover .anime-detail{
    transform:translateY(-50%) scale(1);
  }
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* /anime/<cuid> 作品页（只追加，不改上方选择器）。色板有 3 处副本，新增变量要同步。 */
.ap-root{ min-height:50vh; }
.ap-back{ color:var(--water-deep); text-decoration:none; font-weight:600; font-size:var(--fs-base); }
.ap-back:hover{ color:var(--bird); }

.ap-hero{
  display:grid; grid-template-columns:minmax(180px,300px) 1fr; gap:clamp(20px,4vw,44px);
  align-items:start; margin-bottom:8px;
}
.ap-keyart{
  position:relative; border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(160deg,var(--bg-soft),var(--cloud));
  box-shadow:var(--shadow); aspect-ratio:3/4.1;
}
.ap-keyart img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.ap-kicker{
  font-size:var(--fs-xs); letter-spacing:.18em; text-transform:uppercase;
  color:var(--water-deep); font-weight:700; margin-bottom:8px;
}
.ap-id h1{
  font-family:var(--font-display,"Noto Serif SC","Songti SC",serif);
  font-size:clamp(26px,4.2vw,40px); line-height:1.25; margin:0 0 6px; color:var(--text);
  overflow-wrap:anywhere;
}
.ap-jp{ font-size:var(--fs-base); color:var(--muted); margin-bottom:18px; overflow-wrap:anywhere; }
.ap-facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px 18px; margin-bottom:16px; }
.ap-fact{ display:flex; flex-direction:column; gap:2px; padding:8px 0; border-top:1px solid var(--border); }
.ap-fact .k{ font-size:var(--fs-2xs); letter-spacing:.1em; text-transform:uppercase; color:var(--soft); font-weight:600; }
.ap-fact .v{ font-size:var(--fs-base); color:var(--text); font-weight:600; overflow-wrap:anywhere; }
.ap-score .v{ color:var(--bird); }
.ap-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; }
.ap-tags .tag{
  padding:3px 10px;border-radius:999px;font-size:var(--fs-xs);font-weight:600;
  background:var(--bg-soft);color:var(--water-deep);border:1px solid var(--border);
}
.ap-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.ap-btn{
  display:inline-block; padding:9px 18px; border-radius:999px;
  border:1px solid var(--border-strong); background:var(--card); color:var(--text);
  font-size:var(--fs-base); font-weight:600; text-decoration:none; transition:.2s;
}
.ap-btn:hover{ background:var(--bg-soft); border-color:var(--water); color:var(--water-deep); }
.ap-btn-primary{ background:linear-gradient(120deg,var(--water),var(--water-deep)); color:#fff; border-color:transparent; }
.ap-btn-primary:hover{ background:linear-gradient(120deg,var(--water-deep),var(--water)); color:#fff; }
.ap-copy{ font-size:var(--fs-xs); color:var(--soft); line-height:1.7; }
.ap-foot{ margin-top:42px; padding-top:20px; border-top:1px solid var(--border); }

.ap-nav{
  position:sticky; top:0; z-index:5; display:flex; gap:6px; flex-wrap:wrap;
  padding:10px 0; margin:22px 0 6px; background:var(--bg); border-bottom:1px solid var(--border);
}
.ap-nav a{
  padding:6px 14px; border-radius:999px; font-size:var(--fs-sm); font-weight:700; letter-spacing:.06em;
  color:var(--muted); text-decoration:none; transition:.2s;
}
.ap-nav a:hover{ color:var(--water-deep); background:var(--bg-soft); }

.ap-section{ margin:34px 0; }
.ap-label{ font-size:var(--fs-2xs); letter-spacing:.2em; text-transform:uppercase; color:var(--water); font-weight:700; }
.ap-section h2{
  font-family:var(--font-display,"Noto Serif SC","Songti SC",serif);
  font-size:var(--fs-xl); margin:2px 0 14px; color:var(--text); display:flex; align-items:baseline; gap:10px;
}
.ap-count{ font-size:var(--fs-xs); font-weight:600; color:var(--soft); }
.ap-synopsis{ white-space:pre-wrap; word-break:break-word; line-height:1.9; font-size:var(--fs-md); color:var(--text); }
.ap-staff{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:0 28px; }
.ap-staff-row{
  display:flex; align-items:baseline; gap:12px; padding:7px 0;
  border-bottom:1px dashed var(--border); font-size:var(--fs-base);
}
.ap-staff-row .role{ color:var(--muted); min-width:82px; flex-shrink:0; font-size:var(--fs-xs); }
.ap-staff-row .name{ color:var(--text); font-weight:700; overflow-wrap:anywhere; }

.ap-strip{ display:flex; gap:14px; overflow-x:auto; padding:4px 2px 14px; scrollbar-width:thin; }
.ap-person{
  flex:0 0 auto; width:104px; display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:8px 6px; border-radius:var(--radius-sm); background:var(--card); border:1px solid var(--border);
  text-align:center; transition:.2s;
}
.ap-person:hover{ transform:translateY(-2px); box-shadow:var(--shadow-sm); border-color:var(--border-strong); }
.ap-avatar{
  width:100%; height:126px; border-radius:8px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; background:transparent;
}

.ap-avatar img{ width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; display:block; }
.ap-person-name{ font-size:var(--fs-sm); font-weight:700; line-height:1.35; color:var(--text); overflow-wrap:anywhere; }
.ap-person-sub{ font-size:var(--fs-2xs); color:var(--muted); line-height:1.3; }

.ap-missing{ padding:70px 20px; text-align:center; color:var(--muted); }
.ap-missing h1{ font-family:var(--font-display,"Noto Serif SC","Songti SC",serif); font-size:var(--fs-3xl); color:var(--text); margin:6px 0 10px; }
.ap-missing p{ margin-bottom:20px; }

@media (hover: none){
  .ap-person:hover{ transform:none; box-shadow:none; border-color:var(--border); }
  .ap-nav a:hover{ background:transparent; }
}

@media (max-width:760px){
  .ap-hero{ grid-template-columns:1fr; }
  .ap-keyart{ max-width:230px; }
}
@media (max-width:640px){
  .ap-staff{ grid-template-columns:1fr; }
  .ap-person{ width:92px; }
  .ap-avatar{ height:112px; }
}

/* 首页 Banner 动效 + /anime/<cuid> 作品页（全部为新增规则） */

:root{ --ease:cubic-bezier(.22,.68,.24,1); --topbar-h:54px }

/* 首页 Banner 动效：纯 CSS，零 JS、零新增请求、不改布局尺寸。
   Ken Burns 用 scale / translate 这两个独立变换属性，不用 transform ——
   否则会覆盖上方 .banner-row.expanded .banner-img 的 transform。 */
body.home .banner-row{ position:relative }
body.home .banner-img{
  animation:bmKbDrift 26s ease-in-out infinite alternate;
  will-change:scale,translate;
  -webkit-mask-image:linear-gradient(180deg,#000 80%,rgba(0,0,0,.45) 94%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 80%,rgba(0,0,0,.45) 94%,transparent 100%);
}
@keyframes bmKbDrift{
  from{ scale:1.00; translate:0 0 }
  to  { scale:1.05; translate:0 -12px }
}

body.home .hero-side{ opacity:1; transform:translateX(-32px) scale(.985) }
body.home .banner-row.expanded .hero-side{ transform:none }
body.home .hero-side h1 > span{
  position:relative; top:0; opacity:0;
  animation:bmCharIn .78s var(--ease) forwards;
}
@keyframes bmCharIn{ from{ opacity:0; top:.42em } to{ opacity:1; top:0 } }

body.home .hero-side h1 > span:nth-child(1){ animation-delay:.30s }
body.home .hero-side h1 > span:nth-child(2){ animation-delay:.38s }
body.home .hero-side h1 > span:nth-child(3){ animation-delay:.46s }
body.home .hero-side h1 > span:nth-child(4){ animation-delay:.54s }
body.home .hero-side h1 > span:nth-child(5){ animation-delay:.62s }
body.home .hero-side h1 > span:nth-child(6){ animation-delay:.70s }
body.home .hero-side h1 > span:nth-child(7){ animation-delay:.78s }

/* 副标题（后台 subtitleEnabled 打开时才存在） */
body.home .hero-side .hero-sub{
  opacity:0; translate:0 .55em;
  animation:bmSubIn .8s .92s var(--ease) forwards;
}
@keyframes bmSubIn{ from{ opacity:0; translate:0 .55em } to{ opacity:1; translate:0 0 } }

.scroll-cue{ display:none }
body.home .scroll-cue{
  display:flex; position:absolute; left:29%; bottom:-8px; transform:translateX(-50%);
  flex-direction:column; align-items:center; gap:6px;
  font-size:var(--fs-2xs); letter-spacing:.28em; text-transform:uppercase; color:var(--soft);
  opacity:0; animation:bmCueIn .9s 1.35s ease forwards;
}
@keyframes bmCueIn{ to{ opacity:1 } }
.scroll-cue i{
  display:block; width:1px; height:30px;
  background:linear-gradient(180deg,var(--soft),rgba(168,178,193,0));
  animation:bmCueDrop 2.2s ease-in-out infinite;
}
@keyframes bmCueDrop{ 0%,100%{ opacity:.35; transform:scaleY(.7) } 50%{ opacity:1; transform:scaleY(1) } }
@media (max-width:720px){ body.home .scroll-cue{ display:none } }

@media (prefers-reduced-motion:reduce){
  body.home .banner-img{ animation:none !important; scale:1; translate:0 0 }
  body.home .hero-side{ transform:none !important }
  body.home .hero-side h1 > span{ animation:none !important; opacity:1; top:0 }
  body.home .hero-side .hero-sub{ animation:none !important; opacity:1; translate:0 0 }
  body.home .scroll-cue{ animation:none !important; opacity:1 }
}

/* /anime/<cuid> 作品页：雅致留白 / 角色切换舞台 / 相框式主视觉 / 分节编号。
   零外部依赖，不引 jQuery / Swiper。 */

body.pd .wrap{ max-width:1080px; margin:0 auto; padding:0 26px }

body.pd section{ margin-bottom:0 }

html:has(body.pd){ scroll-padding-top:calc(var(--topbar-h,54px) + 62px) }

body.pd{ --tone:#a8c8de; --tone-deep:#5c86a8; --tone-soft:rgba(168,200,222,.22) }

.progress{
  position:fixed; top:0; left:0; height:2px; width:0; z-index:var(--z-progress);
  background:linear-gradient(90deg,var(--sky),var(--water),var(--gold));
  box-shadow:0 0 10px rgba(91,141,184,.5);
  transition:width .1s linear;
}

.kv{ position:relative; overflow:hidden; padding:64px 0 78px; isolation:isolate }
.kv-bg{
  position:absolute; inset:-8%; z-index:-3;
  background-size:cover; background-position:center 22%;
  filter:blur(52px) saturate(1.3); opacity:.5; transform:scale(1.18);
  animation:kvdrift 26s ease-in-out infinite alternate;
}
@keyframes kvdrift{ from{ transform:scale(1.18) translate3d(0,0,0) } to{ transform:scale(1.26) translate3d(0,-14px,0) } }
.kv-veil{
  position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(120% 78% at 16% 18%, rgba(255,255,255,.86) 0%, rgba(255,255,255,0) 58%),
    linear-gradient(180deg, rgba(250,251,252,.42) 0%, rgba(250,251,252,.7) 42%, var(--bg) 94%);
}
.kv-grid{ display:grid; grid-template-columns:308px minmax(0,1fr); gap:58px; align-items:center }

.kv-poster{
  position:relative; width:100%; aspect-ratio:2/3;
  border-radius:18px; overflow:hidden; background:var(--cloud);
  box-shadow:0 34px 74px -26px rgba(44,60,80,.5), 0 0 0 1px rgba(255,255,255,.7) inset;
  transform:perspective(1400px) rotateY(7deg) rotateX(1.5deg);
  transition:transform .9s var(--ease), box-shadow .5s;
  opacity:0; animation:posterIn 1.1s .12s var(--ease) forwards;
}
@keyframes posterIn{
  from{ opacity:0; transform:perspective(1400px) rotateY(11deg) translateY(26px) }
  to{ opacity:1; transform:perspective(1400px) rotateY(7deg) rotateX(1.5deg) }
}
.kv-poster:hover{ transform:perspective(1400px) rotateY(0) rotateX(0) translateY(-7px); box-shadow:0 44px 90px -28px rgba(44,60,80,.55), 0 0 0 1px rgba(255,255,255,.8) inset }
.kv-poster img{ width:100%; height:100%; object-fit:cover }
.kv-poster::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 30%);
  pointer-events:none;
}
.kv-poster .shine{
  position:absolute; top:-40%; left:-70%; width:52%; height:180%; z-index:2;
  background:linear-gradient(105deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0));
  transform:rotate(14deg); opacity:0; pointer-events:none;
}
.kv-poster:hover .shine{ animation:shine 1.1s var(--ease) forwards }
@keyframes shine{ 0%{ opacity:0; left:-70% } 22%{ opacity:.9 } 100%{ opacity:0; left:130% } }

.kv-id{ position:relative }
.kv-kicker{
  display:inline-flex; align-items:center; gap:9px;
  font-size:var(--fs-xs); letter-spacing:.22em; text-transform:uppercase;
  color:var(--water-deep); font-weight:700; margin-bottom:16px;
  opacity:0; animation:up .8s .2s var(--ease) forwards;
}
.kv-kicker::before{ content:''; width:26px; height:1px; background:var(--gold) }
.kv-id h1{
  font-family:var(--font-display,"Noto Serif SC","Songti SC",serif);
  font-size:clamp(34px,5.2vw,58px); line-height:1.14; letter-spacing:.015em;
  font-weight:700; color:var(--text);
}
.kv-id h1 .ch{ display:inline-block; opacity:0; transform:translateY(.42em) rotate(3deg); animation:charIn .74s var(--ease) forwards }
@keyframes charIn{ to{ opacity:1; transform:none } }
@keyframes up{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
.kv-jp{
  margin-top:13px; font-size:var(--fs-base); color:var(--muted); letter-spacing:.26em;
  padding-left:2px; opacity:0; animation:up .8s .46s var(--ease) forwards;
}
.kv-rule{ width:46px; height:2px; background:linear-gradient(90deg,var(--gold),rgba(201,169,110,0)); margin:22px 0 20px; opacity:0; animation:up .8s .52s var(--ease) forwards }

.kv-facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  gap:2px 26px; margin-bottom:20px;
  opacity:0; animation:up .8s .6s var(--ease) forwards;
}
.kv-fact{ padding:9px 0; border-top:1px solid var(--border) }
.kv-fact .k{ display:block; font-size:var(--fs-2xs); letter-spacing:.14em; text-transform:uppercase; color:var(--soft); font-weight:700 }
.kv-fact .v{ font-size:var(--fs-base); font-weight:700; color:var(--text); overflow-wrap:anywhere }
.kv-fact .v.score{ color:var(--gold) }

.kv-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:22px; opacity:0; animation:up .8s .68s var(--ease) forwards }
.kv-tags .tag{
  font-size:var(--fs-xs); padding:4px 11px; border-radius:999px;
  background:rgba(91,141,184,.07); border:1px solid var(--border);
  color:var(--water-deep); letter-spacing:.04em;
}
.kv-actions{ display:flex; flex-wrap:wrap; gap:11px; opacity:0; animation:up .8s .76s var(--ease) forwards }
.btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:11px 21px; border-radius:999px; border:1px solid var(--border-strong);
  background:var(--card); color:var(--text); font-size:var(--fs-base); font-weight:700;
  text-decoration:none; cursor:pointer;
  transition:transform .28s var(--ease), box-shadow .28s, border-color .28s, color .28s, background .28s;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--water); color:var(--water-deep) }
.btn-primary{ background:linear-gradient(118deg,var(--water),var(--water-deep)); border-color:transparent; color:#fff }
.btn-primary:hover{ color:#fff; box-shadow:0 12px 26px -10px rgba(58,107,148,.6) }
.kv-copy{ font-size:var(--fs-xs); color:var(--soft); line-height:1.7; margin-top:14px }

.kv-scroll{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:7px;
  font-size:var(--fs-2xs); letter-spacing:.26em; color:var(--soft); text-transform:uppercase;
}
.kv-scroll i{ display:block; width:1px; height:34px; background:linear-gradient(180deg,var(--soft),rgba(168,178,193,0)); animation:drop 2.1s ease-in-out infinite }
@keyframes drop{ 0%,100%{ opacity:.35; transform:scaleY(.7) } 50%{ opacity:1; transform:scaleY(1) } }

.apnav{
  position:sticky; top:var(--topbar-h,54px); z-index:var(--z-nav);
  background:rgba(250,251,252,.82); backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.apnav .wrap{ display:flex; gap:4px; overflow-x:auto; scrollbar-width:none }
.apnav .wrap::-webkit-scrollbar{ display:none }
.apnav a{
  position:relative; padding:14px 15px 13px; font-size:var(--fs-sm); font-weight:700; letter-spacing:.05em;
  color:var(--muted); text-decoration:none; white-space:nowrap; transition:color .25s;
}
.apnav a::after{
  content:''; position:absolute; left:15px; right:15px; bottom:-1px; height:2px;
  background:linear-gradient(90deg,var(--water),var(--gold));
  transform:scaleX(0); transform-origin:left; transition:transform .38s var(--ease);
}
.apnav a:hover{ color:var(--water-deep) }
.apnav a[aria-current]{ color:var(--text) }
.apnav a[aria-current]::after{ transform:scaleX(1) }

.sec{ padding:58px 0 }
.sec-head{ margin-bottom:28px }
.sec-label{
  display:flex; align-items:center; gap:11px;
  font-size:var(--fs-2xs); letter-spacing:.24em; text-transform:uppercase; font-weight:700; color:var(--water);
}
.sec-label .no{ color:var(--gold); font-size:var(--fs-2xs) }
.sec-label::after{ content:''; flex:1; height:1px; background:linear-gradient(90deg,var(--border),rgba(91,141,184,0)) }
.sec-head h2{
  font-family:var(--font-display,"Noto Serif SC","Songti SC",serif);
  font-size:clamp(23px,3vw,30px);
  margin-top:9px; letter-spacing:.02em; font-weight:700;
}
.sec-head .sub{ color:var(--muted); font-size:var(--fs-base); margin-top:7px }
.count-pill{
  display:inline-block; margin-left:10px; padding:1px 9px; border-radius:999px;
  background:rgba(201,169,110,.14); color:#8c7340; font-size:var(--fs-xs); font-weight:700;
  vertical-align:middle; letter-spacing:.04em;
}

.stage{
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  border:1px solid var(--border); border-radius:24px; overflow:hidden;
  background:var(--card); box-shadow:var(--shadow-lg);
  position:relative;
}
.stage:focus-visible{ outline:2px solid var(--water); outline-offset:3px }
.stage-plate{
  position:relative; min-height:520px; overflow:hidden;
  background:
    radial-gradient(112% 72% at 50% 8%, var(--tone-soft) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg,#fff 0%,#fdfefe 100%);
  transition:background .7s var(--ease);
}
.stage-plate::after{
  content:''; position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  width:56%; height:26px; border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(44,60,80,.20) 0%, rgba(44,60,80,0) 72%);
  transition:background .7s var(--ease);
}
.stage-plate .frame{
  position:absolute; inset:16px; border-radius:16px; pointer-events:none;
  border:1px solid rgba(201,169,110,.24); opacity:.9;
}
.stage-art{ position:absolute; inset:0 }
.stage-art img{
  position:absolute; left:50%; bottom:34px; transform:translateX(-50%) translateY(16px);
  max-height:92%; max-width:88%; width:auto; height:auto;
  object-fit:contain;
  mix-blend-mode:multiply;
  filter:drop-shadow(0 20px 30px rgba(44,60,80,.16));
  opacity:0; transition:opacity .62s var(--ease), transform .62s var(--ease);
}
.stage-art img.show{ opacity:1; transform:translateX(-50%) translateY(0) }
.stage-plate .ghost{
  position:absolute; left:26px; top:20px; font-family:var(--font-display,"Noto Serif SC","Songti SC",serif);
  font-size:var(--fs-display); line-height:1; font-weight:700;
  color:var(--tone); opacity:.14; letter-spacing:-.03em; pointer-events:none;
  transition:color .7s var(--ease);
}
.stage-plate .no-badge{
  position:absolute; right:26px; bottom:24px;
  font-size:var(--fs-xs); letter-spacing:.16em; font-weight:700; color:var(--soft);
}
.stage-plate .no-badge b{ color:var(--text); font-size:var(--fs-md) }

.stage-info{
  position:relative; padding:52px 46px; display:flex; flex-direction:column; justify-content:center;
  border-left:1px solid var(--border);
}
.stage-info::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--tone),rgba(0,0,0,0));
  opacity:.85; transition:background .7s var(--ease);
}
.role-chip{
  align-self:flex-start; font-size:var(--fs-2xs); letter-spacing:.16em; font-weight:700;
  padding:4px 12px; border-radius:999px; margin-bottom:18px;
  background:var(--tone-soft); color:var(--tone-deep);
  transition:background .7s var(--ease), color .7s var(--ease);
}
.cname{
  font-family:var(--font-display,"Noto Serif SC","Songti SC",serif);
  font-size:clamp(27px,3.6vw,40px); line-height:1.2;
  font-weight:700; letter-spacing:.02em;
}
.cname.swap{ animation:swapIn .5s var(--ease) }
@keyframes swapIn{ from{ opacity:0; transform:translateY(9px) } to{ opacity:1; transform:none } }
.cname-jp{ margin-top:9px; font-size:var(--fs-sm); color:var(--muted); letter-spacing:.24em }
.cname-jp.swap{ animation:swapIn .5s .05s var(--ease) both }
.cv-box{
  margin-top:26px; padding-top:20px; border-top:1px solid var(--border);
  display:flex; align-items:baseline; gap:12px;
}
.cv-box .lb{ font-size:var(--fs-2xs); letter-spacing:.2em; text-transform:uppercase; color:var(--soft); font-weight:700 }
.cv-box .nm{ font-size:var(--fs-lg); font-weight:700; letter-spacing:.04em; position:relative }
.cv-box .nm::after{
  content:''; position:absolute; left:0; right:0; bottom:-5px; height:2px;
  background:var(--tone); opacity:.5; transform-origin:left; transition:background .7s var(--ease);
}
.cv-box .nm.swap{ animation:swapIn .5s .1s var(--ease) both }
.stage-hint{
  margin-top:30px; display:flex; align-items:center; gap:9px;
  font-size:var(--fs-xs); color:var(--soft); letter-spacing:.06em;
}
.stage-hint kbd{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:var(--fs-2xs);
  padding:2px 7px; border-radius:6px; background:var(--bg-soft);
  border:1px solid var(--border); color:var(--muted);
}

.strip{
  display:flex; gap:12px; overflow-x:auto; padding:20px 2px 8px;
  scroll-snap-type:x proximity; scrollbar-width:thin;
}
.strip::-webkit-scrollbar{ height:6px }
.strip::-webkit-scrollbar-thumb{ background:var(--cloud); border-radius:999px }
.thumb{
  flex:0 0 auto; width:78px; aspect-ratio:1/1.34; padding:0; cursor:pointer;
  border-radius:14px; overflow:hidden; scroll-snap-align:center;
  background:#fff; border:1px solid var(--border);
  position:relative;
  transition:transform .34s var(--ease), border-color .34s, box-shadow .34s;
}

.thumb img{ width:100%; height:100%; object-fit:cover; object-position:center 14%; mix-blend-mode:multiply }
.thumb:hover{ transform:translateY(-4px); border-color:var(--border-strong); box-shadow:var(--shadow) }
.thumb[aria-selected="true"]{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,169,110,.22), var(--shadow);
  transform:translateY(-4px);
}
.thumb[aria-selected="true"]::after{
  content:''; position:absolute; left:50%; bottom:7px; transform:translateX(-50%);
  width:16px; height:2px; border-radius:2px; background:var(--gold);
}
.thumb .fall{
  position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  font-family:var(--font-display,"Noto Serif SC","Songti SC",serif); font-size:var(--fs-xl); color:var(--soft); background:var(--bg-soft);
}
.thumb.broken img{ display:none }
.thumb.broken .fall{ display:flex }

.story-card{
  border:1px solid var(--border); border-radius:20px; background:var(--card);
  padding:44px 46px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
}
.story-card::before{
  content:'\201C'; position:absolute; left:16px; top:-6px;
  font-family:var(--font-display,"Noto Serif SC","Songti SC",serif); font-size:var(--fs-mega); line-height:1; color:var(--water); opacity:.09;
}
.story-card p{ position:relative; font-size:var(--fs-lg); line-height:2.05; max-width:70ch; letter-spacing:.01em; white-space:pre-wrap; word-break:break-word }
.story-more{ margin-top:22px; border-top:1px dashed var(--border-strong); padding-top:16px }
.story-more summary{
  cursor:pointer; list-style:none; font-size:var(--fs-sm); font-weight:700; letter-spacing:.08em;
  color:var(--water-deep); display:flex; align-items:center; gap:8px;
}
.story-more summary::-webkit-details-marker{ display:none }
.story-more summary::before{
  content:''; width:7px; height:7px; border-right:1.6px solid var(--water); border-bottom:1.6px solid var(--water);
  transform:rotate(-45deg); transition:transform .3s var(--ease); margin-left:2px;
}
.story-more[open] summary::before{ transform:rotate(45deg) }
.story-more .orig{
  margin-top:14px; font-size:var(--fs-base); line-height:2; color:var(--muted);
  white-space:pre-wrap; max-width:70ch; word-break:break-word;
}

.staff-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(252px,1fr)); gap:0 34px }
.staff-row{
  display:flex; align-items:center; gap:14px; padding:13px 0;
  border-bottom:1px solid var(--border);
}
.staff-av{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%; overflow:hidden;
  background:var(--bg-soft); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
}
.staff-av img{ width:100%; height:100%; object-fit:cover }
.staff-av .ini{ font-family:var(--font-display,"Noto Serif SC","Songti SC",serif); font-size:var(--fs-md); color:var(--soft) }
.staff-tx{ min-width:0 }
.staff-tx .role{ font-size:var(--fs-2xs); letter-spacing:.1em; color:var(--soft); font-weight:700; text-transform:uppercase }
.staff-tx .nm{ font-size:var(--fs-base); font-weight:700; overflow-wrap:anywhere }

.foot{ margin-top:44px; padding:30px 0 40px; border-top:1px solid var(--border); display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between }
.foot .copy{ font-size:var(--fs-xs); color:var(--soft); line-height:1.8; max-width:60ch }
.foot .copy code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:var(--fs-xs); background:var(--bg-soft); padding:1px 5px; border-radius:5px }

/* 「同期番剧」内链区 —— 由服务端预渲染注入（见 proxy/anime-ssr.js）。
   对访客是相关推荐，对爬虫是详情页之间的内链网络（原先 78 个页面彼此零互链）。 */
.ssr-rel{
  flex:1 0 100%;
  display:flex;
  gap:10px;
  align-items:baseline;
  flex-wrap:wrap;
  margin-top:16px;
  padding-top:16px;
  border-top:1px dashed var(--border);
}
.ssr-rel-t{ flex:0 0 auto; font-size:var(--fs-xs); color:var(--soft); letter-spacing:.08em }
.ssr-rel-list{ display:flex; gap:6px 14px; flex-wrap:wrap }
.ssr-rel-a{
  font-size:var(--fs-xs);
  color:var(--muted);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.ssr-rel-a:hover{ color:var(--water-deep); border-bottom-color:var(--water-deep) }

/* 服务端预渲染的 Staff 列表：正常情况下会被客户端脚本覆盖，这里只是
   脚本万一没跑起来时的兜底观感，别让它裸着。 */
.ssr-staff{ list-style:none; margin:0; padding:0 }
.ssr-staff li{ display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); font-size:var(--fs-base) }
.ssr-staff .nm{ color:var(--text) }
.ssr-staff .role{ color:var(--soft) }

/* 服务端预渲染的角色名单（同 .ssr-staff 思路：脚本没跑起来时的兜底观感）。
   #strip 是横向 flex 容器，所以自己排成可换行的小字条；
   客户端 renderCast 一跑就把 #strip 的 innerHTML 整体换成缩略图。 */
.ssr-cast{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 16px; width:100% }
.ssr-cast li{ display:flex; gap:6px; align-items:baseline; font-size:var(--fs-xs) }
.ssr-cast .nm{ color:var(--text) }
.ssr-cast .role{ color:var(--soft) }
.ssr-cast .cv{ color:var(--muted) }

[data-rv]{ opacity:0; transform:translateY(24px); transition:opacity .82s var(--ease), transform .82s var(--ease) }
[data-rv].on{ opacity:1; transform:none }

@media (max-width:900px){
  .kv-grid{ grid-template-columns:1fr; gap:34px; justify-items:center; text-align:center }
  .kv-poster{ width:min(240px,58vw) }
  .kv-kicker,.kv-jp{ justify-content:center }
  .kv-rule{ margin-left:auto; margin-right:auto }
  .kv-facts{ text-align:left }
  .kv-actions{ justify-content:center }
  .stage{ grid-template-columns:1fr }
  .stage-plate{ min-height:400px }
  .stage-info{ border-left:0; border-top:1px solid var(--border); padding:34px 26px }
  .stage-info::before{ left:0; right:0; top:0; bottom:auto; height:3px; width:auto; background:linear-gradient(90deg,var(--tone),rgba(0,0,0,0)) }
  .story-card{ padding:32px 24px }
  .sec{ padding:44px 0 }
}
@media (max-width:640px){
  body.pd .wrap{ padding:0 18px }
}
@media (max-width:560px){
  .kv{ padding:44px 0 60px }
  .kv-facts{ grid-template-columns:repeat(2,1fr) }
  .thumb{ width:64px }
  .foot{ flex-direction:column; align-items:flex-start }
}

@media (hover: none){
  .btn:hover{ transform:none }
  .thumb:hover{ transform:none }
  .kv-poster:hover{ transform:perspective(1400px) rotateY(7deg) rotateX(1.5deg) }
}

@media (prefers-reduced-motion:reduce){
  body.pd .kv-bg{ animation:none }
  body.pd .kv-poster{ animation:none !important; opacity:1; transform:none }
  body.pd .kv-kicker,body.pd .kv-jp,body.pd .kv-rule,
  body.pd .kv-facts,body.pd .kv-tags,body.pd .kv-actions{ animation:none !important; opacity:1 }
  body.pd .kv-id h1 .ch{ animation:none !important; opacity:1; transform:none }
  body.pd .kv-scroll i{ animation:none }
  [data-rv]{ opacity:1; transform:none }
}

/* 首页顶部导航：图库入口 */
.topnav{ display:flex; align-items:center; gap:14px; }
.topnav-link{ color:var(--text); text-decoration:none; font-weight:600; font-size:14px; padding:6px 12px; border-radius:10px; border:1px solid var(--border); background:var(--card); transition:background .15s,border-color .15s; }
.topnav-link:hover{ background:var(--bg); border-color:#5b8db8; color:#3a6ea5; }