/* v21「羽冠紀元」：圖片優先的卡片流。疊在 theme-a.css（燼夜）上；風格表＝深炭 #1a1410、燼橙 #e0712f、羽金 #d9a441、灰青 #6b7a8c。 */
.v21{--v21-coal:#1a1410;--v21-ember:#e0712f;--v21-gold:#d9a441;--v21-slate:#6b7a8c;background:var(--v21-coal)}
.v21 .wrap{max-width:1180px}

/* 圖片格：圖＋右下角種類標籤 */
.v21-pic{position:relative;margin:0;overflow:hidden;background:#241b14}
.v21-pic img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
a.v21-card:hover .v21-pic img{transform:scale(1.04)}
.v21-tag{position:absolute;right:8px;bottom:8px;padding:2px 8px;background:rgba(26,20,16,.78);color:#f3e3c0;font-size:.68rem;letter-spacing:.08em;pointer-events:none}
.v21-tag-render{color:#ffd59a;border-left:2px solid var(--v21-ember)}
.v21-tag-shot{color:#bfe3ff;border-left:2px solid var(--v21-slate)}

/* 開場：全幅渲染圖 */
.v21-hero{position:relative;isolation:isolate;display:grid;align-items:end;min-height:min(92svh,860px);overflow:clip;padding:0 0 10vh}
.v21-hero>.v21-hero-img,.v21-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.v21-hero>.v21-tag{z-index:1;bottom:16px;right:16px}
.v21-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(26,20,16,.1) 30%,rgba(26,20,16,.65) 75%,var(--v21-coal) 100%),linear-gradient(90deg,rgba(26,20,16,.7),transparent 60%)}
.v21-hero h1{position:relative;display:inline-block;margin:10px 0 0;font:900 clamp(3.4rem,11vw,8rem)/1 var(--font-display);background:linear-gradient(180deg,#fff6dd,#d9a441 60%,#e0712f);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 24px rgba(0,0,0,.5))}
.v21-sub{margin:14px 0 0;font:600 clamp(1rem,2.4vw,1.35rem)/1.6 var(--font-display);color:#f6ecd9;text-shadow:0 2px 10px rgba(0,0,0,.7)}
.v21-badge{display:inline-block;padding:6px 14px;background:rgba(224,113,47,.9);color:#fff;font-weight:800;font-size:.85rem;text-decoration:none;letter-spacing:.06em}
.v21-badge:hover{background:var(--v21-ember)}

/* 區塊 */
.v21-sec{padding:clamp(48px,7vw,96px) 0}
.v21-band{background:linear-gradient(180deg,#21180f,#1a1410)}
.v21-h{margin:0 0 22px;font:900 clamp(1.7rem,4vw,2.6rem)/1.2 var(--font-display);color:#fff3d6}
.v21-h::after{content:"";display:block;width:48px;height:3px;margin-top:10px;background:linear-gradient(90deg,var(--v21-ember),var(--v21-gold))}
.v21-lede{margin:-8px 0 20px;color:var(--ash);font-size:1.05rem}

/* 卡片 */
.v21-card{display:flex;flex-direction:column;gap:6px;color:var(--parchment);text-decoration:none;background:#211913;border:1px solid rgba(217,164,65,.18)}
.v21-card .v21-pic{aspect-ratio:3/2}
.v21-card h3{margin:10px 14px 0;font:800 1.15rem/1.3 var(--font-display);color:#fff3d6;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.v21-card p{margin:0 14px 14px;color:var(--ash);font-size:.92rem}
.v21-card-tall .v21-pic{aspect-ratio:4/5}
.v21-card-sm h3{font-size:1rem}
.v21-card-sm .badge{font-size:.65rem}
.v21-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.v21-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.v21-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.v21-split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,5vw,60px);align-items:center}
.v21-pic-big{aspect-ratio:16/9;border:1px solid rgba(217,164,65,.25)}
.v21-steps{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:12px;counter-reset:s}
.v21-steps li{display:grid;grid-template-columns:36px 1fr;column-gap:12px;color:var(--ash);counter-increment:s}
.v21-steps li::before{content:counter(s);grid-row:span 2;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--v21-gold);color:#1a1410;font:900 1rem/1 var(--font-latin)}
.v21-steps b{color:#fff3d6;font-size:1.05rem}
.v21-rail{display:grid;grid-auto-flow:column;grid-auto-columns:min(320px,78vw);gap:16px;overflow-x:auto;padding:0 max(16px,calc((100vw - 1180px)/2 + 16px)) 10px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.v21-rail>*{scroll-snap-align:start}
.v21-card-gate .v21-pic{aspect-ratio:4/3}

/* 加入 */
.v21-join{position:relative;isolation:isolate;overflow:clip}
.v21-join-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.35}
.v21-join::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--v21-coal) 35%,rgba(26,20,16,.6))}
.v21-join-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:center}
.v21-addr{display:grid;gap:4px;margin:0 0 14px;padding:14px 16px;background:rgba(33,25,19,.9);border-left:3px solid var(--v21-gold);max-width:520px}
.v21-addr span{color:var(--v21-gold);font-weight:800;font-size:.85rem}
.v21-addr small{color:var(--ash-dim)}
.v21-qr{margin:0;text-align:center}
.v21-qr img{display:block;width:186px;height:186px;border:6px solid #f3e3c0}
.v21-qr figcaption{margin-top:8px;color:var(--ash);font-size:.85rem}

@media (max-width:900px){.v21-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.v21-split{grid-template-columns:1fr}}
@media (max-width:760px){.v21-trio,.v21-duo{grid-template-columns:1fr}.v21-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.v21-join-grid{grid-template-columns:1fr}.v21-qr{justify-self:start}.v21-card-tall .v21-pic{aspect-ratio:3/2}}
.v21-badge{display:table;margin-bottom:6px}
.v21-addr-line{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.v21-addr code{font-size:1.25rem;color:#fff3d6;background:none;padding:0}
.v21-addr .v19-copy{width:auto!important;min-height:32px;padding:4px 12px!important;border-radius:2px!important;background:rgba(217,164,65,.15)!important;border:1px solid rgba(217,164,65,.5)!important;color:var(--v21-gold)!important;font-size:.8rem!important}

/* 一句話＋收合的詳細步驟 */
.v21-one{margin:6px 0 12px;font:600 1.1rem/1.6 var(--font-display);color:#fff3d6}
.v21-more{margin:4px 0 0;border-top:1px solid rgba(217,164,65,.2)}
.v21-more>summary{padding:10px 0;color:var(--v21-gold,#d9a441);font-weight:700;cursor:pointer;min-height:44px;display:flex;align-items:center}
.v21-more[open]>summary{margin-bottom:6px}

/* 步驟卡（第一次進服）＋圖示列 */
.v21-hero-short{min-height:min(56svh,520px)}
.v21-path{list-style:none;margin:0;padding:0;display:grid;gap:22px;counter-reset:st}
.v21-stepcard{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:24px;align-items:center;padding:16px;background:#211913;border:1px solid rgba(217,164,65,.18);counter-increment:st}
.v21-stepcard>.v21-pic{aspect-ratio:16/9}
.v21-stepcard h2{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;font:900 1.5rem/1.2 var(--font-display);color:#fff3d6}
.v21-stepcard h2::before{content:counter(st);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--v21-ember,#e0712f);color:#fff;font:900 1rem/1 var(--font-latin)}
.v21-note{margin:4px 0 0;color:var(--ash-dim);font-size:.9rem}
.v21-icons{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.v21-icons li{display:grid;gap:6px;justify-items:center;padding:16px 8px;background:#211913;border:1px solid rgba(217,164,65,.2);text-align:center}
.v21-icons code{font-size:1rem;color:var(--v21-gold,#d9a441)}
.v21-icons span{color:var(--ash);font-size:.85rem}
@media (max-width:760px){.v21-stepcard{grid-template-columns:1fr}.v21-icons{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* 手冊：分類頁籤、分類卡、NPC 頭像 */
.v21-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.v21-tabs a{padding:8px 16px;background:#211913;border:1px solid rgba(217,164,65,.35);color:var(--parchment);text-decoration:none;font-weight:700}
.v21-cat{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:20px;align-items:start;margin:0 0 24px;scroll-margin-top:90px}
.v21-cat-pic{aspect-ratio:3/2}
.v21-cat-pic figcaption{position:absolute;left:0;bottom:0;padding:8px 14px;background:linear-gradient(90deg,rgba(26,20,16,.9),transparent);color:#fff3d6;font:900 1.4rem/1 var(--font-display)}
.v21-items{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.v21-items a{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;min-height:48px;padding:10px 14px;background:#211913;border:1px solid rgba(217,164,65,.15);color:var(--parchment);text-decoration:none}
.v21-items a:hover{border-color:var(--v21-gold,#d9a441)}
.v21-more-in{margin:0 14px 14px}
.v21-faces{list-style:none;margin:0 0 12px;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px}
.v21-faces li{display:grid;justify-items:center;gap:4px;text-align:center}
.v21-face{display:grid;place-items:center;width:100%;aspect-ratio:1;max-width:120px;overflow:hidden;border:3px solid #b8873c;background:radial-gradient(circle at 50% 35%,#5a3a1c,#1a1410)}
.v21-face img{width:100%;height:100%;object-fit:cover}
.v21-face b{color:#fff3d6;font:900 2.2rem/1 var(--font-display)}
.v21-faces small{color:var(--ash-dim);font-size:.78rem}
.v21-detail{padding:110px 16px 20px}
@media (max-width:900px){.v21-faces{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:760px){.v21-cat{grid-template-columns:1fr}.v21-items{grid-template-columns:1fr}.v21-faces{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ta-stop-pic{aspect-ratio:16/9;margin:-22px -24px 14px}
.ta-portrait span img{width:100%;height:100%;object-fit:cover}
.ta-frame .v21-more{width:100%;max-width:230px}
.ta-frame .v21-more>summary{justify-content:center;font-size:.85rem}
.ta-log .v21-hero .ta-seal-grid{width:100%}
.ta-tl-cover{aspect-ratio:16/9;margin:0 0 12px;max-width:640px}
.ta-dim{color:var(--ash-dim)}

/* 內頁插畫：橫幅、開場背景、側欄圖、寬圖、公告封面 */
.ta{--v21-coal:#1a1410;--v21-ember:#e0712f;--v21-gold:#d9a441;--v21-slate:#6b7a8c}
.v21-banner{position:relative;height:clamp(180px,30vw,340px);overflow:hidden;margin:0 calc(50% - 50vw) 24px;width:100vw}
.v21-banner img{width:100%;height:100%;object-fit:cover}
.v21-bgsec{position:relative;isolation:isolate;overflow:clip}
.v21-bgsec>.v21-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.42}
.v21-bgsec>.v21-tag{z-index:1}
.v21-bgsec::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(26,20,16,.35),rgba(26,20,16,.85))}
.v21-side-pic{aspect-ratio:16/10;margin:0 0 14px;border:1px solid rgba(217,164,65,.25)}
.v21-wide-pic{aspect-ratio:21/9;margin:0 0 22px;border:1px solid rgba(217,164,65,.25)}
.v21-cover{aspect-ratio:16/9;margin:-1px -1px 12px}
.ta-news .announcements{padding-top:0}

/* 三種不同開場：左文右圖、書頁壓圖、印章圖帶 */
.v21-split-hero{padding:clamp(100px,12vw,150px) 0 30px;background:radial-gradient(800px 420px at 85% 30%,rgba(224,113,47,.16),transparent)}
.v21-split-hero-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,60px);align-items:center}
.v21-split-hero h1,.v21-seal-hero h1{margin:0;font:900 clamp(2.4rem,6.5vw,4.4rem)/1.1 var(--font-display);background:linear-gradient(180deg,#fff6dd,#d9a441 60%,#e0712f);-webkit-background-clip:text;background-clip:text;color:transparent}
.v21-split-hero .v21-pic{aspect-ratio:16/10;border:3px solid rgba(217,164,65,.45);transform:rotate(1.2deg);box-shadow:0 30px 60px rgba(0,0,0,.55)}
.v21-split-hero .ta-btn{margin-top:18px}
.v21-book-hero{position:relative;isolation:isolate;overflow:clip;display:grid;align-items:center;min-height:min(70svh,620px);padding:110px 0 50px}
.v21-book-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.v21-book-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(26,20,16,.75),transparent 70%)}
.v21-book-hero>.v21-tag{z-index:1}
.v21-book-hero .ta-book-page{max-width:420px}
.v21-seal-hero{position:relative;padding:clamp(100px,12vw,150px) 0 40px;overflow:clip;isolation:isolate}
.v21-seal-strip{position:absolute!important;top:0;right:0;bottom:0;width:55%;z-index:-1;-webkit-mask:linear-gradient(90deg,transparent,#000 40%);mask:linear-gradient(90deg,transparent,#000 40%)}
@media (max-width:900px){.v21-split-hero-grid{grid-template-columns:1fr}.v21-seal-strip{width:100%;opacity:.4}}

/* /v35 推廣頁 */
.v21-promo-hero{position:relative;isolation:isolate;overflow:clip;display:grid;align-items:center;min-height:min(96svh,900px);padding:110px 0 60px;text-align:center}
.v21-promo-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.v21-promo-hero>.v21-tag{z-index:1}
.v21-promo-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 60% at 50% 45%,rgba(26,20,16,.35),rgba(26,20,16,.92))}
.v21-promo-kicker{margin:0;color:var(--v21-gold);font-weight:800;letter-spacing:.4em}
.v21-promo-hero h1{margin:6px 0 0;font:900 clamp(2.6rem,9vw,6.4rem)/1 var(--font-display);color:#fff3d6;text-shadow:0 6px 40px rgba(224,113,47,.55)}
.v21-promo-hero h1 span{display:block;font:900 clamp(5rem,22vw,15rem)/.9 var(--font-latin);background:linear-gradient(180deg,#fff6dd,#d9a441 55%,#e0712f);-webkit-background-clip:text;background-clip:text;color:transparent}
.v21-count{display:flex;justify-content:center;gap:12px;margin:26px 0 8px}
.v21-count span{display:grid;gap:4px;min-width:72px;padding:12px 10px;background:rgba(26,20,16,.75);border:1px solid rgba(217,164,65,.5);color:var(--ash);font-size:.8rem}
.v21-count span b{font:900 2.2rem/1 var(--font-latin);color:#fff3d6}
.v21-count-soon{display:inline-block;padding:10px 24px;background:rgba(224,113,47,.9);color:#fff;font:900 1.3rem/1 var(--font-display);letter-spacing:.3em}
.v21-promo-hero .ta-cta{justify-content:center}
.v21-six{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.v21-pic-tri{display:grid!important;grid-template-columns:repeat(3,1fr);gap:2px;aspect-ratio:3/2}
.v21-pic-tri .v21-pic{aspect-ratio:auto;height:100%}
.v21-video{position:relative;aspect-ratio:16/9;background:#000;border:1px solid rgba(217,164,65,.3)}
.v21-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.v21-share{margin:10px 0 0;color:var(--ash)}
.v21-share a{color:var(--v21-gold);font-weight:700}
@media (max-width:900px){.v21-six{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.v21-six{grid-template-columns:1fr}.v21-count span{min-width:60px}}
.v21-continent{aspect-ratio:4/3;max-width:1100px;margin:0 auto 26px;border:6px solid #3b2614;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.v21-continent figcaption{position:absolute;left:0;bottom:0;padding:8px 14px;background:rgba(26,20,16,.82);color:#fff3d6;font-weight:700;font-size:.9rem}
.v21-tag-skin{color:#d8f5c8;border-left:2px solid #6b9a5b}
.v21-posts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-width:520px;margin:14px 0 4px}
.v21-posts .v21-pic{aspect-ratio:1;border:1px solid rgba(217,164,65,.3)}
@media (max-width:600px){.v21-posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.v21-cameo{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.v21-cameo img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid #b8873c}
.v21-cameo figcaption{color:var(--ash);font-size:.85rem}
.ta-fight-pic{aspect-ratio:1;max-width:220px;margin:0 0 12px;border:2px solid #6b1d14}
.v21-tag-mock{color:#e8d8ff;border-left:2px solid #8a6bb8}
.v21-cmds{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.v21-cmds li{display:grid;gap:2px;padding:10px 12px;background:#211913;border:1px solid rgba(217,164,65,.18)}
.v21-cmds code{color:var(--v21-gold);font-size:.95rem}
.v21-cmds span{color:var(--ash);font-size:.82rem}
.v21-rp .v21-one{margin-top:0}