/* 🐉 /donghua — crimson, gold and ink */
.dh-body{background:var(--bg)}
.dh-body .nav:not(.solid) .logo,.dh-body .nav:not(.solid) .links a{color:#fff}
.dh-hero{position:relative;overflow:hidden;padding:96px 0 34px;color:#fff;isolation:isolate;
  background:radial-gradient(ellipse 50% 60% at 85% 0%,rgba(242,196,107,.3),transparent 60%),radial-gradient(ellipse 70% 60% at 10% 100%,rgba(229,72,77,.35),transparent 65%),linear-gradient(170deg,#4a0b12 0%,#1e0710 50%,#0b0710 100%)}
.dh-hero::after{content:"";position:absolute;inset:auto 0 0 0;height:90px;z-index:-1;background:linear-gradient(transparent,var(--bg))}
.dh-clouds{position:absolute;inset:0;z-index:-1;opacity:.07;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='90' viewBox='0 0 160 90'%3E%3Cg fill='none' stroke='%23F2C46B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M10 60c0-12 16-16 22-8 2-14 24-14 26 0 8-6 20 0 16 10H18c-5 0-8-1-8-2Z'/%3E%3Cpath d='M30 52c4-6 12-6 14 0M52 50c3-5 10-5 12 1'/%3E%3Cpath d='M100 28c0-10 13-13 18-6 2-11 20-11 21 0 7-5 16 0 13 8h-44c-5 0-8 0-8-2Z'/%3E%3C/g%3E%3C/svg%3E") 0 0/240px auto;animation:dhDrift 60s linear infinite}
@keyframes dhDrift{to{background-position:-480px 0}}
.dh-sun{position:absolute;z-index:-1;width:340px;height:340px;top:-90px;left:-80px;border-radius:50%;background:radial-gradient(circle,rgba(242,196,107,.45),rgba(229,72,77,.15) 55%,transparent 70%);filter:blur(4px)}
.dh-hero-in{position:relative;text-align:center}
.dh-seal{position:absolute;top:0;right:16px;writing-mode:vertical-rl;font:900 20px/1.1 "Noto Serif SC",serif;letter-spacing:6px;padding:10px 6px;border-radius:6px;color:#FFE9C2;background:linear-gradient(135deg,#C7313A,#8E1820);box-shadow:inset 0 0 0 1.5px rgba(255,220,160,.55),0 10px 24px -8px rgba(199,49,58,.9);transform:rotate(4deg)}
.dh-hero h1{margin:6px 0 0;font:400 clamp(64px,16vw,120px)/1.05 var(--display);background:linear-gradient(100deg,#fff 15%,#FFD98A 45%,#FF9A8A 70%,#fff 90%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 8px 30px rgba(229,72,77,.4));animation:dhShine 8s ease-in-out infinite}
@keyframes dhShine{50%{background-position:100% 0}}
.dh-hero-in>p{margin:0 auto;max-width:520px;color:rgba(255,235,220,.8);font-size:clamp(13.5px,3.6vw,16px);line-height:1.9}
/* spotlight */
.dh-spot{position:relative;max-width:980px;margin:22px auto 0;text-align:right}
.dh-slides{position:relative;aspect-ratio:21/9;min-height:300px;border-radius:24px;overflow:hidden;box-shadow:0 30px 60px -24px rgba(0,0,0,.8),0 0 0 1px rgba(242,196,107,.25)}
.dh-slide{position:absolute;inset:0;display:flex;align-items:flex-end;gap:18px;padding:22px;opacity:0;visibility:hidden;transition:opacity .8s,visibility .8s;color:#fff}
.dh-slide.on{opacity:1;visibility:visible}
.dh-slide-bg{position:absolute;inset:0;z-index:-1;background:var(--bg) center 25%/cover;transform:scale(1.04);transition:transform 6s ease-out}
.dh-slide.on .dh-slide-bg{transform:scale(1.12)}
.dh-slide::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(11,7,16,.95),rgba(11,7,16,.4) 55%,rgba(11,7,16,.1)),linear-gradient(270deg,rgba(74,11,18,.6),transparent 60%)}
.dh-slide-c{flex:none;width:118px;aspect-ratio:2/3;border-radius:14px;background:#2a0a12 center/cover;box-shadow:0 0 0 2px rgba(242,196,107,.6),0 20px 40px -14px rgba(0,0,0,.9)}
.dh-slide-t{min-width:0;flex:1}
.dh-slide-t small{font-size:12px;color:#FFD98A;font-weight:700}
.dh-slide-t b{display:block;font:400 clamp(24px,4.5vw,38px)/1.25 var(--display)}
.dh-slide-t i{display:block;font-style:normal;font-size:14px;color:rgba(255,235,220,.65);letter-spacing:2px}
.dh-slide-t p{margin:6px 0 0;font-size:13px;line-height:1.8;color:rgba(255,255,255,.78);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-width:620px}
.dh-cta{display:inline-block;margin-top:10px;padding:8px 18px;border-radius:12px;font-weight:800;font-size:13.5px;background:linear-gradient(135deg,#E5484D,#B3202A);box-shadow:0 10px 24px -10px rgba(229,72,77,.9)}
.dh-dots{display:flex;justify-content:center;gap:6px;margin-top:12px}
.dh-dots button{width:8px;height:8px;border:0;padding:0;border-radius:99px;background:rgba(255,255,255,.3);cursor:pointer;transition:width .3s,background .3s}
.dh-dots button.on{width:26px;background:linear-gradient(90deg,#F2C46B,#E5484D)}
.dh-stats{display:flex;justify-content:center;gap:10px;margin-top:14px}
.dh-stats span{padding:6px 14px;border-radius:99px;font-size:12.5px;color:rgba(255,235,220,.85);background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(242,196,107,.25)}
.dh-stats b{font:400 17px var(--display);color:#FFD98A}
.dh-sk{display:block;aspect-ratio:21/9;border-radius:24px;background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.12),rgba(255,255,255,.05));background-size:200% 100%;animation:dhSk 1.2s infinite}
@keyframes dhSk{to{background-position:-200% 0}}
/* sections */
.dh-main{padding:4px 16px 40px}
.dh-sec{margin-top:30px}
.dh-h{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.dh-h h2{margin:0;font:400 25px/1.3 var(--display);color:var(--strong);position:relative;padding-inline-start:16px}
.dh-h h2::before{content:"";position:absolute;right:0;top:20%;bottom:20%;width:5px;border-radius:3px;background:linear-gradient(#F2C46B,#E5484D)}
.dh-h p{margin:0;font-size:12.5px;color:var(--muted)}
.dh-sc-w{position:relative}
.dh-rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 16px 12px;margin:0 -16px;scrollbar-width:none}
.dh-rail::-webkit-scrollbar{display:none}
.dh-rail .dh-p{flex:none;width:150px;scroll-snap-align:start}
.dh-rail.drag{cursor:grabbing;scroll-snap-type:none;user-select:none}.dh-rail.drag a{pointer-events:none}
.dh-arr{position:absolute;top:38%;z-index:5;width:42px;height:42px;border:0;border-radius:50%;cursor:pointer;font:400 28px/1 var(--font);color:#fff;background:rgba(30,7,16,.8);box-shadow:0 8px 20px -6px rgba(0,0,0,.6),inset 0 0 0 1px rgba(242,196,107,.35);display:none;place-items:center;padding-bottom:4px;transition:transform .2s,background .2s}
.dh-arr:hover{transform:scale(1.08);background:linear-gradient(135deg,#E5484D,#B3202A)}
.dh-arr.nx{left:-6px}.dh-arr.pv{right:-6px}
@media (hover:hover) and (pointer:fine){.dh-arr{display:grid}.dh-arr[hidden]{display:none}.dh-rail{cursor:grab}}
/* poster */
.dh-p{position:relative;display:block;min-width:0;animation:dhIn .45s cubic-bezier(.2,.8,.3,1) both;animation-delay:var(--d,0ms)}
@keyframes dhIn{from{opacity:0;transform:translateY(10px)}}
.dh-pi{display:block;aspect-ratio:2/3;border-radius:16px;overflow:hidden;background:var(--cc);box-shadow:0 14px 28px -16px rgba(0,0,0,.7);transition:transform .3s,box-shadow .3s}
.dh-p:hover .dh-pi{transform:translateY(-4px);box-shadow:0 22px 34px -18px rgba(179,32,42,.7),0 0 0 2px rgba(242,196,107,.6)}
.dh-p b{display:block;margin-top:8px;font-size:13.5px;color:var(--strong);line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.dh-p small{font-size:11.5px;color:var(--muted)}
.dh-sc{position:absolute;top:8px;left:8px;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:800;color:#FFE9C2;background:rgba(20,6,10,.75);backdrop-filter:blur(4px)}
.dh-live{position:absolute;top:8px;right:8px;padding:2px 8px;border-radius:99px;font-size:10.5px;font-weight:800;color:#fff;background:#E5484D;box-shadow:0 0 12px rgba(229,72,77,.7)}
.dh-pi{position:relative}
.dh-rk{position:absolute;bottom:-10px;right:4px;font:400 64px/1 var(--display);font-style:normal;color:transparent;-webkit-text-stroke:2px #F2C46B;text-shadow:0 6px 18px rgba(0,0,0,.6);pointer-events:none}
.dh-cult{padding:18px 16px 6px;margin-inline:-16px;border-radius:0;background:radial-gradient(ellipse 60% 80% at 100% 0,rgba(242,196,107,.12),transparent 60%),linear-gradient(180deg,rgba(74,11,18,.25),transparent)}
/* anime → donghua: the show you know fades behind, the donghua steps forward */
.dh-br .dh-b{flex:none;width:340px;scroll-snap-align:start}
.dh-b{position:relative;display:flex;align-items:center;gap:14px;padding:16px;border-radius:22px;overflow:hidden;isolation:isolate;color:#fff;min-height:200px;background:#1a0710;box-shadow:0 18px 36px -20px rgba(0,0,0,.8),inset 0 0 0 1px rgba(242,196,107,.22);transition:transform .3s,box-shadow .3s}
.dh-b:hover{transform:translateY(-4px);box-shadow:0 26px 44px -22px rgba(179,32,42,.8),inset 0 0 0 1px rgba(242,196,107,.5)}
.dh-b-bg{position:absolute;inset:-20px;z-index:-1}
.dh-b-bg img{width:100%;height:100%;object-fit:cover;filter:blur(18px) saturate(1.3);opacity:.45}
.dh-b::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(20,6,10,.92) 30%,rgba(74,11,18,.55))}
.dh-b-vis{position:relative;flex:none;width:136px;height:166px}
.dh-b-vis img{display:block;width:100%;height:100%;object-fit:cover}
.dh-b-f,.dh-b-t{position:absolute;aspect-ratio:2/3;border-radius:12px;overflow:hidden;background:#2a0a12}
.dh-b-f{width:74px;top:0;left:0;transform:rotate(-8deg);filter:grayscale(.5) brightness(.7);box-shadow:0 10px 20px -8px rgba(0,0,0,.8)}
.dh-b-t{width:100px;bottom:0;right:0;z-index:1;box-shadow:0 0 0 2px #F2C46B,0 16px 30px -10px rgba(229,72,77,.9);transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.dh-b:hover .dh-b-t{transform:scale(1.05) rotate(2deg)}
.dh-b-arrow{position:absolute;z-index:2;left:44px;bottom:30px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:15px;color:#fff;background:linear-gradient(135deg,#E5484D,#B3202A);box-shadow:0 0 0 3px #1a0710,0 6px 14px rgba(229,72,77,.7)}
.dh-b-x{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.dh-b-x small{font-size:11px;color:rgba(255,235,220,.6)}
.dh-b-x em{font-style:normal;font-size:12.5px;font-weight:700;color:rgba(255,255,255,.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:8px}
.dh-b-x b{font:400 20px/1.35 var(--display);color:#FFE2A6;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.dh-b-s{align-self:flex-start;margin-top:6px;padding:2px 9px;border-radius:99px;font-size:11px;font-weight:800;color:#FFE9C2;background:rgba(229,72,77,.35);box-shadow:inset 0 0 0 1px rgba(242,196,107,.35)}
@media (max-width:600px){.dh-br .dh-b{width:300px;min-height:180px;padding:14px}.dh-b-vis{width:118px;height:150px}.dh-b-t{width:88px}.dh-b-f{width:64px}.dh-b-arrow{left:36px}.dh-b-x b{font-size:18px}}
/* all */
.dh-chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;margin-bottom:12px;scrollbar-width:none}
.dh-chips::-webkit-scrollbar{display:none}
.dh-chips button{flex:none;border:0;cursor:pointer;padding:7px 14px;border-radius:99px;font:700 12.5px var(--font);color:var(--text);background:var(--fg);box-shadow:inset 0 0 0 1px var(--line)}
.dh-chips button.on{color:#fff;background:linear-gradient(135deg,#E5484D,#B3202A);box-shadow:0 6px 16px -8px rgba(229,72,77,.8)}
.dh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px 12px}
.dh-empty{text-align:center;padding:40px 12px;color:var(--muted)}.dh-empty span{font-size:44px}.dh-empty b{display:block;font:400 22px var(--display);color:var(--strong);margin:6px 0}.dh-empty p{margin:0;font-size:13px}
@media (max-width:600px){
  .dh-hero{padding:86px 0 26px}
  .dh-seal{font-size:15px;padding:8px 5px;top:-4px;right:8px}
  .dh-slides{aspect-ratio:auto;height:330px;min-height:0;border-radius:20px}
  .dh-slide{flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:16px;gap:10px}
  .dh-slide-c{width:84px}
  .dh-slide-t p{-webkit-line-clamp:2;font-size:12.5px}
  .dh-rail .dh-p{width:126px}
  .dh-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 8px}
  .dh-p b{font-size:12.5px}
  .dh-rk{font-size:52px}
  .dh-br{grid-template-columns:1fr}
}
html.lite .dh-clouds,html.lite .dh-hero h1,html.lite .dh-p,html.lite .dh-sk{animation:none}
html.lite .dh-slide-bg{transition:none;transform:none}
html.lite .dh-sc,html.lite .dh-stats span{backdrop-filter:none}
@media (prefers-reduced-motion:reduce){.dh-clouds,.dh-hero h1,.dh-p{animation:none}.dh-slide-bg{transition:none}}

.dh-pi img{display:block;width:100%;height:100%;object-fit:cover}
/* the full list: text rows, a colour edge from the poster, two columns on wide screens */
.dh-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:8px}
.dh-list a{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:14px;background:var(--fg);box-shadow:inset 0 0 0 1px var(--line);border-inline-start:4px solid var(--cc);transition:transform .2s,box-shadow .2s;animation:dhIn .35s both}
.dh-list a:hover{transform:translateX(-3px);box-shadow:inset 0 0 0 1px rgba(229,72,77,.45)}
.dh-n{flex:none;width:30px;text-align:center;font:400 18px var(--display);color:var(--muted)}
.dh-l-t{flex:1;min-width:0}
.dh-l-t b{display:block;font-size:14px;color:var(--strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dh-l-t small{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dh-l-t i{font-style:normal}
.dh-l-s{flex:none;font:400 19px var(--display);color:#E0A400}.dh-l-s small{font-size:11px}
.dh-more-w{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin-top:14px}
.dh-more{border:0;cursor:pointer;padding:10px 22px;border-radius:12px;font:800 13px var(--font);color:#fff;background:linear-gradient(135deg,#E5484D,#B3202A)}
.dh-all{font-size:13px;font-weight:800;color:#E5484D}
@media (max-width:600px){.dh-list{grid-template-columns:1fr}}
html.lite .dh-list a{animation:none}

/* 🏆 hall of fame */
.dh-tg{position:relative;display:flex;padding:4px;border-radius:14px;background:var(--fg);box-shadow:inset 0 0 0 1px var(--line)}
.dh-tg button{position:relative;z-index:1;flex:1;border:0;background:none;cursor:pointer;padding:7px 14px;border-radius:10px;font:800 12.5px var(--font);color:var(--text);white-space:nowrap;transition:color .25s}
.dh-tg button.on{color:#fff}
.dh-tg-p{position:absolute;top:4px;bottom:4px;right:4px;width:calc(50% - 4px);border-radius:10px;background:linear-gradient(135deg,#E5484D,#B3202A);box-shadow:0 6px 16px -6px rgba(229,72,77,.8);transition:transform .35s cubic-bezier(.3,1.3,.5,1)}
.dh-tg.two .dh-tg-p{transform:translateX(-100%)}
.dh-hof-b{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:14px;align-items:stretch}
.dh-one{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:420px;padding:22px;border-radius:24px;overflow:hidden;isolation:isolate;color:#fff;box-shadow:0 30px 60px -26px rgba(0,0,0,.85),inset 0 0 0 1px rgba(242,196,107,.35);animation:dhIn .5s both}
.dh-one-bg{position:absolute;inset:0;z-index:-2}.dh-one-bg img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.dh-one:hover .dh-one-bg img{transform:scale(1.06)}
.dh-one::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(14,5,9,.97) 18%,rgba(14,5,9,.55) 55%,rgba(14,5,9,.1)),radial-gradient(ellipse 60% 50% at 100% 100%,rgba(229,72,77,.35),transparent 70%)}
.dh-one-c{position:absolute;top:20px;right:20px;width:110px;aspect-ratio:2/3;border-radius:14px;overflow:hidden;box-shadow:0 0 0 2px #F2C46B,0 20px 40px -12px rgba(0,0,0,.9);transform:rotate(3deg)}
.dh-one-c img{width:100%;height:100%;object-fit:cover}
.dh-crown{position:absolute;top:6px;left:18px;font:400 120px/1 var(--display);color:transparent;-webkit-text-stroke:2.5px #F2C46B;text-shadow:0 10px 30px rgba(242,196,107,.35);pointer-events:none}
.dh-one-t small{font-size:12px;font-weight:800;color:#FFD98A;letter-spacing:.3px}
.dh-one-t b{display:block;font:400 clamp(26px,4vw,40px)/1.25 var(--display)}
.dh-one-t i{display:block;font-style:normal;font-size:14px;letter-spacing:2px;color:rgba(255,235,220,.6)}
.dh-one-m{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.dh-one-m em{font-style:normal;font-size:12px;font-weight:800;padding:3px 10px;border-radius:99px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(242,196,107,.3)}
.dh-one-t p{margin:10px 0 0;font-size:13px;line-height:1.85;color:rgba(255,255,255,.75);overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.dh-lad{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.dh-lad li{animation:dhIn .4s both;animation-delay:var(--d)}
.dh-lad a{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:14px;background:var(--fg);box-shadow:inset 0 0 0 1px var(--line);transition:transform .2s,box-shadow .2s}
.dh-lad a:hover{transform:translateX(-4px);box-shadow:inset 0 0 0 1px rgba(229,72,77,.5)}
.dh-lad-n{flex:none;width:28px;text-align:center;font:400 22px/1 var(--display);color:var(--muted)}
.dh-lad li:nth-child(1) .dh-lad-n{color:#C9D6E3}.dh-lad li:nth-child(2) .dh-lad-n{color:#E0A06A}
.dh-lad-c{flex:none;width:34px;aspect-ratio:2/3;border-radius:7px;overflow:hidden;background:#2a0a12}.dh-lad-c img{width:100%;height:100%;object-fit:cover}
.dh-lad-t{flex:1;min-width:0}.dh-lad-t b{display:block;font-size:13.5px;color:var(--strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dh-lad-t small{font-size:11px;color:var(--muted)}
.dh-lad-s{flex:none;width:64px;font:400 17px var(--display);color:#E0A400;text-align:left}
.dh-lad-s i{display:block;height:6px;border-radius:6px;background:linear-gradient(90deg,#F2C46B,#E5484D)}
@media (max-width:760px){.dh-hof-b{grid-template-columns:1fr}.dh-one{min-height:340px;padding:18px}.dh-one-c{width:86px}.dh-crown{font-size:96px}.dh-h .dh-tg{width:100%}}
html.lite .dh-one,html.lite .dh-lad li{animation:none}
/* each section gets a little red seal with its Chinese number (一 二 三 …) */
.dh-main{counter-reset:dhs}
.dh-sec{counter-increment:dhs}
.dh-h h2{padding-inline-start:44px}
.dh-h h2::before{content:counter(dhs,trad-chinese-informal);top:50%;bottom:auto;width:32px;height:32px;margin-top:-17px;border-radius:7px;display:grid;place-items:center;font:900 16px/1 "Noto Serif SC",serif;color:#FFE9C2;
  background:linear-gradient(135deg,#C7313A,#8E1820);box-shadow:inset 0 0 0 1.5px rgba(255,220,160,.55),0 6px 14px -6px rgba(199,49,58,.8);transform:rotate(-4deg)}
.dh-lad-s{height:6px;border-radius:6px;background:rgba(127,127,127,.15);align-self:center}
.dh-lad-s:not(:has(i)){height:auto;background:none}
@media (max-width:760px){.dh-one{min-height:430px}.dh-one-c{width:78px;top:16px;right:16px}.dh-one-t p{-webkit-line-clamp:2}.dh-crown{font-size:84px}}
.dh-hof-b>*{min-width:0}.dh-one-t{min-width:0}.dh-one-t b,.dh-one-t i{overflow-wrap:anywhere}