:root { color-scheme: dark; --bg:#100e0c; --card:#1c1814; --ink:#f6f1e8; --muted:#b7ab9c; --line:#3a322a; --accent:#e8a04a; }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.7 "Source Han Sans SC","Noto Sans SC",sans-serif; color:var(--ink); background:var(--bg); }
a { color:inherit; text-decoration:none; }
header, footer, main { width:min(1080px, calc(100% - 32px)); margin:0 auto; }
header { display:flex; justify-content:space-between; align-items:center; padding:18px 0; gap:12px; flex-wrap:wrap; }
.brand { font-weight:700; letter-spacing:.04em; }
nav { display:flex; gap:14px; flex-wrap:wrap; color:var(--muted); }
nav a:hover, .pager a:hover { color:var(--ink); }
.hero { display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:center; padding:18px 0 28px; }
.kicker { color:var(--accent); letter-spacing:.12em; font-size:.8rem; }
h1 { font-size:2.2rem; line-height:1.25; margin:8px 0; }
h2 { font-size:1.35rem; margin:28px 0 12px; }
h3 { margin:0 0 6px; font-size:1.05rem; }
.lead, .meta, .crumbs, footer { color:var(--muted); }
.hero img, .poster img, article img { width:100%; display:block; object-fit:cover; border-radius:16px; }
.hero img { height:200px; }
.poster img { height:132px; }
article img { height:168px; margin:12px 0; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card, .poster { background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.card { padding:16px; }
.poster div { padding:12px 14px 16px; }
a.btn, button.btn { display:inline-block; margin-top:12px; background:var(--accent); color:#1c1308; border:0; border-radius:999px; padding:8px 14px; font:inherit; font-weight:700; cursor:pointer; }
.pager { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:22px; }
.pager a { color:var(--accent); }
footer { font-size:.88rem; padding:32px 0 48px; }
@media (max-width:800px) { .hero, .grid { grid-template-columns:1fr; } h1 { font-size:1.7rem; } }

.eps { padding-left:1.2rem; }
.related { display:flex; gap:14px; flex-wrap:wrap; }
.related a { color:var(--accent); }

.dl { border:0; padding:0; background:transparent; }
.dl::backdrop { background:rgba(0,0,0,.72); }
.dl .sheet { width:min(380px, calc(100vw - 36px)); background:#1b1713; border:1px solid var(--line); border-radius:18px; padding:20px 18px 16px; box-shadow:0 18px 50px rgba(0,0,0,.35); }
.dl h2 { margin:4px 0 0; }
.dl .en { margin:0 0 4px; color:var(--muted); }
.stores { display:grid; gap:10px; margin:14px 0 8px; }
.stores p { margin:0; display:flex; align-items:center; gap:12px; background:#120f0c; border:1px solid var(--line); border-radius:14px; padding:10px 12px; }
.copy { flex:1; }
.copy span, .dl .en { display:block; color:var(--muted); font-size:.9rem; }
.stores strong { color:var(--ink); font-size:1rem; }
.ico, .down { width:36px; height:36px; display:grid; place-items:center; flex:0 0 36px; border-radius:10px; }
.ico { background:#2a2118; color:var(--accent); }
.ico svg { width:20px; height:20px; }
.down { color:var(--accent); } .down svg { width:20px; height:20px; }
.dl .btn { width:100%; text-align:center; }


/* 极光算法与防 CLS 累积布局偏移优化 */
.work-cover, .poster-wrap, .featured-cover-wrap, a.poster, .card-cover, .hero-picture {
    aspect-ratio: 3 / 4;
    background-color: #f0ede8;
    overflow: hidden;
    display: block;
}
.work-cover img, .poster-wrap img, .featured-cover-wrap img, a.poster img, .card-cover img, .hero-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* ==========================================================================
   ACfan 二次元弹幕 / 评论漂浮核心动效
   ========================================================================== */
.hero, .hero-card, .hero-grid {
    position: relative !important;
}
.hero-danmaku-stage {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 4;
}
.danmaku-item {
    position: absolute;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 20px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    animation: danmaku-move linear infinite;
    opacity: 0.95;
    will-change: transform;
}
.dm-style-1 {
    color: #fd4c5d;
    background: rgba(255, 245, 246, 0.94);
    border: 1px solid rgba(253, 76, 93, 0.35);
}
.dm-style-2 {
    color: #ea580c;
    background: rgba(255, 247, 242, 0.94);
    border: 1px solid rgba(234, 88, 12, 0.35);
}
.dm-style-3 {
    color: #b45309;
    background: rgba(254, 252, 232, 0.94);
    border: 1px solid rgba(217, 119, 6, 0.35);
}
.dm-style-4 {
    color: #7c3aed;
    background: rgba(245, 243, 255, 0.94);
    border: 1px solid rgba(124, 58, 237, 0.35);
}
@keyframes danmaku-move {
    0% { transform: translateX(105vw); }
    100% { transform: translateX(-120%); }
}
@media (max-width: 768px) {
    .danmaku-item { font-size: 11px; padding: 2px 8px; }
}