/* 👑 the list page and the album page */
.vpg{background:#0a0f24;color:#E8EEF8}
.vpg-main{padding-top:84px;padding-bottom:40px;min-height:70vh}
.vpg-load,.vpg-empty{padding:60px 10px;text-align:center;color:rgba(255,255,255,.6);display:flex;flex-direction:column;align-items:center;gap:10px}
.vpg-empty span{font-size:44px}.vpg-empty b{color:#fff;font-size:17px}
.vpg-av{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:10px;background:center/cover;font-style:normal;font-weight:800;color:#fff;flex:none}
.vl-by{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:#fff;font-size:14px}
.vl-crown{font-size:14px}
.vl-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
/* list */
.vl-hero{position:relative;overflow:hidden;border-radius:26px;padding:34px 26px 26px;isolation:isolate;background:#111834;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.vl-bg{position:absolute;inset:-20px;z-index:-1;background:center/cover;filter:blur(18px) saturate(1.2);opacity:.45}
.vl-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,15,36,.2),rgba(10,15,36,.92))}
.vl-k{font-size:12px;font-weight:800;color:#9fc8ff}
.vl-hero h1{margin:6px 0 8px;font:400 clamp(28px,5vw,44px)/1.25 Lalezar,var(--font)}
.vl-hero p{margin:0 0 12px;max-width:640px;line-height:1.9;color:rgba(255,255,255,.8)}
.vl-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.65)}
.vl-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.vl-list li{animation:t5In .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d)}
.vl-list a{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:18px;text-decoration:none;color:#fff;background:#111834;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);transition:transform .2s,background .2s}
.vl-list a:hover{transform:translateX(-4px);background:#152044}
.vl-n{width:34px;text-align:center;font:400 26px Lalezar,var(--font);color:#FFD34D;flex:none}
.vl-c{width:62px;aspect-ratio:2/3;border-radius:10px;background:center/cover var(--c);flex:none;box-shadow:0 10px 20px -12px rgba(0,0,0,.9)}
.vl-t{display:flex;flex-direction:column;gap:2px;min-width:0}.vl-t b{font-size:15px}.vl-t small{font-size:12px;color:rgba(255,255,255,.55)}
.vl-t em{font-style:normal;font-size:12.5px;color:#cfe2ff;margin-top:4px}
/* album */
.va-hero{position:relative;overflow:hidden;border-radius:26px;padding:28px 24px;isolation:isolate;background:linear-gradient(125deg,#1b1304,#2f2006 30%,#221034 70%,#0c0a1f);box-shadow:inset 0 0 0 1px rgba(255,214,110,.3)}
.va-hero h1{margin:10px 0 12px;font:400 clamp(28px,5vw,42px)/1.25 Lalezar,var(--font);background:linear-gradient(90deg,#ffe7a8,#fff,#e2c8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.va-pct{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.va-bar{flex:1;min-width:160px;max-width:420px;height:10px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.va-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#FFB300,#FFE27A)}
.va-pct b{color:#FFE27A}.va-pct small{color:rgba(255,255,255,.6)}
.va-cb{margin-top:20px}.va-cb h2,.va-f{margin:0 0 10px}.va-cb h2{font-size:17px}
.va-cbr{display:flex;gap:12px;flex-wrap:wrap}.va-cbc{position:relative;width:130px;aspect-ratio:5/7;container-type:inline-size}
.va-f{display:flex;gap:6px;flex-wrap:wrap;margin-top:22px}
.va-f button{border:0;cursor:pointer;padding:7px 12px;border-radius:99px;font:700 12.5px var(--font);color:#cfd6ee;background:rgba(255,255,255,.06)}.va-f button.on{color:#2a1a00;background:#FFD34D}
.va-f small{opacity:.7}
.va-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:12px;margin-top:12px}
.va-c{position:relative;margin:0;border-radius:14px;overflow:hidden;aspect-ratio:5/7;background:#141c38;box-shadow:inset 0 0 0 2px var(--rc,#8A97A8),0 14px 26px -16px rgba(0,0,0,.9);animation:t5In .45s both;animation-delay:var(--d)}
.va-c>span{position:absolute;inset:0;background:center 18%/cover}
.va-c figcaption{position:absolute;inset:auto 0 0;padding:22px 8px 8px;background:linear-gradient(180deg,transparent,rgba(5,6,18,.92))}
.va-c b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.va-c small{display:block;font-size:10px;opacity:.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.va-c i{position:absolute;top:6px;right:6px;font-style:normal;font-size:10px;font-weight:800;padding:2px 7px;border-radius:99px;background:rgba(5,6,18,.65);color:var(--rc,#fff)}
.va-c em{position:absolute;top:6px;left:6px;font-style:normal;font-size:10.5px;font-weight:900;padding:2px 6px;border-radius:99px;background:rgba(5,6,18,.65)}
.va-c.r-common{--rc:#8A97A8}.va-c.r-rare{--rc:#4FB6FF}.va-c.r-epic{--rc:#B46BFF}.va-c.r-legendary{--rc:#FFD34D}.va-c.r-waifu{--rc:#FF6FB5}.va-c.r-oshi{--rc:#7EE0FF}.va-c.r-husbando{--rc:#9CA8FF}
.va-c.r-legendary,.va-c.r-waifu,.va-c.r-oshi,.va-c.r-husbando{box-shadow:inset 0 0 0 2px var(--rc),0 0 22px -4px var(--rc),0 14px 26px -16px rgba(0,0,0,.9)}
@media (max-width:560px){.vpg-main{padding-top:74px}.vl-hero,.va-hero{padding:24px 16px 18px;border-radius:22px}.va-g{grid-template-columns:repeat(3,1fr);gap:8px}.vl-c{width:52px}.va-cbc{width:104px}}
html.lite .vl-list li,html.lite .va-c{animation:none}
@keyframes t5In{from{opacity:0;transform:translateY(14px)}}