/* ✨ anime page polish (layer on top of anime.css; remove the <link> to go back) */

/* — per-anime ambience: a faint glow of the anime's own colour behind the content — */
main.wrap{position:relative;isolation:isolate}
main.wrap::before{content:"";position:absolute;inset:0 calc(50% - 50vw);z-index:-1;pointer-events:none;
  background:radial-gradient(700px 480px at 92% 6%,color-mix(in srgb,var(--ac,#3DB4F2) 9%,transparent),transparent 70%),
    radial-gradient(640px 520px at 6% 38%,color-mix(in srgb,var(--ac,#3DB4F2) 6%,transparent),transparent 70%),
    radial-gradient(700px 520px at 90% 74%,color-mix(in srgb,var(--blue) 5%,transparent),transparent 70%)}

/* — section headings: numbered chip + a light-line that runs to the edge — */
main.wrap{counter-reset:sec}
.bh{counter-increment:sec}
.bh h2{display:flex;align-items:center;gap:12px;letter-spacing:-.2px}
.bh h2::before{content:attr(data-n);flex:none;display:grid;place-items:center;min-width:30px;height:30px;padding:0 6px;border-radius:10px;font:800 13px/1 var(--font);color:var(--ac,var(--blue));
  background:color-mix(in srgb,var(--ac,var(--blue)) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ac,var(--blue)) 32%,transparent)}
.bh h2::after{content:"";flex:1;min-width:24px;height:1px;margin-inline-start:6px;background:linear-gradient(to left,color-mix(in srgb,var(--ac,var(--blue)) 45%,transparent),transparent)}
.bh p{margin-top:6px;padding-inline-start:42px}
.bh.row{align-items:center}.bh.row>div{flex:1;min-width:240px}

/* — cards: hairline edge + soft top light instead of a flat slab — */
main .pc{border:1px solid color-mix(in srgb,var(--line) 55%,transparent);background-image:linear-gradient(180deg,color-mix(in srgb,#fff 2.5%,transparent),transparent 120px)}
[data-theme="light"] main .pc{background-image:none}

/* — sticky section nav: glass, accent ink, faded edges when it scrolls — */
.snav-in{border:1px solid color-mix(in srgb,var(--line) 60%,transparent);background:color-mix(in srgb,var(--fg) 78%,transparent);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-radius:14px;padding:5px}
.snav a{font-size:13.5px;color:var(--muted)}
.snav a:hover{color:var(--strong)}
.snav-ink{background:linear-gradient(135deg,var(--blue),color-mix(in srgb,var(--ac,var(--blue)) 55%,var(--blue)));box-shadow:0 6px 18px -4px color-mix(in srgb,var(--blue) 60%,transparent),inset 0 1px 0 rgba(255,255,255,.25)}

/* — sections drift in as they arrive (off in lite mode and for reduced motion) — */
html.anx-rv:not(.lite) main .blk:not(.anx-in)>*{opacity:0;transform:translateY(18px)}
html.anx-rv:not(.lite) main .blk>*{transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
html.anx-rv:not(.lite) main .blk.anx-in>*:nth-child(2){transition-delay:.08s}
html.anx-rv:not(.lite) main .blk.anx-in>*:nth-child(n+3){transition-delay:.16s}
@media (prefers-reduced-motion:reduce){html.anx-rv main .blk>*{opacity:1!important;transform:none!important;transition:none!important}}

/* — numbers: KPI tiles get a lit top edge and steady digits — */
.kpi{position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;inset:0 22% auto;height:2px;border-radius:0 0 2px 2px;background:linear-gradient(90deg,transparent,var(--ac,var(--blue)),transparent);opacity:.7}
.kpi b{font-variant-numeric:tabular-nums}
.kpi small{color:var(--muted)}

/* — layout: no half-empty rows — */
/* stats: when the side boxes have nothing to show, the distribution takes the whole row */
.st2:not(:has(>div>.pc:not([hidden]))){grid-template-columns:1fr}
/* community: the small polls sit side by side in one even row; best episode takes the full width */
.comm{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));align-items:stretch}
.comm>#bestBox{grid-column:1/-1}

/* — episode tiles: 12 to a row so 12- and 24-episode shows end on a full row — */
@media (min-width:1000px){.eps{grid-template-columns:repeat(12,minmax(0,1fr))}}
@media (min-width:641px) and (max-width:999px){.eps{grid-template-columns:repeat(6,minmax(0,1fr))}}
.ep{border:1px solid color-mix(in srgb,var(--line) 50%,transparent)}
.ep:hover{border-color:color-mix(in srgb,var(--blue) 45%,transparent)}

/* — recommendations: posters lift with a soft light — */
.rec .art{position:relative;overflow:hidden}
.rec .art::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.18) 50%,transparent 65%);transform:translateX(-120%);transition:transform .8s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.rec a:hover .art::before{transform:translateX(120%)}
html.lite .rec .art::before{display:none}

@media (max-width:640px){
  .bh h2{gap:10px}.bh h2::before{min-width:26px;height:26px;border-radius:9px;font-size:12px}
  .bh p{padding-inline-start:0}
  .eps{grid-template-columns:repeat(4,minmax(0,1fr))}
  .epick{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}.epick button{font-size:12.5px;border-radius:9px}
  .snav-in{-webkit-mask:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent);mask:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent)}
  /* recommendations become a swipeable shelf instead of an uneven grid */
  .recs{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:42%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -20px;padding:0 20px 6px;scroll-padding:0 20px}
  .recs::-webkit-scrollbar{display:none}
  .recs>*{scroll-snap-align:start}
}
/* ⚡ sections below the screen are skipped by layout and paint until you scroll near them
   (the browser remembers their real size once seen, so the scrollbar settles quickly) */
main section.blk:not(:first-of-type),.wrap > section.blk:not(:first-of-type){content-visibility:auto;contain-intrinsic-size:auto 900px}
/* 👑 VIP: comment shine, VIP reactions, private note */
.cx.is-plus.shine{animation:vipShine 1.8s ease-out 1}
@keyframes vipShine{0%{box-shadow:0 0 0 0 rgba(255,211,77,0)}25%{box-shadow:0 0 0 2px rgba(255,211,77,.65),0 0 28px rgba(255,200,80,.35)}100%{box-shadow:0 0 0 0 rgba(255,211,77,0)}}
.cx.is-plus.shine .cx-b{background-image:linear-gradient(110deg,transparent 30%,rgba(255,230,160,.14) 45%,transparent 60%);background-size:250% 100%;background-repeat:no-repeat;animation:vipSweep 1.6s ease-out 1}
@keyframes vipSweep{from{background-position:120% 0}to{background-position:-120% 0}}
html.lite .cx.is-plus.shine,html.lite .cx.is-plus.shine .cx-b{animation:none}
.vr{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap;margin-inline-end:6px}
.vr-ch{display:inline-flex;align-items:center;gap:3px;height:26px;padding:0 8px;border-radius:99px;border:0;cursor:pointer;font:700 12px var(--font,inherit);color:var(--strong);background:linear-gradient(90deg,rgba(255,211,77,.16),rgba(255,160,90,.1));box-shadow:inset 0 0 0 1px rgba(255,211,77,.3)}
.vr-ch:disabled{cursor:default;opacity:1}.vr-ch b{font-size:11px}
.vr-ch.on{box-shadow:inset 0 0 0 2px #FFD34D}
.vr-ch:not(:disabled):hover{transform:translateY(-1px)}
.vr-w{position:relative;display:inline-flex}
.vr-add{display:inline-flex;align-items:center;height:26px;padding:0 7px;border-radius:99px;border:0;cursor:pointer;font-size:12px;background:rgba(255,211,77,.12);color:#FFD34D}
.vr-add i{font-style:normal;font-weight:900;font-size:11px;margin-inline-start:1px}
.vr-pk{position:absolute;bottom:calc(100% + 6px);right:0;z-index:20;display:flex;gap:2px;padding:5px;border-radius:99px;background:#1b2238;box-shadow:0 10px 26px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,211,77,.35);animation:vrPop .22s cubic-bezier(.2,1.4,.4,1)}
@keyframes vrPop{from{opacity:0;transform:translateY(6px) scale(.9)}}
.vr-pk button{width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;font-size:19px;background:none;transition:transform .15s}
.vr-pk button:hover{transform:scale(1.3) translateY(-3px)}.vr-pk button.on{background:rgba(255,211,77,.2)}
.vr-pk button:nth-child(1):hover{animation:vrWig .5s}.vr-pk button:nth-child(2):hover{animation:vrBeat .6s}
@keyframes vrWig{25%{rotate:-12deg}75%{rotate:12deg}}@keyframes vrBeat{30%{scale:1.45}60%{scale:1.2}}
.vn textarea{width:100%;box-sizing:border-box;margin-top:6px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--fg2);color:var(--strong);font:inherit;resize:vertical;line-height:1.8}
.vn h3 small{font-size:11px;font-weight:600;color:#C99A1E;margin-inline-start:6px}.vn-st{display:block;margin-top:4px;font-size:11px;color:var(--muted);min-height:14px}

/* ---- community cards: packed in two columns with no empty gaps ---- */
.comm{display:block;columns:2 330px;column-gap:16px}
.comm>.pc{break-inside:avoid;margin:0 0 16px;display:block;width:auto}
.comm>#bestBox{column-span:all}
.cc{padding:16px 18px}
.cc > p{margin:0 0 10px}
.rxs{gap:6px}.rx{padding:8px 4px}
/* the private note: one slim line that opens when you write */
.vn{padding:12px 16px!important}
.vn h3{margin:0!important;font-size:14px!important}
.vn textarea{min-height:40px;height:40px;margin-top:8px;padding:8px 12px;resize:none;transition:height .2s,min-height .2s;font-size:13px}
.vn textarea:focus,.vn textarea.has{height:96px;min-height:96px}
.vn-st{min-height:0!important;margin-top:2px!important}
#tagv>*{padding-block:6px}

/* ---- recommendations: one tidy shelf, the vote sits on the poster ---- */
.recs{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:calc((100% - 5 * 14px) / 6);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;padding:4px 2px 10px;overscroll-behavior-x:contain}
.recs>*{scroll-snap-align:start}
.rec{position:relative;min-width:0}
.rec p{margin:8px 0 0;font-size:12.5px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:3em}
.rec .rv{position:absolute;top:8px;left:8px;z-index:3;gap:2px;padding:3px;border-radius:99px;background:rgba(8,12,26,.72);backdrop-filter:blur(6px);color:#fff;font-size:11px;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.rec .rv button{width:22px;height:22px;border-radius:50%;background:transparent;color:rgba(255,255,255,.75);font-size:9px}
.rec .rv button.on{background:var(--blue);color:#fff}
.rec .rv > :not(button){min-width:14px;text-align:center}
html.lite .rec .rv{backdrop-filter:none}
@media (max-width:1000px){.recs{grid-auto-columns:calc((100% - 3 * 14px) / 4)}}
@media (max-width:760px){.comm{columns:1}.recs{grid-auto-columns:38%;gap:10px}}
.epick{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr))!important;gap:6px!important}
.epick button{height:36px!important;padding:0!important;font-size:12.5px!important;border-radius:9px!important}
@media (max-width:760px){.epick{grid-template-columns:repeat(auto-fill,minmax(34px,1fr))!important;gap:4px!important}.epick button{height:32px!important}}