/* 夜樱館 — 日式和风深色调
   墨黑暖底 + 朱红(茜色) + 金箔 + 樱粉,浮世绘波浪纹理 + 飘落樱瓣    */
:root{
  --bg:#100d0a; --surface:#1a1410; --surface-2:#241b14; --line:#3a2d20;
  --fg:#ede0c8; --fg-dim:#a08d74;
  --accent:#c93a30; --accent-hi:#e0554a; --accent-soft:#3a1613;
  --gold:#c9a05c; --gold-soft:#3a2f1a;
  --sakura:#e8a3b0; --sakura-soft:#3a1d24;
  --radius:8px; --maxw:1280px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--fg);
  font:16px/1.6 "Hiragino Mincho ProN","Yu Mincho","Noto Serif CJK SC","Songti SC","PingFang SC","Microsoft YaHei",serif;
  min-height:100vh;display:flex;flex-direction:column;position:relative;
}
/* 浮世绘波浪底纹(神奈川冲浪里风) */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(ellipse 900px 400px at 85% -5%, rgba(201,58,48,.08), transparent 60%),
    radial-gradient(ellipse 700px 500px at -10% 110%, rgba(201,160,92,.05), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='120' viewBox='0 0 180 120'%3E%3Cg fill='none' stroke='%23c9a05c' stroke-opacity='0.05' stroke-width='1.2'%3E%3Cpath d='M0 30 Q45 10 90 30 T180 30'/%3E%3Cpath d='M0 50 Q45 30 90 50 T180 50'/%3E%3Cpath d='M0 70 Q45 50 90 70 T180 70'/%3E%3Cpath d='M0 90 Q45 70 90 90 T180 90'/%3E%3Cpath d='M0 110 Q45 90 90 110 T180 110'/%3E%3C/g%3E%3C/svg%3E");
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit}

