/* Home, Asura-style layout (Hieu 02/11): 2 columns >=1100px (main ~70% + sidebar ~30%), 1 column below.
   Brand stays Ryuga: colours from brand.css/webtoon.css (--wt-green #00DC64, dark #121212). */
.ha-wrap{display:block;margin-top:20px}
.ha-main{min-width:0}
.ha-side{min-width:0}
.ha-side:empty{display:none}
@media (min-width:1100px){
  .ha-wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:24px;align-items:start}
  .ha-side,.ha-side:empty{display:block}
}

/* Banner: blurred art behind, title + tagline + CTA on the left, portrait cover on the right. Slides keep .wt-hsl so the carousel script works. */
.wt-hero.ha-hero{margin:0;border-radius:8px;background:#0b0b0b}
.ha-hero .wt-hsl.ha-sl{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:28px;align-items:center;padding:32px 36px 48px;min-height:360px;overflow:hidden;background:#0b0b0b}
.ha-bgw{position:absolute;inset:0;z-index:0;overflow:hidden}
.ha-hero img.ha-bg{position:absolute;inset:-24px;width:calc(100% + 48px);height:calc(100% + 48px);max-width:none;aspect-ratio:auto;object-fit:cover;border-radius:0;filter:blur(18px) saturate(1.15);opacity:.55;transform:scale(1.05)}
.ha-bgw::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,11,11,.96) 0%,rgba(11,11,11,.82) 45%,rgba(11,11,11,.35) 100%),linear-gradient(0deg,rgba(11,11,11,.9) 0%,transparent 40%)}
.ha-tx{position:relative;z-index:1;min-width:0}
/* M1 02/11: no clamp/ellipsis on banner text (Hieu saw 'he Northern Duke's' and 'Her...'): title + tagline wrap in full, the slide grows instead. */
.ha-hero .ht{font-size:38px;margin:8px 0 10px;overflow:visible;overflow-wrap:break-word;text-wrap:balance}
.ha-hero p.ha-tg{color:#d4d4d4;font-size:16px;line-height:1.45;margin:0;white-space:normal;overflow:visible;overflow-wrap:break-word;max-width:560px;display:block;-webkit-line-clamp:none}
.ha-last{display:inline-block;margin-top:14px;padding:4px 10px;border-radius:4px;background:rgba(0,220,100,.14);color:var(--wt-green,#00DC64);font-size:13px;font-weight:700}
.ha-cv{position:relative;z-index:1;display:block;border-radius:6px;overflow:hidden;box-shadow:0 12px 32px rgba(0,0,0,.55)}
.ha-hero img.ha-cvi{width:100%;height:auto;aspect-ratio:640/935;object-fit:cover;border-radius:6px}
.ha-hero .wt-hdots{left:36px;bottom:18px}

/* Popular today: one row of portrait covers, scrolls sideways (scroll-snap), never widens the page. */
.ha-blk{margin-top:28px}
.ha-row{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;padding-bottom:8px;-webkit-overflow-scrolling:touch}
.ha-row>.ha-pc{flex:0 0 168px;scroll-snap-align:start}
.ha-pc .wt-cv img{height:100%}
.ha-ch{position:absolute;z-index:2;left:6px;bottom:6px;padding:3px 8px;border-radius:4px;background:rgba(0,0,0,.72);color:#fff;font-size:12px;font-weight:700}
.ha-prem{position:absolute;z-index:2;left:6px;top:6px;right:6px;padding:3px 6px;border-radius:4px;background:var(--wt-green,#00DC64);color:var(--on-green,#000);font-size:11px;font-weight:800;text-align:center}

@media (max-width:700px){
  .ha-wrap{margin-top:12px}
  .ha-hero .wt-hsl.ha-sl{grid-template-columns:minmax(0,1fr) 108px;gap:14px;padding:18px 16px 40px;min-height:0}
  .ha-hero .ht{font-size:22px}
  .ha-hero p.ha-tg{font-size:14px}
  .ha-hero .row{flex-wrap:wrap}
  .ha-hero .row .wt-btn.soft{display:none}
  .ha-hero .wt-hdots{left:16px;bottom:14px}
  .ha-row{gap:10px}
  .ha-row>.ha-pc{flex-basis:132px}
}
/* Small phones (iPhone 390px and below): narrower cover, smaller title, so the banner never widens the page. */
@media (max-width:390px){
  .ha-hero .wt-hsl.ha-sl{grid-template-columns:minmax(0,1fr) 92px;gap:12px;padding:16px 14px 38px}
  .ha-hero .ht{font-size:20px}
  .ha-hero p.ha-tg{font-size:13px}
  .ha-hero .wt-hdots{left:14px}
  .ha-row>.ha-pc{flex-basis:120px}
}

/* Latest updates (M3): 2-column grid >=700px, 1 column on phones. Cover 72x105 fixed box (no layout shift). */
.ha-ups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
.ha-up{display:flex;gap:12px;min-width:0;padding:10px;border-radius:8px;background:var(--card,#1b1b1b)}
.ha-ucv{flex:0 0 72px;width:72px;height:105px;border-radius:6px;overflow:hidden;display:block}
.ha-ucv img{width:100%;height:100%;object-fit:cover;display:block}
.ha-utx{min-width:0;flex:1}
.ha-ut{display:block;font-weight:700;font-size:15px;line-height:1.3;color:var(--ink,#fff);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ha-new{display:inline-block;margin-top:4px;padding:1px 6px;border-radius:3px;background:var(--wt-green,#00DC64);color:var(--on-green,#000);font-size:10px;font-weight:800}
.ha-new[hidden]{display:none}
.ha-uchs{margin-top:6px;display:flex;flex-direction:column;gap:4px}
.ha-uch{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--wt-mute,#a3a3a3);padding:3px 8px;border-radius:4px;background:rgba(255,255,255,.04)}
.ha-uch:hover{color:var(--wt-green,#00DC64)}
.ha-ago{flex:none;font-size:12px;opacity:.8;min-width:1px}

/* Sidebar boxes: Top series (tabs + big rank numbers), Genres chips, promos. */
.ha-box{margin-top:28px;padding:16px;border-radius:8px;background:var(--card,#1b1b1b)}
.ha-side>.ha-box:first-child{margin-top:0}
.ha-bh{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.ha-bh h2{margin:0;font-size:20px;font-family:var(--wt-head)}
.ha-bh a{font-size:13px;color:var(--wt-mute,#a3a3a3)}
.ha-ttabs{display:flex;gap:6px;margin-bottom:12px}
.ha-ttab{flex:1;height:32px;border:0;border-radius:16px;background:rgba(255,255,255,.06);color:var(--ink,#fff);font:600 13px var(--wt-body);cursor:pointer}
.ha-ttab.on{background:var(--wt-green,#00DC64);color:var(--on-green,#000)}
.ha-top{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ha-top a{display:flex;align-items:center;gap:12px;min-width:0}
.ha-rk{flex:0 0 34px;text-align:center;font-size:28px;font-weight:800;line-height:1;color:var(--wt-mute,#a3a3a3)}
.ha-top li:nth-child(-n+3) .ha-rk{color:var(--wt-green,#00DC64)}
.ha-tcv{flex:0 0 48px;width:48px;height:70px;border-radius:4px;overflow:hidden;display:block}
.ha-tcv img{width:100%;height:100%;object-fit:cover;display:block}
.ha-ttx{min-width:0;display:flex;flex-direction:column;gap:3px}
.ha-tt{font-weight:700;font-size:14px;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;color:var(--ink,#fff)}
.ha-tg2{font-size:12px;color:var(--wt-mute,#a3a3a3)}
.ha-src{margin:12px 0 0;font-size:11px;color:var(--wt-mute,#a3a3a3)}
.ha-chips{display:flex;flex-wrap:wrap;gap:8px}
.ha-chip{padding:6px 12px;border-radius:16px;background:rgba(255,255,255,.06);font-size:13px;color:var(--ink,#fff)}
.ha-chip:hover{background:var(--wt-green,#00DC64);color:var(--on-green,#000)}
.ha-promo{display:flex;flex-direction:column;gap:6px;margin-top:16px;padding:16px;border-radius:8px;border:1px solid rgba(255,255,255,.12);color:var(--ink,#fff)}
.ha-promo-p{border-color:var(--wt-green,#00DC64);background:rgba(0,220,100,.08)}
.ha-promo b{font-size:16px}
.ha-promo span{font-size:13px;color:var(--wt-mute,#a3a3a3)}
.ha-promo i{font-style:normal;font-size:13px;font-weight:700;color:var(--wt-green,#00DC64)}
@media (max-width:1099px){ .ha-side{margin-top:28px} }
@media (max-width:700px){ .ha-ups{grid-template-columns:minmax(0,1fr);gap:10px} }

/* 04/11 HIDE_AI: "New series are coming" + For creators + For studios (index.html #comingWrap). Brand colours only, no art. */
.cs-wrap[hidden]{display:none}
.cs-hero{padding:40px 36px;border-radius:8px;background:radial-gradient(120% 140% at 100% 0%,color-mix(in srgb,var(--wt-green,#00DC64) 22%,transparent) 0%,transparent 55%),var(--wt-chip,#1e1e1e);border:1px solid var(--wt-line,#2a2a2a)}
.cs-k{font:800 13px var(--wt-body,system-ui);color:var(--wt-green-t,#00DC64);text-transform:uppercase;letter-spacing:.06em}
.cs-hero h1{font:800 38px/1.15 var(--wt-head,system-ui);margin:10px 0 12px;color:var(--wt-ink,#fff);text-wrap:balance;overflow-wrap:break-word}
.cs-hero p,.cs-card p{color:var(--wt-mute,#bbb);font-size:16px;line-height:1.5;margin:0;max-width:600px}
.cs-acts{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-top:20px}
.cs-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border-radius:64px;font-weight:800;text-decoration:none}
.cs-link{color:var(--wt-green-t,#00DC64);font-weight:700;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;overflow-wrap:anywhere}
.cs-link:hover{text-decoration:underline}
.cs-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.cs-card{padding:26px 24px;border-radius:8px;background:var(--wt-chip,#1e1e1e);border:1px solid var(--wt-line,#2a2a2a);min-width:0}
.cs-card h2{font:800 22px/1.25 var(--wt-head,system-ui);margin:8px 0 10px;color:var(--wt-ink,#fff)}
@media (max-width:700px){
  .cs-hero{padding:28px 20px}
  .cs-hero h1{font-size:28px}
  .cs-two{grid-template-columns:1fr}
  .cs-card{padding:22px 20px}
}

/* 07/11 Rising Action (HIDE_AI) */
.ra-blk[hidden]{display:none}
.ra-sub{color:var(--wt-mute,#bbb);font-size:14px;margin:-4px 0 12px}
.ra-soon{display:flex;flex-direction:column;gap:6px;width:100%;padding:22px 20px;border:1px dashed var(--wt-line,#2a2a2a);border-radius:8px;background:var(--wt-chip,#1e1e1e);color:var(--wt-ink,#fff);text-decoration:none;box-sizing:border-box}
.ra-soon b{font:800 20px/1.2 var(--wt-head,system-ui)}
.ra-soon span{color:var(--wt-mute,#bbb);font-size:15px;line-height:1.5}
/* 07/11 M2 (WEBTOON layout): Ryuga brand banner slides (no covers) + home hero + "Genres launching soon" chip strip + creator/studio blocks. */
.bb-hero .wt-hsl.bb-sl{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;gap:10px;min-height:300px;padding:36px 40px 56px;color:#fff;text-decoration:none;overflow:hidden;box-sizing:border-box}
.bb-hero .bb-1{background:radial-gradient(90% 120% at 100% 0%,rgba(0,220,100,.45) 0%,transparent 60%),linear-gradient(135deg,#0d1f14 0%,#0b0b0b 70%)}
.bb-hero .bb-2{background:radial-gradient(90% 120% at 100% 100%,rgba(255,196,0,.35) 0%,transparent 60%),linear-gradient(135deg,#231a05 0%,#0b0b0b 70%)}
.bb-hero .bb-3{background:radial-gradient(90% 120% at 0% 0%,rgba(80,140,255,.4) 0%,transparent 60%),linear-gradient(135deg,#0a1530 0%,#0b0b0b 70%)}
.bb-hero .bb-sl::after{content:"RYUGA";position:absolute;right:28px;bottom:14px;font:900 64px/1 var(--wt-head,system-ui);letter-spacing:.08em;color:#fff;opacity:.06;pointer-events:none}
.bb-k{font:800 13px var(--wt-body,system-ui);text-transform:uppercase;letter-spacing:.08em;color:#00DC64}
.bb-t{font:900 40px/1.1 var(--wt-head,system-ui);letter-spacing:-.02em;max-width:640px;text-wrap:balance}
.bb-s{font:600 16px/1.45 var(--wt-body,system-ui);color:#d4d4d4;max-width:560px}
.hm-hero{margin-top:16px}
.hm-hero h1{font:900 34px/1.15 var(--wt-head,system-ui);letter-spacing:-.02em;margin:0 0 10px;text-wrap:balance}
.hm-hero p{margin:0;max-width:640px;color:var(--wt-mute,#bdbdbd);font-size:16px;line-height:1.5}
.gs-row{display:flex;flex-wrap:wrap;gap:8px}
.gs-chip{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:64px;border:1px solid var(--wt-line,#2a2a2a);background:var(--wt-chip,#1e1e1e);font:700 14px var(--wt-body,system-ui);color:inherit;white-space:nowrap}
.gs-chip::after{content:"soon";margin-left:8px;font:800 10px var(--wt-body,system-ui);text-transform:uppercase;letter-spacing:.06em;color:var(--wt-green-t,#00DC64)}
.hm-two{margin-top:28px}
@media (max-width:700px){
  .bb-hero .wt-hsl.bb-sl{min-height:220px;padding:22px 18px 44px}
  .bb-t{font-size:26px}.bb-s{font-size:14px}.bb-hero .bb-sl::after{font-size:40px;right:16px}
  .hm-hero h1{font-size:26px}.hm-hero p{font-size:15px}
  .gs-chip{min-height:32px;padding:0 12px;font-size:13px}
}