/* 🇰🇷🇨🇳 the work page in three dresses:
   manga  → a black-and-white Japanese page (manga.css)
   manhwa → a webtoon on a phone: full colour, rounded, read top to bottom
   manhua → a Chinese scroll: parchment, wooden rods, red seals, gold lattice */

/* ================= 🇰🇷 MANHWA ================= */
body.manhwa{--wv1:#8B6CFF;--wv2:#22D3EE;--wv3:#FF5FA2}
.manhwa .mhero{background:radial-gradient(60% 70% at 85% 0%,rgba(139,108,255,.42),transparent 70%),radial-gradient(50% 60% at 5% 100%,rgba(34,211,238,.26),transparent 70%),linear-gradient(180deg,#08071A,#120F2A)}
.manhwa .mhero::before{opacity:1;background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 64px);-webkit-mask:linear-gradient(180deg,#000,transparent 85%);mask:linear-gradient(180deg,#000,transparent 85%)}
.manhwa .mpage{background:none;padding:0;box-shadow:none;transform:none;gap:16px;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 290px;grid-template-rows:auto auto auto;align-content:start;align-items:start;
  grid-template-areas:"title title cover" "cap cap cover" "tag tag cover"}
.manhwa .panel{border:0;border-radius:22px;background:rgba(255,255,255,.055);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.manhwa .tone,.manhwa .speed,.manhwa .p-sfx{display:none}
/* the cover is a phone screen showing the webtoon */
.manhwa .p-cover{align-self:stretch;min-height:500px;border-radius:40px;background-color:#1b1636;
  box-shadow:0 0 0 9px #0E0B22,0 0 0 10.5px rgba(255,255,255,.14),0 40px 90px -24px rgba(139,108,255,.75)}
.manhwa .p-cover::before{content:"";position:absolute;z-index:2;top:12px;left:50%;width:92px;height:24px;margin-left:-46px;border-radius:99px;background:#0E0B22}
.manhwa .p-cover::after{content:"↓";position:absolute;z-index:2;inset:auto 0 0;height:96px;display:grid;place-items:end center;padding-bottom:16px;font:900 20px/1 var(--font);color:#fff;
  background:linear-gradient(transparent,rgba(8,7,26,.85));animation:wvDown 1.8s ease-in-out infinite}
@keyframes wvDown{50%{padding-bottom:8px}}
.manhwa .p-cover .cvjp{writing-mode:horizontal-tb;inset:auto 18px 110px;top:auto;right:18px;left:18px;text-align:center;font-size:clamp(26px,3vw,40px)}
.manhwa .p-title{place-items:center start;padding:0;background:none;box-shadow:none}
.manhwa .bubble{max-width:100%;width:100%;border:0;border-radius:28px 28px 28px 8px;padding:24px 28px;text-align:right;
  background:linear-gradient(135deg,rgba(139,108,255,.28),rgba(34,211,238,.12));box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 20px 50px -24px rgba(139,108,255,.8)}
.manhwa .bubble::before,.manhwa .bubble::after{display:none}
.manhwa .bubble .kind{color:#fff;background:linear-gradient(90deg,var(--wv1),var(--wv2));padding:3px 14px;font-size:12.5px;box-shadow:0 6px 16px -6px var(--wv1)}
.manhwa .bubble h1{color:#fff;font-size:clamp(34px,4.6vw,62px);background:linear-gradient(180deg,#fff 35%,#C9F6FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.manhwa .bubble h1.latin{color:#fff}
.manhwa .bubble .rom{color:rgba(255,255,255,.62)}
.manhwa .p-cap{padding:0;background:none;box-shadow:none}
.manhwa .caps{gap:10px}
.manhwa .caps div{border:0;border-radius:16px;padding:10px 14px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);color:rgba(255,255,255,.6)}
.manhwa .caps b{color:#fff}
.manhwa .p-tag{align-items:flex-start;flex-direction:column;gap:14px;padding:18px}
.manhwa .thought{border:0;border-radius:18px;background:rgba(255,255,255,.07);color:#fff;-webkit-line-clamp:4}
.manhwa .stamps{max-width:none;justify-content:flex-start;gap:8px}
.manhwa .stamp{width:auto;height:32px;padding:0 14px;border-radius:99px;transform:none;font-size:12.5px;border:1px solid rgba(34,211,238,.55);color:#A5F3FC;background:rgba(34,211,238,.08);box-shadow:none}
.manhwa .stamp:nth-child(2){border-color:rgba(139,108,255,.6);color:#D2C6FF;background:rgba(139,108,255,.1)}
.manhwa .stamp:nth-child(3){border-color:rgba(255,95,162,.55);color:#FFC0DB;background:rgba(255,95,162,.08)}
.manhwa .read-hint{color:#7DE6F6;text-align:right}
.manhwa .poster.gen{background:linear-gradient(165deg,var(--wv1),var(--wv2))}

/* ================= 🇨🇳 MANHUA ================= */
.manhua .mhero{--paper:#F6EAD0;--ink:#3A140C;
  background:radial-gradient(55% 70% at 85% 0%,rgba(200,35,30,.5),transparent 70%),radial-gradient(45% 60% at 0% 100%,rgba(212,160,60,.22),transparent 70%),linear-gradient(180deg,#160606,#230B09)}
/* a gold window lattice instead of screen-tone dots */
.manhua .mhero::before{opacity:1;background:repeating-linear-gradient(45deg,rgba(212,170,80,.07) 0 1px,transparent 1px 26px),repeating-linear-gradient(-45deg,rgba(212,170,80,.07) 0 1px,transparent 1px 26px);-webkit-mask:radial-gradient(80% 90% at 50% 0%,#000,transparent);mask:radial-gradient(80% 90% at 50% 0%,#000,transparent)}
/* the page is an unrolled scroll: parchment between two wooden rods; read left to right, so the cover sits on the left */
.manhua .mpage{transform:none;border-radius:2px;padding:16px;margin:18px 0;
  background:radial-gradient(120% 80% at 50% 50%,#FBF2DE,#EED9B0);box-shadow:0 30px 70px rgba(0,0,0,.6);
  grid-template-columns:minmax(0,.8fr) minmax(0,1.1fr) minmax(0,.75fr) minmax(0,.95fr);
  grid-template-areas:"title title title cover" "cap cap sfx cover" "tag tag tag cover"}
.manhua .mpage::before,.manhua .mpage::after{content:"";position:absolute;left:-18px;right:-18px;height:18px;border-radius:9px;z-index:1;
  background:linear-gradient(180deg,#8A4B22,#4A220C 55%,#2B1206);box-shadow:0 6px 14px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,220,170,.35)}
.manhua .mpage::before{top:-14px}.manhua .mpage::after{bottom:-14px}
.manhua .panel{border:2px solid var(--ink);border-radius:3px;box-shadow:inset 0 0 0 4px var(--paper),inset 0 0 0 5.5px #C9A24A}
.manhua .p-cover{box-shadow:inset 0 0 0 4px rgba(246,234,208,.0),0 0 0 0 transparent}
.manhua .p-cover .cvjp{font-family:"Noto Serif SC","Songti SC","STSong",serif;color:#FBEFD9}
.manhua .p-cover.noimg{background:radial-gradient(circle at 30% 30%,#E0453B,#7A120E)}
.manhua .speed{inset:0;animation:none;opacity:1;background:radial-gradient(circle at 50% 50%,transparent 45%,rgba(58,20,12,.16));-webkit-mask:none;mask:none}
.manhua .bubble{border:3px double #B8862B;border-radius:6px;background:#FCF4E2;padding:18px 34px 20px;box-shadow:0 10px 26px -14px rgba(58,20,12,.6)}
.manhua .bubble::before,.manhua .bubble::after{display:none}
/* the kind label is a red seal */
.manhua .bubble .kind{border-radius:3px;background:#C8231E;color:#FBEFD9;padding:2px 12px;font-weight:900;transform:rotate(-4deg);box-shadow:inset 0 0 0 2px rgba(251,239,217,.35)}
.manhua .bubble h1{color:var(--ink)}
.manhua .tone{background:radial-gradient(circle,rgba(201,162,74,.75) 1.6px,transparent 2.1px) 0 0/9px 9px;opacity:.5}
.manhua .p-sfx b{font-size:clamp(28px,3.4vw,50px);font-family:"Noto Serif SC","Songti SC","STSong",serif;font-weight:900;color:#C8231E;-webkit-text-stroke:2px #3A140C;transform:rotate(-6deg)}
.manhua .caps div{border-color:#B8862B;background:#FCF4E2}
.manhua .thought{border-radius:6px;border-color:#B8862B;background:#FCF4E2}
.manhua .stamp{border-radius:5px;border:3px solid #C8231E;color:#C8231E;background:rgba(252,244,226,.9)}
.manhua .read-hint{color:#E8C27A;text-align:left}
.manhua .poster.gen{background:radial-gradient(circle at 30% 30%,#E0453B,#7A120E)}

/* ================= phones ================= */
@media (max-width:980px){
  .manhwa .mpage{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"title" "cover" "cap" "tag"}
  .manhwa .p-cover{justify-self:center;width:min(250px,70%);min-height:380px;margin:10px 0}
  .manhua .mpage{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:auto auto auto auto;grid-template-areas:"title title" "cap cover" "sfx sfx" "tag tag"}
  .manhua .mpage::before,.manhua .mpage::after{left:-8px;right:-8px}
}
@media (max-width:640px){
  .manhwa .bubble{padding:18px 20px}
  .manhwa .caps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .manhwa .p-tag{padding:14px}
  .manhua .bubble{padding:14px 18px 16px}
  .manhua .mpage{padding:12px}
}
html.lite .manhwa .p-cover::after{animation:none}
@media (prefers-reduced-motion:reduce){.manhwa .p-cover::after{animation:none}}
/* ⚡ off-screen sections skip layout and paint until needed */
body.manga .wrap > section.blk:not(#sum){content-visibility:auto;contain-intrinsic-size:auto 800px}