/* ══ 飘落樱瓣 ══ */
.petals{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden}
.petal{position:absolute;top:-24px;width:9px;height:9px;border-radius:70% 0 70% 0;
  background:radial-gradient(circle at 30% 30%, #f4c6cf, #e8a3b0 70%);
  opacity:.65;animation:fall linear infinite}
@keyframes fall{
  0%{transform:translate3d(0,-24px,0) rotate(0deg)}
  100%{transform:translate3d(-28vw,108vh,0) rotate(360deg)}
}

/* ══ 密码锁 ══ */
.lock{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  background:var(--bg);padding:20px}
.lock[aria-hidden="true"]{display:none}
.lock-bg{position:absolute;inset:0;opacity:.14;pointer-events:none;
  background:
    radial-gradient(circle 60px at 82% 14%, rgba(201,58,48,.9), transparent 70%),
    radial-gradient(circle 46px at 14% 88%, rgba(201,58,48,.85), transparent 70%),
    radial-gradient(circle 200px at 50% 42%, rgba(201,160,92,.14), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='160' viewBox='0 0 240 160'%3E%3Cg fill='none' stroke='%23c9a05c' stroke-opacity='0.16' stroke-width='1'%3E%3Cpath d='M0 40 Q60 10 120 40 T240 40'/%3E%3Cpath d='M0 66 Q60 36 120 66 T240 66'/%3E%3Cpath d='M0 92 Q60 62 120 92 T240 92'/%3E%3Cpath d='M0 118 Q60 88 120 118 T240 118'/%3E%3Cpath d='M0 144 Q60 114 120 144 T240 144'/%3E%3C/g%3E%3C/svg%3E")}
.lock-card{position:relative;text-align:center;width:min(360px,92vw);
  background:rgba(26,20,16,.92);border:1px solid var(--line);border-radius:14px;
  padding:38px 30px 30px;box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(201,160,92,.08) inset}
.lock-seal{width:64px;height:64px;margin:0 auto 16px;display:grid;place-items:center;
  background:var(--accent);color:#f6ead6;font-size:32px;font-weight:700;
  border-radius:10px;box-shadow:0 6px 18px rgba(201,58,48,.45);transform:rotate(-3deg)}
.lock-card h1{font-size:26px;letter-spacing:.14em;color:var(--fg)}
.lock-sub{margin:4px 0 22px;color:var(--fg-dim);font-size:13px;letter-spacing:.22em}
.lock-form{display:flex;gap:8px}
.lock-form input{flex:1;min-width:0;background:#0f0c09;border:1px solid var(--line);
  border-radius:8px;padding:11px 14px;color:var(--fg);font-size:15px;outline:none}
.lock-form input:focus{border-color:var(--accent)}
.lock-form button{background:var(--accent);color:#f6ead6;border:0;border-radius:8px;
  padding:0 22px;font-size:15px;font-weight:700;cursor:pointer;letter-spacing:.2em}
.lock-form button:hover{background:var(--accent-hi)}
.lock-err{color:var(--sakura);font-size:13px;margin-top:10px;min-height:18px}
.lock-hint{margin-top:14px;color:#6e5d47;font-size:12px;letter-spacing:.18em}

/* ══ 顶栏 ══ */
.hd{position:sticky;top:0;z-index:20;background:rgba(16,13,10,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hd-in{max-width:var(--maxw);margin:0 auto;padding:clamp(10px,2vw,14px) clamp(12px,3vw,24px);
  display:flex;align-items:center;gap:clamp(12px,3vw,28px)}
.logo{font-size:clamp(20px,2.5vw,24px);font-weight:800;letter-spacing:.1em;flex-shrink:0}
.logo-m{color:var(--accent)}
.logo-k{color:var(--gold)}
.search{flex:1;display:flex;gap:8px;max-width:520px;margin-left:auto}
.search input{flex:1;min-width:0;background:var(--surface);border:1px solid var(--line);
  border-radius:8px;padding:9px 14px;color:var(--fg);font-size:15px;outline:none}
.search input:focus{border-color:var(--accent)}
.search button{background:var(--accent);color:#f6ead6;border:0;border-radius:8px;
  padding:9px 16px;font-size:15px;font-weight:700;cursor:pointer;white-space:nowrap;letter-spacing:.1em}
.search button:hover{background:var(--accent-hi)}

/* ══ 专题入口 ══ */
.topics{max-width:var(--maxw);margin:0 auto;padding:12px clamp(12px,3vw,24px) 4px;
  display:flex;gap:12px;flex-wrap:wrap}
.tp{display:inline-flex;align-items:center;gap:9px;padding:8px 20px 8px 12px;
  border-radius:10px;border:1px solid var(--line);background:var(--surface);
  font-weight:700;font-size:14px;letter-spacing:.12em;transition:transform .15s,box-shadow .15s}
.tp:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.4)}
.tp i{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;
  font-style:normal;font-size:15px;color:#f6ead6}
.tp-red{border-color:rgba(201,58,48,.5)} .tp-red i{background:var(--accent)}
.tp-gold{border-color:rgba(201,160,92,.5)} .tp-gold i{background:#8a6a33}
.tp-sakura{border-color:rgba(232,163,176,.5)} .tp-sakura i{background:#a85a6a}

/* ══ 分类导航 ══ */
.cats{max-width:var(--maxw);margin:0 auto;padding:8px clamp(12px,3vw,24px) 12px;
  display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.cats a{flex-shrink:0;padding:6px 14px;border-radius:99px;font-size:13.5px;
  color:var(--fg-dim);border:1px solid transparent;white-space:nowrap;letter-spacing:.04em}
.cats a:hover{color:var(--fg);background:var(--surface)}
.cats a.on{color:var(--accent-hi);background:var(--accent-soft);border-color:#5c211b}

/* ══ 主体 ══ */
main{flex:1;max-width:var(--maxw);width:100%;margin:0 auto;position:relative;z-index:1;
  padding:clamp(18px,3vw,30px) clamp(12px,3vw,24px) 60px}
.ttl{font-size:clamp(17px,2.2vw,21px);font-weight:700;margin:0 0 16px;
  display:flex;align-items:baseline;gap:10px}
.ttl small{color:var(--fg-dim);font-size:13px;font-weight:400}
.ttl::before{content:"❖";color:var(--accent);font-size:14px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(140px,20vw,190px),1fr));
  gap:clamp(12px,2vw,20px)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:border-color .18s,transform .18s,box-shadow .18s}
.card:hover{border-color:rgba(201,58,48,.6);transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(0,0,0,.45)}
.thumb{position:relative;aspect-ratio:2/3;background:var(--surface-2);overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;transition:opacity .3s;opacity:0}
.thumb img.ld{opacity:1}
.thumb .ph{position:absolute;inset:0;display:grid;place-items:center;color:#4a3c2a;font-size:26px}
.badge{position:absolute;right:6px;bottom:6px;background:rgba(10,8,6,.85);color:var(--gold);
  font-size:11px;padding:2px 7px;border-radius:4px;font-weight:700}
.meta{padding:9px 10px 11px}
.name{font-size:14px;font-weight:600;line-height:1.4;overflow:hidden;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-all}
.sub{margin-top:4px;font-size:12px;color:var(--fg-dim);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* ══ 骨架屏 ══ */
.skeleton-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(140px,20vw,190px),1fr));
  gap:clamp(12px,2vw,20px)}
.sk{aspect-ratio:2/3;border-radius:var(--radius);
  background:linear-gradient(100deg,var(--surface) 30%,var(--surface-2) 50%,var(--surface) 70%);
  background-size:220% 100%;animation:sh 1.3s infinite}
@keyframes sh{to{background-position:-220% 0}}

/* ══ 分页 ══ */
.pager{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:32px;flex-wrap:wrap}
.pager button{background:var(--surface);border:1px solid var(--line);color:var(--fg);
  border-radius:var(--radius);padding:8px 18px;font-size:14px;cursor:pointer}
.pager button:hover:not(:disabled){border-color:var(--accent);color:var(--accent-hi)}
.pager button:disabled{opacity:.35;cursor:not-allowed}
.pager .pg{color:var(--fg-dim);font-size:14px;font-variant-numeric:tabular-nums}

/* ══ 播放页 ══ */
.back{display:inline-flex;align-items:center;gap:6px;color:var(--fg-dim);font-size:14px;margin-bottom:14px}
.back:hover{color:var(--accent-hi)}
.player-wrap{background:#000;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;aspect-ratio:16/9;position:relative}
.player-wrap video{width:100%;height:100%;display:block;background:#000}
.pfail{position:absolute;inset:0;display:none;flex-direction:column;gap:12px;
  align-items:center;justify-content:center;text-align:center;padding:24px;background:#0d0b09}
.pfail.on{display:flex}
.pfail p{color:var(--fg-dim);font-size:14px;max-width:420px;line-height:1.7}
.pfail b{color:var(--fg);display:block;margin-bottom:2px;font-size:16px}
.pfail a{color:var(--gold);border:1px solid var(--gold);border-radius:var(--radius);
  padding:7px 16px;font-size:14px}

.detail{display:grid;grid-template-columns:200px 1fr;gap:22px;margin-top:22px}
.detail .cover{border-radius:var(--radius);border:1px solid var(--line);overflow:hidden;
  aspect-ratio:2/3;background:var(--surface-2)}
.detail .cover img{width:100%;height:100%;object-fit:cover}
.detail h1{font-size:clamp(18px,2.6vw,25px);line-height:1.35;margin-bottom:10px;word-break:break-word}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.tags span{background:var(--surface);border:1px solid var(--line);border-radius:99px;
  padding:3px 11px;font-size:12px;color:var(--fg-dim)}
.tags span:first-child{color:var(--accent-hi);border-color:#5c211b;background:var(--accent-soft)}
.desc{color:var(--fg-dim);font-size:14px;line-height:1.8;max-height:9.6em;overflow:auto}
.eps{margin-top:26px}
.eps h2{font-size:16px;margin-bottom:12px;color:var(--gold)}
.ep-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.ep-list button{background:var(--surface);border:1px solid var(--line);color:var(--fg-dim);
  border-radius:8px;padding:9px 6px;font-size:13px;cursor:pointer;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ep-list button:hover{border-color:var(--accent);color:var(--fg)}
.ep-list button.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-hi);font-weight:700}

/* ══ 状态 ══ */
.state{text-align:center;padding:70px 20px;color:var(--fg-dim)}
.state b{display:block;color:var(--fg);font-size:17px;margin-bottom:8px}
.state button{margin-top:16px;background:var(--accent);color:#f6ead6;border:0;
  border-radius:var(--radius);padding:9px 22px;font-weight:700;cursor:pointer;font-size:14px}

.ft{border-top:1px solid var(--line);padding:22px 16px;text-align:center;
  color:#6e5d47;font-size:12.5px;position:relative;z-index:1}

/* ══ 移动端 ══ */
@media (max-width:720px){
  .hd-in{flex-wrap:wrap;gap:10px}
  .search{max-width:none;width:100%;margin-left:0;order:3}
  .topics{gap:8px;padding-top:8px}
  .tp{padding:7px 14px 7px 10px;font-size:13px}
  .detail{grid-template-columns:1fr;gap:16px}
  .detail .cover{width:132px;aspect-ratio:2/3}
  .ep-list{grid-template-columns:repeat(auto-fill,minmax(78px,1fr))}
  .player-wrap{border-radius:8px;margin:0 -4px}
}