:root{--ink:#090806;--paper:#eee7d7;--gold:#c99a46;--gold2:#f1d28d;--red:#9d1f19;--line:rgba(201,154,70,.3)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:#e8dfcf;font-family:"Noto Serif SC","Songti SC","Microsoft YaHei",serif;overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit}.noise{position:fixed;inset:0;z-index:99;pointer-events:none;opacity:.045;background-image:url("../images/bg_b.jpg");mix-blend-mode:screen}.topbar{position:fixed;z-index:50;top:0;left:0;right:0;height:78px;padding:0 clamp(20px,4vw,72px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.08);background:linear-gradient(#080706e8,#08070670);backdrop-filter:blur(15px);transition:.3s}.brand{font-size:25px;letter-spacing:.12em;font-weight:900}.brand span{color:var(--gold2)}.brand b{color:#fff}.topbar nav{display:flex;gap:clamp(24px,4vw,64px);font-size:14px;letter-spacing:.3em}.topbar nav a{position:relative;opacity:.76}.topbar nav a:after{content:"";position:absolute;left:0;right:.3em;bottom:-12px;height:1px;background:var(--gold);transform:scaleX(0);transition:.3s}.topbar nav a:hover{opacity:1}.topbar nav a:hover:after{transform:scaleX(1)}.sound{border:0;background:none;color:#ddd;display:flex;gap:10px;align-items:center;cursor:pointer;font-size:12px;letter-spacing:.12em}.sound i{width:32px;height:32px;border:1px solid var(--line);border-radius:50%;position:relative}.sound i:after{content:"▶";position:absolute;inset:0;display:grid;place-items:center;color:var(--gold2);font-size:10px}.sound.playing i:after{content:"Ⅱ"}.hero{height:max(760px,100svh);position:relative;display:grid;place-items:center;isolation:isolate;overflow:hidden}.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;filter:saturate(.75) contrast(1.1)}.hero-wash{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#050403e6 0%,#0806047a 40%,#07050445 70%,#050403d9 100%),linear-gradient(0deg,#090806 0%,transparent 35%,#0504034d 100%)}.hero:after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 52% 50%,transparent 0 20%,#09080632 62%,#090806 120%)}.hero-content{text-align:center;margin-top:30px;animation:rise 1.2s both}.eyebrow{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--gold2);font-size:13px;letter-spacing:.45em}.eyebrow span{width:46px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}.eyebrow span:last-child{transform:scaleX(-1)}h1{font-size:clamp(80px,11vw,174px);line-height:.86;margin:38px 0 34px;letter-spacing:.04em;color:#f4ead4;text-shadow:0 8px 40px #000}.hero h1 span{color:var(--gold2);background:linear-gradient(180deg,#fff0bd,#a76f20);background-clip:text;-webkit-text-fill-color:transparent}.hero-copy{font-size:clamp(17px,1.4vw,23px);line-height:2;letter-spacing:.3em;color:#ddd3c0}.hero-actions{display:flex;justify-content:center;gap:14px;margin-top:38px}.btn{min-width:166px;padding:15px 24px;text-align:center;letter-spacing:.18em;font-size:14px;border:1px solid var(--gold);transition:.3s}.btn:hover{transform:translateY(-3px);box-shadow:0 12px 35px #0009}.btn.primary{background:linear-gradient(135deg,#a82820,#6e110e);border-color:#c95442;color:#fff}.btn.ghost{background:#0908068a;color:var(--gold2)}.scroll-cue{position:absolute;bottom:28px;display:flex;flex-direction:column;align-items:center;gap:10px;color:#bbaa8c;font:10px Arial;letter-spacing:.3em}.scroll-cue i{height:38px;width:1px;background:linear-gradient(var(--gold),transparent)}.section{background:var(--paper);color:#2a1c15;padding:120px clamp(20px,6vw,120px)}.section-head{text-align:center;margin:0 auto 68px}.section-head p{color:var(--gold);font:11px Arial;letter-spacing:.5em}.section-head h2{font-size:clamp(32px,4vw,58px);margin:14px 0 16px;letter-spacing:.12em}.section-head span{font-size:13px;letter-spacing:.35em;color:#806e5c}.section-head.light h2{color:#f2e6ce}.section-head.light span{color:#a89984}.world{background-image:linear-gradient(#f5f0e8e8,#eee7d7f4),url("../images/bg_02.jpg");background-size:cover;background-position:center}.world-grid{max-width:1380px;margin:auto;display:grid;grid-template-columns:1.05fr .95fr;box-shadow:0 30px 90px #3d27132e}.manifesto{position:relative;background:#f7f3e9;padding:clamp(38px,5vw,82px);border:1px solid #d4c5ac}.manifesto:before{content:"";position:absolute;inset:12px;border:1px solid #d9cbb5;pointer-events:none}.manifesto p{position:relative;font-size:16px;line-height:2.15;color:#59463b}.manifesto .lead{font-size:20px;color:#2f211a}.seal{position:absolute;right:24px;top:-35px;background:var(--red);color:#fff;padding:14px 10px;font-size:14px;line-height:1.3;box-shadow:0 6px 18px #6f1b1559}.motto{position:relative;color:#7c2118;font-size:clamp(24px,3vw,42px);letter-spacing:.15em;margin-top:30px}.world-art{min-height:570px;background:url("../images/bg_03.jpg") center/cover no-repeat}.gallery-section{padding:120px 0;background:#0a0907 url("../images/bg_06.jpg") top center/cover fixed;color:#eee}.gallery-section.treasure{background:var(--paper) url("../images/bg_05.jpg") center/cover;color:#2a1c15}.gallery-shell{position:relative;max-width:1480px;margin:auto;padding:0 68px}.gallery{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,1fr);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:12px 4px 35px}.gallery::-webkit-scrollbar{display:none}.card{scroll-snap-align:start;position:relative;aspect-ratio:3/4;overflow:hidden;background:#18130d;border:1px solid var(--line);cursor:zoom-in;transition:.4s}.card img{width:100%;height:100%;object-fit:cover;transition:.6s}.card:after{content:attr(data-title);position:absolute;left:0;right:0;bottom:0;padding:50px 20px 20px;background:linear-gradient(transparent,#080603e8);color:#f4e5c6;letter-spacing:.15em;transform:translateY(15px);opacity:0;transition:.35s}.card:hover{transform:translateY(-8px);border-color:var(--gold)}.card:hover img{transform:scale(1.05)}.card:hover:after{transform:none;opacity:1}.slide{position:absolute;z-index:3;top:44%;width:46px;height:70px;border:1px solid var(--line);background:#080705bd;color:var(--gold2);font-size:34px;cursor:pointer;transition:.3s}.slide:hover{background:var(--red);color:#fff}.slide.prev{left:8px}.slide.next{right:8px}.cta{min-height:650px;display:grid;place-items:center;text-align:center;background:linear-gradient(#070605bf,#070605e8),url("../Top/images/bg_05.jpg") center/cover fixed}.cta-inner{padding:70px 20px}.cta p{color:var(--gold2);letter-spacing:.5em;font-size:13px}.cta h2{font-size:clamp(38px,5vw,78px);letter-spacing:.1em;margin:24px 0}.cta small{display:block;margin-top:30px;color:#837a6c}footer{padding:48px clamp(20px,5vw,80px);border-top:1px solid #211d17;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#786f61;font-size:12px}.footer-brand{font-size:24px;color:var(--gold2);font-weight:900;letter-spacing:.2em}footer a{color:#c9b58e}dialog{border:1px solid var(--gold);background:#090806e8;padding:18px;max-width:min(92vw,900px);color:#fff;box-shadow:0 30px 100px #000}dialog::backdrop{background:#000d;backdrop-filter:blur(10px)}dialog img{display:block;max-width:100%;max-height:78vh;margin:auto}dialog button{position:absolute;right:18px;top:12px;width:40px;height:40px;border:0;border-radius:50%;background:#000b;color:#fff;font-size:28px;cursor:pointer}dialog p{text-align:center;letter-spacing:.2em}.reveal{opacity:0;transform:translateY(28px);transition:.8s ease}.reveal.visible{opacity:1;transform:none}@keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@media(max-width:800px){.topbar{height:66px}.topbar nav{display:none}.sound span{display:none}.hero{min-height:720px}.eyebrow{font-size:10px}.hero-copy{letter-spacing:.16em}.hero-actions{flex-direction:column;align-items:center}.world-grid{grid-template-columns:1fr}.world-art{min-height:420px;order:-1}.section,.gallery-section{padding-top:86px;padding-bottom:86px}.gallery-shell{padding:0 20px}.gallery{grid-auto-columns:72%}.slide{display:none}.manifesto{padding:46px 32px}.manifesto .lead{font-size:18px}footer{flex-direction:column;text-align:center}.cta{min-height:600px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.hero-video{display:none}}

/* 2026 complete catalog layout */
.gallery-section{padding:130px clamp(20px,4vw,64px)}
.gallery-shell{max-width:1540px;padding:0 0 0 86px}
.gallery{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-flow:row;grid-auto-columns:auto;gap:12px;overflow:visible;padding:0;scroll-snap-type:none}
.catalog-mark{position:absolute;left:0;top:0;width:62px;display:flex;flex-direction:column;align-items:center;gap:16px;color:var(--gold2)}
.catalog-mark:after{content:"";width:1px;height:250px;background:linear-gradient(var(--gold),transparent)}
.catalog-mark b{display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--gold);font-size:18px;transform:rotate(45deg)}
.catalog-mark b::first-letter{display:block;transform:rotate(-45deg)}
.catalog-mark span{font-size:13px;line-height:1.6;letter-spacing:.25em}
.catalog-mark.dark{color:#70271e}
.card{appearance:none;padding:0;scroll-snap-align:none;aspect-ratio:auto;min-height:310px}
.card:nth-child(12n + 1),.card:nth-child(12n + 8){grid-column:span 2;grid-row:span 2;min-height:632px}
.card img{object-fit:cover}
.card:before{content:attr(data-index);position:absolute;z-index:2;top:14px;left:14px;color:#f1d28d;font:10px Arial;letter-spacing:.2em;padding:7px 9px;background:#080604a8;border:1px solid #c99a4659}
.card:after{z-index:2;padding:70px 18px 18px}
.card:hover{z-index:3;box-shadow:0 22px 50px #0009}
.treasure .card{background:#d8cdb9;border-color:#bca988}
.treasure .card:before{color:#fff;background:#761b16df;border-color:#a94d43}
@media(max-width:1200px){.gallery{grid-template-columns:repeat(4,minmax(0,1fr))}.card{min-height:280px}.card:nth-child(12n + 1),.card:nth-child(12n + 8){min-height:572px}}
@media(max-width:800px){.gallery-shell{padding:0}.catalog-mark{display:none}.gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.card,.card:nth-child(12n + 1),.card:nth-child(12n + 8){grid-column:span 1;grid-row:span 1;min-height:320px}.card:nth-child(7n + 1){grid-column:span 2;min-height:540px}}
@media(max-width:430px){.card,.card:nth-child(12n + 1),.card:nth-child(12n + 8){min-height:255px}.card:nth-child(7n + 1){min-height:440px}}

/* Dense treasure-wall presentation: more equipment visible per viewport */
.gallery-shell{max-width:1800px}
.gallery{grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}
.card,.card:nth-child(12n + 1),.card:nth-child(12n + 8){grid-column:span 1;grid-row:span 1;min-height:245px}
.card:nth-child(24n + 1){grid-column:span 2;grid-row:span 2;min-height:500px}
.card:after{padding:52px 13px 14px;font-size:12px}
.card:before{top:10px;left:10px;padding:5px 7px;font-size:9px}
@media(min-width:1680px){.gallery{grid-template-columns:repeat(10,minmax(0,1fr))}.card,.card:nth-child(12n + 1),.card:nth-child(12n + 8){min-height:230px}.card:nth-child(24n + 1){min-height:470px}}
@media(max-width:1280px){.gallery{grid-template-columns:repeat(6,minmax(0,1fr))}.card,.card:nth-child(12n + 1),.card:nth-child(12n + 8){min-height:255px}.card:nth-child(24n + 1){min-height:520px}}
@media(max-width:800px){.gallery{grid-template-columns:repeat(3,minmax(0,1fr))}.card,.card:nth-child(12n + 1),.card:nth-child(12n + 8),.card:nth-child(7n + 1){grid-column:span 1;grid-row:span 1;min-height:280px}.card:nth-child(15n + 1){grid-column:span 2;grid-row:span 2;min-height:568px}}
@media(max-width:520px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.card,.card:nth-child(12n + 1),.card:nth-child(12n + 8),.card:nth-child(7n + 1),.card:nth-child(15n + 1){grid-column:span 1;grid-row:span 1;min-height:270px}.card:nth-child(12n + 1){grid-column:span 2;min-height:450px}}

/* Cinematic carriage scene carried through the entire page */
.page-backdrop{position:fixed;z-index:0;inset:0;overflow:hidden;background:#080706;pointer-events:none}
main,footer{position:relative;z-index:1}
.topbar{position:fixed;z-index:50}
.page-backdrop video{width:100%;height:100%;object-fit:cover;object-position:center center;filter:saturate(.75) contrast(1.12) brightness(.68);transform:scale(1.02)}
.page-backdrop-shade{position:absolute;inset:0;background:linear-gradient(90deg,#070604d9 0%,#09070575 45%,#070604b8 100%),linear-gradient(0deg,#080706d6 0%,transparent 38%,#0807067a 100%)}
.hero{background:transparent}
.world{background-image:linear-gradient(#f5f0e8ed,#eee7d7f2),url("../images/bg_02.jpg");box-shadow:0 0 80px #0008}
.gallery-section{background-color:rgba(8,7,5,.82);background-image:linear-gradient(rgba(7,6,5,.80),rgba(7,6,5,.90)),url("../images/bg_06.jpg");background-blend-mode:multiply,soft-light}
.gallery-section.treasure{background-color:rgba(235,227,211,.90);background-image:linear-gradient(rgba(239,232,218,.91),rgba(228,217,196,.92)),url("../images/bg_05.jpg");background-blend-mode:normal,soft-light}
.cta{background:linear-gradient(#070605a8,#070605dd)}
footer{background:#080706e8;backdrop-filter:blur(16px)}
@media(max-width:800px){.page-backdrop video{object-position:58% center}.page-backdrop-shade{background:linear-gradient(#070604a3,#080706d9)}}
@media(prefers-reduced-motion:reduce){.page-backdrop video{display:none}.page-backdrop{background:#080706 url("../Top/images/bg_01.jpg") center/cover no-repeat}}

/* Third season brand emphasis */
.brand{display:flex;align-items:center;gap:0}
.brand em{margin-left:12px;padding:5px 8px 4px;background:#9d1f19;color:#fff3d1;border:1px solid #d15b45;font-style:normal;font-size:11px;letter-spacing:.18em;box-shadow:0 0 22px #b5242057}
.hero-season{display:inline-flex;align-items:center;gap:16px;margin-top:-12px;padding:10px 22px 11px;background:linear-gradient(135deg,#b62c22,#6c0d0a);border:1px solid #df7657;box-shadow:0 12px 45px #000b,0 0 35px #c934254d;color:#fff2cd;font-size:clamp(28px,3.2vw,48px);line-height:1;letter-spacing:.22em;transform:rotate(-2deg)}
.hero-season small{font:9px/1.2 Arial,sans-serif;letter-spacing:.32em;color:#e7bb74;writing-mode:vertical-rl}
.footer-brand b{margin-left:8px;color:#fff;background:#8d1b16;padding:4px 7px;font-size:11px;letter-spacing:.16em}
@media(max-width:800px){.brand em{margin-left:8px;font-size:9px;padding:4px 6px}.hero-season{font-size:30px;margin-top:-6px}.eyebrow{letter-spacing:.23em}}

/* Original icon-to-detail equipment interaction */
.gallery{grid-template-columns:repeat(12,minmax(58px,1fr));gap:9px}
.card,.card:nth-child(12n + 1),.card:nth-child(12n + 8),.card:nth-child(24n + 1){grid-column:span 1;grid-row:span 1;min-height:82px;aspect-ratio:1;background:linear-gradient(145deg,#211b12,#090806);border-color:#66502b;display:grid;place-items:center;overflow:hidden}
.card img{width:45px;height:45px;object-fit:contain;image-rendering:auto;filter:drop-shadow(0 4px 9px #000);transform:none}
.card:hover{transform:translateY(-3px);border-color:#e1b65d;background:linear-gradient(145deg,#3a2b16,#130e08);box-shadow:0 10px 28px #000a,0 0 18px #d8a54838}
.card:hover img{transform:scale(1.12)}
.card:before{top:5px;left:6px;padding:0;background:none;border:0;color:#a98c59;font-size:7px}
.card:after{display:none}
.hover-preview{position:fixed;z-index:120;left:0;top:0;pointer-events:none;opacity:0;visibility:hidden;width:220px;padding:8px;background:#090806f2;border:1px solid #d5a84c;box-shadow:0 24px 65px #000,0 0 25px #b9802738;transition:opacity .16s,visibility .16s;will-change:transform}
.hover-preview.show{opacity:1;visibility:visible}
.hover-preview img{display:block;width:100%;max-height:470px;object-fit:contain;background:#030302}
.hover-preview span{display:block;padding:10px 8px 5px;color:#f3d99c;text-align:center;font-size:12px;letter-spacing:.18em}
.character-section{padding:130px clamp(20px,5vw,90px);background:linear-gradient(#080706d6,#080706ef);color:#eee}
.character-grid{max-width:1440px;margin:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.character-grid figure{margin:0;position:relative;overflow:hidden;background:#030302;border:1px solid #684f26;box-shadow:0 22px 55px #0008}
.character-grid figure:before{content:"";position:absolute;z-index:2;inset:8px;border:1px solid #b98a3e4f;pointer-events:none}
.character-grid img{display:block;width:100%;height:auto;object-fit:contain}
.character-grid figcaption{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:70px 22px 24px;background:linear-gradient(transparent,#050403f5);display:flex;flex-direction:column;gap:6px}
.character-grid figcaption b{color:#f0cd85;font-size:20px;letter-spacing:.15em}.character-grid figcaption span{color:#9c8e78;font-size:11px;letter-spacing:.16em}
@media(min-width:1680px){.gallery{grid-template-columns:repeat(15,minmax(58px,1fr))}}
@media(max-width:1280px){.gallery{grid-template-columns:repeat(10,minmax(58px,1fr))}.character-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){.gallery{grid-template-columns:repeat(6,minmax(44px,1fr));gap:7px}.card,.card:nth-child(12n + 1),.card:nth-child(12n + 8),.card:nth-child(24n + 1),.card:nth-child(15n + 1){grid-column:span 1;grid-row:span 1;min-height:64px}.card img{width:42px;height:42px}.hover-preview{display:none}.character-grid{grid-template-columns:1fr 1fr;gap:9px}.character-section{padding:90px 12px}.character-grid figcaption{padding:48px 12px 14px}.character-grid figcaption b{font-size:14px}}
@media(max-width:480px){.gallery{grid-template-columns:repeat(5,minmax(44px,1fr))}.character-grid{grid-template-columns:1fr}}

/* User-supplied fixed base artwork; content scrolls independently above it */
.page-backdrop{background:#dce8ed}
.page-backdrop img{display:block;width:100%;height:100%;object-fit:cover;object-position:center bottom;filter:saturate(.92) contrast(1.04)}
.page-backdrop-shade{background:linear-gradient(90deg,rgba(7,12,20,.38),rgba(255,255,255,.04) 48%,rgba(7,12,20,.28)),linear-gradient(0deg,rgba(8,8,7,.42),transparent 46%,rgba(18,31,54,.22))}
.hero{background:linear-gradient(0deg,rgba(7,8,8,.48),rgba(5,9,15,.14))}
.gallery-section{background-color:rgba(8,7,5,.68);background-image:linear-gradient(rgba(7,6,5,.62),rgba(7,6,5,.76))}
.gallery-section.treasure{background-color:rgba(238,231,216,.82);background-image:linear-gradient(rgba(244,239,228,.78),rgba(229,219,201,.86))}
.character-section{background:linear-gradient(rgba(8,7,6,.66),rgba(8,7,6,.80))}
.cta{background:linear-gradient(rgba(7,6,5,.48),rgba(7,6,5,.72))}
@media(max-width:800px){.page-backdrop img{object-position:54% bottom}.page-backdrop-shade{background:linear-gradient(rgba(7,12,20,.18),rgba(8,8,7,.48))}}
@media(prefers-reduced-motion:reduce){.page-backdrop{background:#dce8ed}.page-backdrop img{display:block}}

/* Equipment sections share the same fixed 1111.bmp base plate */
.page-backdrop-shade{background:linear-gradient(90deg,rgba(12,28,52,.15),rgba(255,255,255,0) 50%,rgba(12,28,52,.12)),linear-gradient(0deg,rgba(20,15,8,.18),transparent 55%,rgba(18,31,54,.10))}
.gallery-section,.gallery-section.treasure{background:rgba(245,247,240,.24);background-image:none;color:#291f17;border-top:1px solid rgba(112,86,44,.22);border-bottom:1px solid rgba(112,86,44,.22);box-shadow:inset 0 28px 80px rgba(255,255,255,.12)}
.gallery-section .section-head.light h2,.gallery-section .section-head h2{color:#2b2119;text-shadow:0 1px 0 rgba(255,255,255,.7)}
.gallery-section .section-head.light span,.gallery-section .section-head span{color:#6e5742}
.gallery-section .section-head p{color:#8e5c24}
.gallery-section .catalog-mark{color:#7c281d}
@media(max-width:800px){.gallery-section,.gallery-section.treasure{background:rgba(245,247,240,.32)}}

/* Introduction section now reveals the same fixed 1111.bmp plate */
.world{background:rgba(246,244,235,.22);background-image:none;box-shadow:none;border-top:1px solid rgba(112,86,44,.18);border-bottom:1px solid rgba(112,86,44,.18)}
.world-grid{box-shadow:0 30px 90px rgba(35,27,16,.18)}
.manifesto{background:rgba(250,247,238,.78);backdrop-filter:blur(5px)}
.world-art{background:rgba(250,247,238,.20);backdrop-filter:blur(1px);border:1px solid rgba(125,92,52,.28)}
@media(max-width:800px){.world{background:rgba(246,244,235,.30)}.manifesto{background:rgba(250,247,238,.84)}.world-art{min-height:300px;background:rgba(250,247,238,.10)}}

/* Season III content fills the introduction panel without hiding the base artwork */
.world-art{padding:clamp(34px,4vw,68px);display:flex;flex-direction:column;justify-content:space-between;gap:42px;color:#251c16}
.world-chapter{max-width:520px}.world-chapter small{color:#8f5925;font:10px Arial,sans-serif;letter-spacing:.36em}.world-chapter h3{margin:15px 0 18px;font-size:clamp(36px,4vw,62px);line-height:1.05;letter-spacing:.12em;color:#542219}.world-chapter p{max-width:460px;margin:0;font-size:14px;line-height:2;color:#5e5045;letter-spacing:.06em}
.feature-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}.feature-list article{display:flex;align-items:center;gap:14px;padding:16px;background:rgba(251,248,238,.72);border:1px solid rgba(117,80,43,.24);backdrop-filter:blur(4px);transition:.3s}.feature-list article:hover{transform:translateY(-3px);background:rgba(255,252,244,.90);border-color:#9e652d}.feature-list i{flex:0 0 38px;height:38px;display:grid;place-items:center;background:#7d2119;color:#f8e7be;font-style:normal;font-size:17px;box-shadow:0 7px 18px rgba(96,28,20,.22)}.feature-list div{display:flex;flex-direction:column;gap:4px}.feature-list b{font-size:14px;letter-spacing:.12em;color:#38241b}.feature-list span{font-size:10px;color:#806f60;line-height:1.5}
@media(max-width:980px){.feature-list{grid-template-columns:1fr}.world-art{min-height:620px}}
@media(max-width:800px){.world-art{min-height:560px;padding:34px 24px}.feature-list{grid-template-columns:1fr 1fr}.feature-list article{padding:11px;gap:9px}.feature-list i{flex-basis:32px;height:32px}.feature-list span{display:none}}
@media(max-width:480px){.feature-list{grid-template-columns:1fr}.feature-list span{display:block}}

/* Gameplay and recharge information */
.gameplay-section{padding:120px clamp(20px,5vw,90px);color:#2b2119;background:rgba(244,246,239,.28);border-bottom:1px solid rgba(112,86,44,.22)}
.gameplay-layout{max-width:1500px;margin:auto;display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,.65fr);gap:18px}.play-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.play-grid article{position:relative;min-height:220px;padding:34px;background:rgba(250,247,238,.76);border:1px solid rgba(112,78,39,.25);backdrop-filter:blur(5px);overflow:hidden;transition:.3s}.play-grid article:hover{transform:translateY(-4px);background:rgba(255,252,243,.90);border-color:#a46a30}.play-grid em{position:absolute;right:18px;top:14px;color:#bfa98a;font:11px Arial;letter-spacing:.2em}.play-grid i{display:grid;place-items:center;width:46px;height:46px;margin-bottom:24px;background:#772018;color:#f6e1b1;font-style:normal;font-size:21px;box-shadow:0 9px 24px rgba(102,29,21,.23)}.play-grid h3{margin:0 0 12px;font-size:21px;letter-spacing:.16em}.play-grid p{margin:0;color:#756354;font-size:13px;line-height:1.9}.recharge-card{position:relative;padding:42px;background:linear-gradient(145deg,rgba(42,25,17,.94),rgba(14,11,8,.96));border:1px solid #a87839;color:#eadfc9;box-shadow:0 24px 65px rgba(24,16,8,.25)}.recharge-card:before{content:"";position:absolute;inset:10px;border:1px solid rgba(211,167,83,.28);pointer-events:none}.recharge-card small{color:#cda24c;font:10px Arial;letter-spacing:.36em}.recharge-card h3{font-size:34px;margin:16px 0 30px;letter-spacing:.2em}.rate{padding:24px 0;border-top:1px solid rgba(207,163,79,.28);border-bottom:1px solid rgba(207,163,79,.28);display:flex;flex-direction:column;gap:9px}.rate span{font-size:11px;color:#9e8b6d;letter-spacing:.2em}.rate strong{color:#f1cf83;font-size:24px;letter-spacing:.08em}.recharge-card ul{margin:26px 0;padding-left:18px;color:#a99b86;font-size:12px;line-height:2}.recharge-card a{position:relative;display:block;padding:15px;text-align:center;background:#8f2119;border:1px solid #c85a43;color:#fff0cb;font-size:13px;letter-spacing:.2em;transition:.3s}.recharge-card a:hover{background:#aa2a20;transform:translateY(-2px)}
@media(max-width:1000px){.gameplay-layout{grid-template-columns:1fr}.recharge-card{max-width:none}}
@media(max-width:650px){.gameplay-section{padding:86px 16px}.play-grid{grid-template-columns:1fr}.play-grid article{min-height:190px;padding:28px}.recharge-card{padding:34px 28px}.rate strong{font-size:20px}}

/* Official Season III launch benefits */
.benefit-banner{max-width:1500px;margin:0 auto 18px;padding:22px 26px;display:grid;grid-template-columns:240px 1fr;align-items:center;gap:26px;background:linear-gradient(110deg,rgba(100,25,18,.96),rgba(35,19,13,.94));border:1px solid #c28b42;color:#f2e2bf;box-shadow:0 20px 55px rgba(40,20,10,.20)}
.benefit-title{display:flex;flex-direction:column;gap:7px;padding-right:24px;border-right:1px solid rgba(225,181,97,.32)}.benefit-title small{font:9px Arial;letter-spacing:.3em;color:#d9a851}.benefit-title strong{font-size:23px;letter-spacing:.15em}.benefit-banner ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.benefit-banner li{display:flex;flex-direction:column;gap:5px}.benefit-banner li b{font-size:18px;color:#f4cf7e;letter-spacing:.08em}.benefit-banner li span{font-size:11px;color:#baaa93;letter-spacing:.06em}
.rate em{display:inline-flex;align-self:flex-start;margin-top:5px;padding:7px 10px;background:#8e2018;color:#ffe4a5;border:1px solid #c9563e;font-style:normal;font-size:12px;letter-spacing:.10em}.recharge-card h3{font-size:30px}.recharge-card ul{line-height:1.8}
@media(max-width:1050px){.benefit-banner{grid-template-columns:1fr}.benefit-title{padding:0 0 18px;border-right:0;border-bottom:1px solid rgba(225,181,97,.32)}.benefit-banner ul{grid-template-columns:1fr 1fr;gap:18px}}
@media(max-width:520px){.benefit-banner{padding:22px 20px}.benefit-banner ul{grid-template-columns:1fr 1fr}.benefit-banner li b{font-size:16px}.benefit-banner li span{font-size:10px}.benefit-title strong{font-size:20px}}

/* Uniform transparent equipment tiles */
.gallery .card,.gallery .card:nth-child(12n + 1),.gallery .card:nth-child(12n + 8),.gallery .card:nth-child(24n + 1),.treasure .card{background:transparent!important;background-image:none!important;border-color:rgba(91,64,31,.28);box-shadow:none}
.gallery .card:hover,.treasure .card:hover{background:rgba(255,255,255,.18)!important;border-color:#a46b2e;box-shadow:0 10px 24px rgba(43,27,12,.16)}
.gallery .card img{filter:drop-shadow(0 5px 8px rgba(0,0,0,.42))}

/* Experimental manga-cinematic hero */
.hero{--mx:0px;--my:0px}.comic-stage{position:absolute;z-index:-1;inset:0;overflow:hidden;pointer-events:none}.comic-panel{position:absolute;inset:-5%;background-repeat:no-repeat;background-size:cover;opacity:.56;filter:saturate(.7) contrast(1.22);transition:transform .18s ease-out}.comic-left{right:44%;background-image:linear-gradient(90deg,rgba(4,4,3,.2),rgba(4,4,3,.92)),url("../images/bg_03.jpg");background-position:left center;clip-path:polygon(0 0,100% 0,78% 100%,0 100%);transform:translate(calc(var(--mx) * -.35),calc(var(--my) * -.22)) scale(1.05)}.comic-right{left:55%;background-image:linear-gradient(270deg,rgba(4,4,3,.18),rgba(4,4,3,.90)),url("../images/bg_04.jpg");background-position:right center;clip-path:polygon(22% 0,100% 0,100% 100%,0 100%);transform:translate(calc(var(--mx) * .35),calc(var(--my) * .22)) scale(1.05)}.comic-stage:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 48%,transparent 0 18%,rgba(4,3,2,.28) 48%,rgba(4,3,2,.78) 100%),repeating-linear-gradient(112deg,transparent 0 48px,rgba(244,204,114,.035) 49px 50px)}.slash{position:absolute;z-index:2;left:50%;top:50%;width:72vw;height:2px;background:linear-gradient(90deg,transparent,#fff1b8 40%,#d6962e 54%,transparent);box-shadow:0 0 10px #ffe4a5,0 0 30px #cc7e15;transform-origin:center;opacity:.72;animation:slashPulse 3.4s ease-in-out infinite}.slash-one{transform:translate(-50%,-50%) rotate(-13deg)}.slash-two{transform:translate(-50%,-50%) rotate(18deg);width:52vw;animation-delay:-1.7s}.energy-ring{position:absolute;z-index:2;left:50%;top:49%;width:min(48vw,680px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(235,187,88,.35);box-shadow:inset 0 0 55px rgba(201,132,30,.13),0 0 55px rgba(201,132,30,.16);transform:translate(-50%,-50%);animation:ringBreath 4s ease-in-out infinite}.energy-ring:before,.energy-ring:after{content:"";position:absolute;border-radius:50%;border:1px dashed rgba(246,214,142,.25);inset:8%;animation:spin 20s linear infinite}.energy-ring:after{inset:21%;animation-direction:reverse;animation-duration:13s}.spark-field i{position:absolute;z-index:3;width:4px;height:4px;background:#ffd980;box-shadow:0 0 12px #f0a52c;border-radius:50%;animation:spark 4s ease-in-out infinite}.spark-field i:nth-child(1){left:18%;top:28%}.spark-field i:nth-child(2){left:31%;top:73%;animation-delay:-1s}.spark-field i:nth-child(3){left:74%;top:24%;animation-delay:-2.2s}.spark-field i:nth-child(4){left:82%;top:66%;animation-delay:-.7s}.spark-field i:nth-child(5){left:44%;top:19%;animation-delay:-3s}.spark-field i:nth-child(6){left:59%;top:78%;animation-delay:-1.8s}.hero-content{position:relative;z-index:4}.hero h1{filter:drop-shadow(0 18px 20px #000)}
@keyframes slashPulse{0%,100%{opacity:.28;filter:blur(1px)}50%{opacity:.9;filter:blur(0)}}@keyframes ringBreath{0%,100%{opacity:.35;transform:translate(-50%,-50%) scale(.94)}50%{opacity:.75;transform:translate(-50%,-50%) scale(1.04)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes spark{0%,100%{opacity:.15;transform:translateY(15px) scale(.6)}50%{opacity:1;transform:translateY(-20px) scale(1.4)}}
@media(max-width:800px){.comic-left{right:35%}.comic-right{left:58%}.comic-panel{opacity:.42}.energy-ring{width:82vw}.slash{width:110vw}}
@media(prefers-reduced-motion:reduce){.slash,.energy-ring,.energy-ring:before,.energy-ring:after,.spark-field i{animation:none}.comic-panel{transform:scale(1.05)}}

/* First user-supplied manga panel */
.comic-right{left:57%;background-color:#15100e;background-image:linear-gradient(270deg,rgba(4,3,3,.08),rgba(8,5,3,.20) 55%,rgba(5,4,3,.96)),url("../images/manga-hero-static.png");background-size:cover,auto 118%;background-position:center,center 34%;opacity:.88;filter:saturate(.94) contrast(1.12) brightness(.82);clip-path:polygon(20% 0,100% 0,100% 100%,0 100%)}
.comic-right:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#080604 0%,transparent 32%),radial-gradient(circle at 63% 45%,rgba(240,104,30,.16),transparent 42%);mix-blend-mode:screen}
.slash-one{background:linear-gradient(90deg,transparent,#fff 34%,#ffb34c 52%,transparent);box-shadow:0 0 12px #fff4d0,0 0 38px #ef7024}
@media(max-width:800px){.comic-right{left:47%;background-size:cover,auto 112%;background-position:center,center 32%;opacity:.74}}

/* Animated sword formation around the manga character */
.blade-orbit{position:absolute;z-index:3;left:77%;top:43%;width:min(34vw,520px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);animation:bladeOrbit 12s linear infinite;filter:drop-shadow(0 0 9px rgba(255,126,38,.72));pointer-events:none}.blade-orbit:before,.blade-orbit:after{content:"";position:absolute;border-radius:50%;inset:16%;border:1px solid rgba(255,145,55,.22);box-shadow:inset 0 0 40px rgba(221,84,25,.09),0 0 34px rgba(239,126,31,.12)}.blade-orbit:after{inset:28%;border-style:dashed}.blade-orbit i{position:absolute;left:calc(50% - 5px);top:-5%;width:10px;height:31%;transform-origin:5px 181%;background:linear-gradient(90deg,#f4c066 0 16%,#fff8d9 18% 48%,#fff 50% 72%,#d98e35 74% 100%);clip-path:polygon(50% 0,100% 18%,70% 100%,30% 100%,0 18%);box-shadow:0 0 9px #fff,0 0 20px #ed7f25}.blade-orbit i:after{content:"";position:absolute;left:-5px;bottom:-9px;width:20px;height:12px;background:#d9a347;border:1px solid #fff0b2;clip-path:polygon(50% 0,100% 40%,75% 100%,25% 100%,0 40%)}.blade-orbit i:nth-child(1){transform:rotate(0deg)}.blade-orbit i:nth-child(2){transform:rotate(36deg)}.blade-orbit i:nth-child(3){transform:rotate(72deg)}.blade-orbit i:nth-child(4){transform:rotate(108deg)}.blade-orbit i:nth-child(5){transform:rotate(144deg)}.blade-orbit i:nth-child(6){transform:rotate(180deg)}.blade-orbit i:nth-child(7){transform:rotate(216deg)}.blade-orbit i:nth-child(8){transform:rotate(252deg)}.blade-orbit i:nth-child(9){transform:rotate(288deg)}.blade-orbit i:nth-child(10){transform:rotate(324deg)}
@keyframes bladeOrbit{0%{transform:translate(-50%,-50%) rotate(0deg)}50%{filter:drop-shadow(0 0 15px rgba(255,126,38,.95))}100%{transform:translate(-50%,-50%) rotate(360deg)}}
@media(max-width:1100px){.blade-orbit{left:78%;width:42vw}}
@media(max-width:800px){.blade-orbit{left:74%;top:42%;width:62vw;opacity:.72}.blade-orbit i{height:27%;transform-origin:5px 205%}}
@media(prefers-reduced-motion:reduce){.blade-orbit{animation:none}}

/* Radial placement for each independent blade */
.blade-orbit i{top:50%;transform-origin:50% 0}
.blade-orbit i:nth-child(1){transform:rotate(0deg) translateY(-150%)}.blade-orbit i:nth-child(2){transform:rotate(36deg) translateY(-150%)}.blade-orbit i:nth-child(3){transform:rotate(72deg) translateY(-150%)}.blade-orbit i:nth-child(4){transform:rotate(108deg) translateY(-150%)}.blade-orbit i:nth-child(5){transform:rotate(144deg) translateY(-150%)}.blade-orbit i:nth-child(6){transform:rotate(180deg) translateY(-150%)}.blade-orbit i:nth-child(7){transform:rotate(216deg) translateY(-150%)}.blade-orbit i:nth-child(8){transform:rotate(252deg) translateY(-150%)}.blade-orbit i:nth-child(9){transform:rotate(288deg) translateY(-150%)}.blade-orbit i:nth-child(10){transform:rotate(324deg) translateY(-150%)}
@media(max-width:800px){.blade-orbit i{transform-origin:50% 0}}

/* Equipment index labels removed by request */
.gallery .card:before,.treasure .card:before{display:none!important;content:none!important}

/* Normalize differently sized source detail images */
.hover-preview{width:240px}
.hover-preview img{display:block;width:100%;height:440px;max-height:none;object-fit:contain;object-position:center;background:#030302}
.hover-preview span{min-height:36px;display:flex;align-items:center;justify-content:center}

/* Rotate the swords from the supplied artwork instead of synthetic blades */
.blade-orbit{display:none}
.comic-left{clip-path:none;-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 62%,transparent 100%);mask-image:linear-gradient(90deg,#000 0%,#000 62%,transparent 100%)}
.comic-right{clip-path:none;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 100%)}
.comic-right:before{content:"";position:absolute;z-index:3;inset:0;background:url("../images/manga-hero-01.png") center 34%/auto 118% no-repeat;-webkit-mask-image:radial-gradient(circle at 50% 43%,transparent 0 23%,#000 27% 49%,transparent 53%);mask-image:radial-gradient(circle at 50% 43%,transparent 0 23%,#000 27% 49%,transparent 53%);transform-origin:50% 43%;animation:sourceSwordOrbit 13s linear infinite;filter:brightness(1.12) saturate(1.08) drop-shadow(0 0 7px rgba(255,129,35,.72))}.comic-right:after{content:"";position:absolute;z-index:2;inset:0;background:radial-gradient(circle at 50% 43%,transparent 0 22%,rgba(8,5,4,.62) 28% 48%,transparent 54%);mix-blend-mode:multiply}.hero-content{left:-13vw}.hero h1{font-size:clamp(74px,9vw,148px)}
@keyframes sourceSwordOrbit{to{transform:rotate(360deg)}}
@media(max-width:1100px){.hero-content{left:-8vw}.comic-right:before{background-size:auto 112%;background-position:center 32%}}
@media(max-width:800px){.hero-content{left:0}.comic-left{opacity:.22}.comic-right{-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 12%);mask-image:linear-gradient(90deg,transparent 0%,#000 12%)}.comic-right:before{background-size:auto 112%;background-position:center 32%;-webkit-mask-image:radial-gradient(circle at 50% 42%,transparent 0 23%,#000 27% 49%,transparent 53%);mask-image:radial-gradient(circle at 50% 42%,transparent 0 23%,#000 27% 49%,transparent 53%);transform-origin:50% 42%}}
@media(prefers-reduced-motion:reduce){.comic-right:before{animation:none}}

/* All light effects share the sword formation's visual center */
.comic-right:before{background-position:center 34%;-webkit-mask-image:radial-gradient(circle at 50% 36%,transparent 0 22%,#000 26% 50%,transparent 54%);mask-image:radial-gradient(circle at 50% 36%,transparent 0 22%,#000 26% 50%,transparent 54%);transform-origin:50% 36%}.comic-right:after{background:radial-gradient(circle at 50% 36%,transparent 0 21%,rgba(8,5,4,.62) 27% 49%,transparent 55%)}
.energy-ring{left:81%;top:36%;width:min(38vw,620px);border-color:rgba(255,149,55,.28);box-shadow:inset 0 0 60px rgba(227,85,26,.11),0 0 52px rgba(247,137,37,.15)}
.slash{left:81%;top:36%;width:min(43vw,700px)}.slash-two{width:min(32vw,520px)}
@media(max-width:1100px){.energy-ring,.slash{left:79%;top:36%}}
@media(max-width:800px){.comic-right:before{background-position:center 32%;-webkit-mask-image:radial-gradient(circle at 50% 35%,transparent 0 22%,#000 26% 50%,transparent 54%);mask-image:radial-gradient(circle at 50% 35%,transparent 0 22%,#000 26% 50%,transparent 54%);transform-origin:50% 35%}.comic-right:after{background:radial-gradient(circle at 50% 35%,transparent 0 21%,rgba(8,5,4,.58) 27% 49%,transparent 55%)}.energy-ring,.slash{left:73%;top:35%}.energy-ring{width:70vw}.slash{width:78vw}.slash-two{width:58vw}}

/* Clean fallback: keep the supplied manga art intact without misaligned overlays */
.comic-right:before,.comic-right:after,.energy-ring,.slash,.spark-field{display:none!important}
.comic-right{filter:saturate(.96) contrast(1.08) brightness(.86)}

.gallery .custom-equipment{border-color:rgba(178,52,27,.62);box-shadow:inset 0 0 20px rgba(185,51,23,.12)}
.gallery .custom-equipment:hover{border-color:#e0522f;box-shadow:0 10px 28px rgba(157,40,20,.28),inset 0 0 20px rgba(206,62,29,.16)}

/* Keep the supplied manga completely still; rotate only its repaired original sword-light ring. */
.comic-left,.comic-right{
  transform:none!important;
  transition:none!important;
}

/* 特色 PK 商店：替换原剧情宣言区，突出获取方式与防刷规则。 */
.pk-manifesto{
  min-height:570px;
  padding:clamp(34px,3.6vw,58px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.pk-manifesto .seal{
  top:-28px;
  right:24px;
  padding:13px 11px;
  line-height:1.05;
}
.pk-kicker{
  color:#a06a27;
  font-size:10px;
  font-weight:700;
  letter-spacing:.3em;
}
.pk-manifesto h3{
  margin:12px 0 15px;
  color:#72261e;
  font-family:"Microsoft YaHei","Noto Serif SC",serif;
  font-size:clamp(34px,3vw,48px);
  line-height:1.12;
  letter-spacing:.1em;
}
.pk-manifesto .pk-lead{
  margin:0 0 18px;
  color:#504238;
  font-size:14px;
  line-height:1.9;
}
.pk-rules{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin:0;
  padding:0;
  list-style:none;
}
.pk-rules li{
  padding:11px 12px;
  background:rgba(255,252,244,.72);
  border:1px solid rgba(124,82,39,.22);
  border-left:3px solid #8e261d;
}
.pk-rules li.wide{grid-column:1/-1}
.pk-rules b{
  display:block;
  margin-bottom:5px;
  color:#74251d;
  font-size:12px;
  letter-spacing:.12em;
}
.pk-rules span{
  display:block;
  color:#66574b;
  font-size:11px;
  line-height:1.7;
}
.pk-example{
  margin-top:12px;
  padding:12px 14px;
  background:linear-gradient(135deg,rgba(119,34,25,.09),rgba(166,113,42,.08));
  border:1px solid rgba(122,48,29,.28);
}
.pk-example>b{
  color:#8b291f;
  font-size:12px;
  letter-spacing:.14em;
}
.pk-manifesto .pk-example p{
  margin:5px 0 0;
  color:#5a493d;
  font-size:11px;
  line-height:1.75;
}
@media(max-width:980px){
  .pk-manifesto{min-height:auto}
  .pk-rules{grid-template-columns:1fr}
  .pk-rules li.wide{grid-column:auto}
}
.comic-right:before,.comic-right:after,.comic-stage .slash,
.comic-stage .energy-ring,.comic-stage .spark-field{
  display:none!important;
}
.comic-stage .blade-orbit{
  display:block!important;
  z-index:1;
  left:76%;
  top:44%;
  width:auto;
  height:min(78%,660px);
  aspect-ratio:1;
  border-radius:0;
  opacity:.7;
  overflow:visible;
  transform:translate(-50%,-50%);
  filter:none;
  animation:none!important;
}
.comic-stage .blade-orbit:before,.comic-stage .blade-orbit:after,
.comic-stage .blade-orbit i{display:none!important}
.comic-stage .blade-orbit img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  transform-origin:50% 50%;
  mix-blend-mode:normal;
  -webkit-mask-image:none;
  mask-image:none;
  animation:swordRingRotate 14s linear infinite;
}
@keyframes swordRingRotate{
  0%{transform:rotate(0deg);filter:brightness(.9) drop-shadow(0 0 3px rgba(255,244,210,.5)) drop-shadow(0 0 9px rgba(190,94,24,.38))}
  50%{filter:brightness(1.04) drop-shadow(0 0 5px rgba(255,249,226,.66)) drop-shadow(0 0 13px rgba(190,94,24,.5))}
  100%{transform:rotate(360deg);filter:brightness(.9) drop-shadow(0 0 3px rgba(255,244,210,.5)) drop-shadow(0 0 9px rgba(190,94,24,.38))}
}
@media(max-width:800px){
  .comic-stage .blade-orbit{left:73%;top:42%;height:min(65vw,520px);transform:translate(-50%,-50%);opacity:.6}
  .comic-stage .blade-orbit img{transform-origin:50% 50%}
}
@media(prefers-reduced-motion:reduce){
  .comic-stage .blade-orbit img{animation:none!important}
}

/* Featured gameplay: casino and twelve-manual collection */
.special-gameplay{
  position:relative;
  padding:120px clamp(18px,5vw,86px);
  color:#eee3cc;
  background:linear-gradient(180deg,rgba(9,8,6,.9),rgba(18,12,8,.82));
  border-top:1px solid rgba(205,157,72,.34);
  border-bottom:1px solid rgba(205,157,72,.34);
}
.special-gameplay:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 18% 20%,rgba(154,34,24,.2),transparent 32%),radial-gradient(circle at 82% 70%,rgba(205,146,49,.12),transparent 34%);
}
.special-gameplay-grid{position:relative;max-width:1540px;margin:auto;display:grid;gap:24px}
.feature-game-card{
  position:relative;
  display:grid;
  grid-template-columns:minmax(290px,.72fr) minmax(460px,1.28fr);
  gap:clamp(24px,4vw,60px);
  align-items:center;
  padding:clamp(24px,3vw,46px);
  overflow:hidden;
  background:linear-gradient(120deg,rgba(38,25,17,.96),rgba(8,8,7,.94));
  border:1px solid rgba(205,157,72,.48);
  box-shadow:0 30px 80px rgba(0,0,0,.42),inset 0 0 60px rgba(190,122,36,.05);
}
.feature-game-card:before{content:"";position:absolute;inset:10px;border:1px solid rgba(216,170,85,.16);pointer-events:none}
.feature-game-copy{position:relative;z-index:2}
.feature-game-copy small{color:#d3a453;font:10px Arial,sans-serif;letter-spacing:.34em}
.feature-game-copy h3{margin:16px 0 20px;color:#f3d99b;font-size:clamp(27px,3vw,44px);letter-spacing:.12em}
.feature-game-copy p{margin:0;color:#b7aa94;font-size:14px;line-height:2;letter-spacing:.05em}
.feature-game-copy ul{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:9px}
.feature-game-copy li{display:grid;grid-template-columns:88px 1fr;gap:12px;padding:10px 12px;background:rgba(255,255,255,.035);border-left:2px solid #a9271e}
.feature-game-copy li b{color:#efc56f;font-size:12px}.feature-game-copy li span{color:#948875;font-size:11px;line-height:1.6}
.feature-shot-button{position:relative;z-index:2;display:block;width:100%;padding:0;border:1px solid rgba(214,169,79,.48);background:#050504;cursor:zoom-in;overflow:hidden;box-shadow:0 20px 55px #0009;transition:.35s}
.feature-shot-button img{display:block;width:100%;height:auto;transition:transform .6s,filter .4s}
.feature-shot-button span{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 14px;background:linear-gradient(transparent,rgba(3,3,2,.92));color:#e4c47f;font-size:11px;letter-spacing:.18em;transform:translateY(8px);opacity:0;transition:.3s}
.feature-shot-button:hover{border-color:#e3b658;transform:translateY(-3px)}.feature-shot-button:hover img{transform:scale(1.018);filter:brightness(1.08)}.feature-shot-button:hover span{opacity:1;transform:none}
.manuals-card{grid-template-columns:minmax(250px,.55fr) minmax(520px,1.45fr)}
.parchment-shot{position:relative}
.parchment-shot:hover img{transform:none}
.parchment-full-open{position:absolute;z-index:1;inset:0;padding:0;border:0;background:transparent;cursor:zoom-in}
.manual-hotspot{position:absolute;z-index:4;left:var(--x);top:var(--y);width:5.4%;aspect-ratio:1;transform:translate(-50%,-50%);padding:0;border:1px solid transparent;border-radius:50%;background:rgba(255,211,104,0);cursor:help;transition:.22s}
.manual-hotspot:hover,.manual-hotspot:focus-visible{transform:translate(-50%,-50%) scale(1.12);border-color:#ffd56d;background:radial-gradient(circle,rgba(255,235,154,.08) 35%,rgba(255,198,67,.22) 62%,transparent 72%);box-shadow:0 0 7px #fff5c4,0 0 17px #d48422;outline:0}
.parchment-shot>span{z-index:2;pointer-events:none}
.hover-preview.manual-mode{width:min(280px,calc(100vw - 24px));padding:7px}
.hover-preview.manual-mode img{width:100%;height:auto;max-height:none;object-fit:contain;background:#030302}
.hover-preview.manual-mode span{min-height:32px;padding:8px 6px 3px}
@media(max-width:1050px){.feature-game-card,.manuals-card{grid-template-columns:1fr}.feature-game-copy{max-width:760px}}
@media(max-width:620px){.special-gameplay{padding:88px 12px}.feature-game-card{padding:24px 15px;gap:24px}.feature-game-copy li{grid-template-columns:76px 1fr}.feature-shot-button>span{display:none}.manual-hotspot{width:6.2%}}

/* Fifth character set: original captured frames, cropped to the existing card size. */
.animated-equipment{grid-column:2/4;width:calc(50% - 9px);justify-self:center}
.equipment-frame-sequence{position:relative;display:block;width:100%;aspect-ratio:590/748;overflow:hidden;background:#000}
.character-grid .equipment-frame-sequence>.equipment-base{
  position:absolute;
  z-index:0;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:1;
  transform:none;
}
.character-grid .equipment-frame-sequence>.equipment-card-logo{
  position:absolute;
  z-index:1;
  left:50%;
  top:2.8%;
  display:block;
  width:78%;
  height:auto;
  object-fit:contain;
  transform:translateX(-50%);
  pointer-events:none;
}
.weapon-effect-sequence{position:absolute;z-index:2;inset:0;display:block;pointer-events:none}
.character-grid .weapon-effect-sequence img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:0;
  transform:none;
  animation:equipmentFramePlayback 1.12s steps(1,end) infinite;
}
.weapon-effect-sequence img:nth-child(1){animation-delay:0s}
.weapon-effect-sequence img:nth-child(2){animation-delay:-.98s}
.weapon-effect-sequence img:nth-child(3){animation-delay:-.84s}
.weapon-effect-sequence img:nth-child(4){animation-delay:-.70s}
.weapon-effect-sequence img:nth-child(5){animation-delay:-.56s}
.weapon-effect-sequence img:nth-child(6){animation-delay:-.42s}
.weapon-effect-sequence img:nth-child(7){animation-delay:-.28s}
.weapon-effect-sequence img:nth-child(8){animation-delay:-.14s}
@keyframes equipmentFramePlayback{0%,12.4%{opacity:1}12.5%,100%{opacity:0}}
@media(max-width:1280px){.animated-equipment{grid-column:1/3;width:calc(50% - 9px)}}
@media(max-width:480px){.animated-equipment{grid-column:auto;width:100%}}
@media(prefers-reduced-motion:reduce){.character-grid .weapon-effect-sequence img{display:none;animation:none}}

/* Recharge surprise panel: make every threshold and reward unmistakable. */
.recharge-card .rate{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:28px 24px 24px;
  gap:0;
  border:1px solid rgba(235,180,76,.58);
  background:radial-gradient(circle at 84% 22%,rgba(255,179,51,.22),transparent 34%),linear-gradient(145deg,rgba(92,28,16,.72),rgba(26,16,10,.92));
  box-shadow:inset 0 0 34px rgba(255,160,43,.08),0 12px 34px rgba(0,0,0,.3),0 0 28px rgba(217,111,29,.12);
}
.recharge-card .rate:before{content:"";position:absolute;z-index:-1;top:-50%;bottom:-50%;left:-45%;width:28%;transform:rotate(17deg);background:linear-gradient(90deg,transparent,rgba(255,242,184,.2),rgba(255,255,255,.4),transparent);filter:blur(2px);animation:rateShine 4.2s ease-in-out infinite}
.recharge-card .rate:after{content:"✦";position:absolute;right:17px;top:15px;color:#ffe39a;font-size:20px;text-shadow:0 0 8px #fff,0 0 22px #ff9e2d;animation:rewardSpark 1.8s ease-in-out infinite}
.rate-trigger{display:flex;align-items:center;gap:9px;padding-bottom:15px;border-bottom:1px solid rgba(236,181,81,.25)}
.rate-trigger span{color:#d8c19c;font-size:11px;letter-spacing:.14em}
.rate-trigger b{display:inline-flex;align-items:baseline;color:#fff0b0;font:800 27px/1 Arial,sans-serif;text-shadow:0 0 16px rgba(255,177,48,.56)}
.rate-trigger b i{margin-right:2px;color:#e8a83c;font-size:14px;font-style:normal}
.rate-trigger small{margin-left:auto;padding:5px 7px;background:#a52b1d;border:1px solid #df6240;color:#ffe8b0!important;font:9px/1 Arial,sans-serif!important;letter-spacing:.14em!important;box-shadow:0 0 15px rgba(197,52,28,.38)}
.recharge-card .rate strong{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:20px 0 17px;line-height:1}
.recharge-card .rate strong small{margin-bottom:8px;color:#e3c48a;font:10px/1 Arial,sans-serif;letter-spacing:.28em}
.recharge-card .rate strong mark{color:#fff2b7;background:linear-gradient(180deg,#fff7ce 0%,#ffd66f 42%,#ef9b29 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;font:900 clamp(39px,4vw,60px)/.96 Arial,sans-serif;letter-spacing:-.035em;filter:drop-shadow(0 3px 0 #7f2414) drop-shadow(0 0 13px rgba(255,178,45,.5));animation:rateRewardPulse 2.2s ease-in-out infinite}
.recharge-card .rate em{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;width:100%;margin:0;padding:10px 11px;background:linear-gradient(90deg,#b4281d,#76140f);border:1px solid #df6346;color:#ffe7ac;font-style:normal;box-shadow:0 8px 22px rgba(92,17,10,.34)}
.recharge-card .rate em i{padding:4px 5px;background:#f0b447;color:#4a190d;font:900 8px/1 Arial,sans-serif;letter-spacing:.08em}
.recharge-card .rate em span{color:#f4c99a;font-size:10px;letter-spacing:.08em}
.recharge-card .rate em b{color:#fff1a5;font:900 19px/1 Arial,sans-serif;text-shadow:0 0 12px rgba(255,210,90,.55)}
.recharge-card .rate>p{margin:13px 0 0!important;color:#b9a88d!important;font-size:10px!important;line-height:1.5!important;letter-spacing:.12em!important;text-align:center}
.rate-ladder{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:17px;padding-top:13px;border-top:1px solid rgba(235,179,76,.22)}
.rate-ladder:before{content:"";position:absolute;left:8%;right:8%;top:22px;height:2px;background:linear-gradient(90deg,#8f2818,#e2a43e,#ffe083);box-shadow:0 0 10px rgba(255,188,62,.45)}
.rate-ladder span{position:relative;z-index:1;display:flex!important;flex-direction:column;align-items:center;gap:7px;padding-top:17px;color:inherit!important;font-size:inherit!important;letter-spacing:0!important}
.rate-ladder span:before{content:"";position:absolute;top:4px;width:10px;height:10px;border-radius:50%;background:#d4912f;border:2px solid #ffe19a;box-shadow:0 0 9px #ec9d32}
.rate-ladder b{color:#d6c09c;font:700 9px/1 Arial,sans-serif;white-space:nowrap}.rate-ladder i{color:#efb950;font:800 9px/1 Arial,sans-serif;font-style:normal;white-space:nowrap}
.rate-ladder span:last-child:before{width:14px;height:14px;top:2px;background:#a92b1d;box-shadow:0 0 6px #fff0b0,0 0 18px #f0a139;animation:rewardSpark 1.8s ease-in-out infinite}.rate-ladder span:last-child b,.rate-ladder span:last-child i{color:#ffe49b;text-shadow:0 0 10px rgba(255,191,70,.55)}
.recharge-card>a{position:relative;overflow:hidden;display:grid;grid-template-columns:auto auto;align-items:center;justify-content:center;gap:9px;padding:16px 14px;background:linear-gradient(135deg,#bd3424,#76140f 58%,#a42419);border-color:#e26a48;box-shadow:0 10px 28px rgba(122,23,14,.42),0 0 24px rgba(212,74,35,.18);animation:rechargeCtaPulse 2.8s ease-in-out infinite}
.recharge-card>a:before{content:"";position:absolute;top:-50%;bottom:-50%;left:-30%;width:18%;transform:rotate(18deg);background:linear-gradient(90deg,transparent,rgba(255,243,191,.65),transparent);animation:ctaShine 3.6s ease-in-out infinite}
.recharge-card>a b{position:relative;color:#fff3c2;font-size:15px;letter-spacing:.16em}.recharge-card>a span{position:relative;padding-left:9px;border-left:1px solid rgba(255,225,164,.35);color:#e9bd84;font-size:10px;letter-spacing:.08em}
.recharge-card>a:hover{background:linear-gradient(135deg,#d4412d,#8a1a12);transform:translateY(-3px);box-shadow:0 14px 36px rgba(122,23,14,.5),0 0 30px rgba(232,105,47,.32)}
@keyframes rateShine{0%,52%{left:-45%;opacity:0}63%{opacity:1}82%,100%{left:125%;opacity:0}}
@keyframes rateRewardPulse{0%,100%{transform:scale(1);filter:drop-shadow(0 3px 0 #7f2414) drop-shadow(0 0 10px rgba(255,178,45,.4))}50%{transform:scale(1.035);filter:drop-shadow(0 3px 0 #7f2414) drop-shadow(0 0 21px rgba(255,187,52,.78))}}
@keyframes rewardSpark{0%,100%{opacity:.35;transform:scale(.72) rotate(0)}50%{opacity:1;transform:scale(1.18) rotate(35deg)}}
@keyframes ctaShine{0%,58%{left:-30%;opacity:0}68%{opacity:1}86%,100%{left:120%;opacity:0}}
@keyframes rechargeCtaPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.12)}}
@media(max-width:650px){.recharge-card .rate{padding:24px 18px 20px}.recharge-card .rate strong mark{font-size:44px}.rate-trigger small{display:inline-block}.recharge-card .rate em b{font-size:17px}.rate-ladder{gap:2px}.rate-ladder b,.rate-ladder i{font-size:8px}}
@media(prefers-reduced-motion:reduce){.recharge-card .rate:before,.recharge-card .rate:after,.recharge-card .rate strong mark,.rate-ladder span:last-child:before,.recharge-card>a,.recharge-card>a:before{animation:none}}

/* Full-width recharge showcase: the former four gameplay tiles are intentionally removed. */
.gameplay-layout{display:block;max-width:1500px}
.gameplay-layout .recharge-card{
  min-height:560px;
  display:grid;
  grid-template-columns:minmax(240px,.78fr) minmax(430px,1.35fr) minmax(250px,.82fr);
  grid-template-rows:auto 1fr auto;
  grid-template-areas:"eyebrow reward details" "title reward details" "title reward cta";
  column-gap:52px;
  row-gap:24px;
  padding:62px 68px;
  overflow:hidden;
  background:
    radial-gradient(circle at 51% 46%,rgba(167,53,24,.24),transparent 32%),
    linear-gradient(115deg,rgba(26,16,11,.98),rgba(48,24,16,.96) 48%,rgba(15,11,8,.98));
  box-shadow:0 28px 80px rgba(25,13,8,.34),inset 0 0 80px rgba(176,72,31,.07);
}
.gameplay-layout .recharge-card:after{content:"REWARD";position:absolute;left:-24px;bottom:-42px;color:rgba(240,190,94,.035);font:900 154px/1 Arial,sans-serif;letter-spacing:-.07em;pointer-events:none}
.gameplay-layout .recharge-card>small{grid-area:eyebrow;align-self:end;font-size:11px;line-height:1.8}
.gameplay-layout .recharge-card>h3{grid-area:title;align-self:start;margin:4px 0 0;font-size:clamp(39px,3.8vw,64px);line-height:1.18;letter-spacing:.12em;color:#f4dfb6;text-shadow:0 8px 28px rgba(0,0,0,.42)}
.gameplay-layout .recharge-card>h3:after{content:"每满 200 元 · 福利即时生效";display:block;margin-top:25px;color:#b99c74;font:12px/1.8 Arial,"Microsoft YaHei",sans-serif;letter-spacing:.2em}
.gameplay-layout .recharge-card>.rate{grid-area:reward;align-self:stretch;justify-content:center;padding:38px 40px}
.gameplay-layout .recharge-card .rate-trigger{padding-bottom:22px}
.gameplay-layout .recharge-card .rate-trigger span{font-size:13px}
.gameplay-layout .recharge-card .rate-trigger b{font-size:36px}
.gameplay-layout .recharge-card .rate strong{padding:35px 0 28px}
.gameplay-layout .recharge-card .rate strong small{font-size:12px}
.gameplay-layout .recharge-card .rate strong mark{font-size:clamp(64px,6.2vw,96px)}
.gameplay-layout .recharge-card .rate em{padding:15px 17px}
.gameplay-layout .recharge-card .rate em b{font-size:25px}
.gameplay-layout .recharge-card .rate>p{margin-top:19px!important;font-size:11px!important}
.gameplay-layout .rate-ladder{margin-top:25px;padding-top:17px}
.gameplay-layout .rate-ladder:before{top:26px}
.gameplay-layout .rate-ladder b,.gameplay-layout .rate-ladder i{font-size:10px}
.gameplay-layout .recharge-card>ul{grid-area:details;align-self:center;margin:0;padding:24px 0 24px 19px;border-top:1px solid rgba(221,173,82,.24);border-bottom:1px solid rgba(221,173,82,.24);font-size:13px;line-height:2.25}
.gameplay-layout .recharge-card>a{grid-area:cta;align-self:end;padding:19px 16px}
.gameplay-layout .recharge-card>a b{font-size:17px}
@media(max-width:1120px){
  .gameplay-layout .recharge-card{grid-template-columns:minmax(230px,.8fr) minmax(410px,1.25fr);grid-template-rows:auto 1fr auto auto;grid-template-areas:"eyebrow reward" "title reward" "details details" "cta cta";min-height:0;padding:54px;column-gap:38px}
  .gameplay-layout .recharge-card>ul{margin-top:12px}
}
@media(max-width:720px){
  .gameplay-layout .recharge-card{display:flex;flex-direction:column;padding:42px 24px;gap:18px}
  .gameplay-layout .recharge-card>small{align-self:flex-start}
  .gameplay-layout .recharge-card>h3{font-size:36px;margin-bottom:8px}
  .gameplay-layout .recharge-card>.rate{width:100%;padding:28px 18px}
  .gameplay-layout .recharge-card .rate strong mark{font-size:54px}
  .gameplay-layout .recharge-card>ul{width:100%;margin:4px 0 0}
  .gameplay-layout .recharge-card>a{width:100%}
}

/* Three-times points launch bonus. */
.triple-bonus{position:relative;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"tag name audience" "formula formula formula";align-items:center;gap:10px 14px;margin-bottom:24px;padding:18px 20px;background:linear-gradient(105deg,rgba(174,39,25,.95),rgba(106,19,13,.96));border:1px solid #ef7650;box-shadow:0 10px 26px rgba(102,18,12,.38),0 0 24px rgba(229,89,36,.18);overflow:hidden}
.triple-bonus:after{content:"3X";position:absolute;right:-6px;top:-17px;color:rgba(255,225,146,.09);font:900 76px/1 Arial,sans-serif;transform:rotate(-8deg);pointer-events:none}
.triple-bonus>b{grid-area:tag;position:relative;padding:6px 8px;background:#f0b94f;color:#4b180e;font:900 10px/1 Arial,"Microsoft YaHei",sans-serif;letter-spacing:.13em;white-space:nowrap}
.triple-bonus .bonus-name{grid-area:name;position:relative;color:#fff0b2!important;font:900 25px/1 Arial,"Microsoft YaHei",sans-serif!important;letter-spacing:.12em!important;text-shadow:0 0 15px rgba(255,206,92,.42)}
.triple-bonus .bonus-audience{grid-area:audience;position:relative;color:#ffdca0!important;font:11px/1.2 Arial,"Microsoft YaHei",sans-serif!important;letter-spacing:.12em!important;white-space:nowrap}
.triple-bonus>p{grid-area:formula;position:relative;margin:2px 0 0!important;padding-top:12px;border-top:1px solid rgba(255,220,148,.25);color:#fff7d6!important;font:800 18px/1.3 Arial,"Microsoft YaHei",sans-serif!important;letter-spacing:.06em!important;text-align:left!important}
.triple-bonus>p i{padding:0 8px;color:#efb64b;font-style:normal;text-shadow:0 0 10px rgba(255,188,60,.55)}
@media(max-width:720px){.triple-bonus{grid-template-columns:auto 1fr;grid-template-areas:"tag audience" "name name" "formula formula"}.triple-bonus .bonus-name{margin-top:4px;font-size:23px!important}.triple-bonus .bonus-audience{text-align:right}.triple-bonus>p{font-size:15px!important}.triple-bonus>p i{padding:0 3px}}

/* Keep the supplied character still; rotate only the swords extracted from that same manga. */
.comic-right{
  background-image:linear-gradient(270deg,rgba(4,3,3,.08),rgba(8,5,3,.20) 55%,rgba(5,4,3,.96)),url("../images/manga-hero-static.png")!important;
}
.comic-stage .blade-orbit{display:none!important}
.comic-right:before{
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  display:block!important;
  background:url("../images/manga-sword-ring.png") center 34%/auto 118% no-repeat!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  opacity:.82;
  transform-origin:50% 31%;
  filter:brightness(1.02) saturate(1.03) drop-shadow(0 0 7px rgba(255,142,45,.48));
  animation:originalMangaSwordOrbit 16s linear infinite!important;
  pointer-events:none;
}
@keyframes originalMangaSwordOrbit{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.comic-right:before{animation:none!important}}

/* Preserve the original card branding over the replacement ruthless-blade animation. */
.character-grid .ruthless-blade-card>.character-card-logo{position:absolute;z-index:4;left:50%;top:2.5%;display:block;width:69%;height:auto;object-fit:contain;transform:translateX(-50%);mix-blend-mode:screen;pointer-events:none}

/* Fixed foreground occlusion: the sword ring rotates behind the motionless character. */
.comic-right:after{
  content:"";
  position:absolute;
  z-index:3;
  inset:0;
  display:block!important;
  background:url("../images/manga-hero-static.png") center 34%/auto 118% no-repeat!important;
  -webkit-mask-image:radial-gradient(ellipse 31% 70% at 50% 45%,#000 0 65%,rgba(0,0,0,.94) 74%,transparent 84%)!important;
  mask-image:radial-gradient(ellipse 31% 70% at 50% 45%,#000 0 65%,rgba(0,0,0,.94) 74%,transparent 84%)!important;
  mix-blend-mode:normal!important;
  filter:none!important;
  transform:none!important;
  animation:none!important;
  pointer-events:none;
}

/* High-impact official-benefits strip. */
.benefit-banner{position:relative;isolation:isolate;overflow:hidden;grid-template-columns:270px 1fr;gap:30px;min-height:142px;padding:26px 30px;background:radial-gradient(circle at 15% 20%,rgba(205,58,31,.28),transparent 34%),linear-gradient(105deg,#50150f 0%,#28140e 52%,#170f0b 100%);border:2px solid #d69a3d;box-shadow:0 22px 58px rgba(73,23,12,.34),inset 0 0 45px rgba(211,85,36,.08),0 0 22px rgba(214,144,48,.16)}
.benefit-banner:before{content:"";position:absolute;z-index:-1;top:-100%;bottom:-100%;left:-24%;width:16%;transform:rotate(17deg);background:linear-gradient(90deg,transparent,rgba(255,222,140,.12),rgba(255,248,210,.34),transparent);animation:benefitSweep 5.2s ease-in-out infinite}
.benefit-title{position:relative;justify-content:center;gap:9px;padding-right:28px;border-right-color:rgba(243,190,82,.5)}
.benefit-title:after{content:"开服必领";align-self:flex-start;margin-top:5px;padding:6px 9px;background:#a5281c;border:1px solid #e36242;color:#ffe2a2;font:800 10px/1 Arial,"Microsoft YaHei",sans-serif;letter-spacing:.16em;box-shadow:0 0 18px rgba(202,59,29,.38)}
.benefit-title small{font-size:10px;color:#f0b953;text-shadow:0 0 10px rgba(236,164,51,.36)}
.benefit-title strong{font-size:29px;color:#fff0c5;letter-spacing:.13em;text-shadow:0 3px 0 #6e2115,0 0 20px rgba(255,193,70,.22)}
.benefit-banner ul{gap:14px}
.benefit-banner li{position:relative;justify-content:center;min-height:88px;padding:17px 14px 16px 62px;background:linear-gradient(135deg,rgba(139,37,23,.72),rgba(53,24,16,.76));border:1px solid rgba(222,151,55,.48);box-shadow:inset 0 0 24px rgba(247,133,42,.06),0 9px 22px rgba(0,0,0,.16);transition:transform .25s,border-color .25s,box-shadow .25s}
.benefit-banner li:before{position:absolute;left:15px;top:50%;display:grid;place-items:center;width:34px;height:34px;transform:translateY(-50%);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:linear-gradient(145deg,#f0bd55,#9d351d);color:#3d160e;font:900 16px/1 Arial,"Microsoft YaHei",sans-serif;box-shadow:0 0 0 4px rgba(216,113,40,.12),0 0 18px rgba(240,160,54,.34)}
.benefit-banner li:nth-child(1):before{content:"零"}.benefit-banner li:nth-child(2):before{content:"刀"}.benefit-banner li:nth-child(3):before{content:"礼"}.benefit-banner li:nth-child(4):before{content:"免"}
.benefit-banner li:after{content:"";position:absolute;left:62px;right:14px;bottom:11px;height:1px;background:linear-gradient(90deg,rgba(244,185,78,.55),transparent)}
.benefit-banner li b{font-size:23px;color:#ffe295;letter-spacing:.1em;text-shadow:0 0 14px rgba(255,189,63,.32)}
.benefit-banner li:nth-child(3) b{font-size:27px;color:#fff1aa;text-shadow:0 0 8px #d54a25,0 0 20px rgba(255,188,54,.55)}
.benefit-banner li span{font-size:12px;color:#dac4a6;letter-spacing:.07em}
.benefit-banner li:hover{transform:translateY(-3px);border-color:#f0ba5a;box-shadow:inset 0 0 28px rgba(247,133,42,.1),0 13px 28px rgba(0,0,0,.22),0 0 18px rgba(226,137,45,.14)}
@keyframes benefitSweep{0%,55%{left:-24%;opacity:0}66%{opacity:1}86%,100%{left:118%;opacity:0}}
@media(max-width:1050px){.benefit-banner{grid-template-columns:1fr;padding:26px}.benefit-title{padding:0 0 20px}.benefit-title:after{position:absolute;right:0;bottom:18px}.benefit-banner ul{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.benefit-banner{padding:20px 16px}.benefit-title strong{font-size:23px}.benefit-title:after{position:static}.benefit-banner li{min-height:80px;padding-left:54px}.benefit-banner li:before{left:11px;width:30px;height:30px}.benefit-banner li b,.benefit-banner li:nth-child(3) b{font-size:19px}.benefit-banner li span{font-size:10px}.benefit-banner li:after{left:54px}}
@media(prefers-reduced-motion:reduce){.benefit-banner:before{animation:none}}

/* Large, readable recharge threshold ladder. */
.gameplay-layout .rate-ladder{gap:10px;margin-top:32px;padding-top:32px;border-top:1px solid rgba(239,190,91,.38)}
.gameplay-layout .rate-ladder:before{left:7%;right:7%;top:42px;height:4px;background:linear-gradient(90deg,#9b2d1e 0%,#d8872c 32%,#f0b94c 70%,#ffe49a 100%);box-shadow:0 0 6px rgba(255,218,126,.75),0 0 18px rgba(245,151,43,.44)}
.gameplay-layout .rate-ladder span{min-height:86px;justify-content:flex-end;gap:9px;padding:38px 7px 12px;background:linear-gradient(180deg,rgba(127,42,24,.22),rgba(35,21,14,.72));border:1px solid rgba(224,159,63,.42);box-shadow:inset 0 0 18px rgba(239,135,42,.05),0 7px 16px rgba(0,0,0,.15)}
.gameplay-layout .rate-ladder span:before{top:3px;width:17px;height:17px;border:3px solid #ffe2a0;background:#db8f2f;box-shadow:0 0 0 5px rgba(213,119,37,.13),0 0 15px #eda23b}
.gameplay-layout .rate-ladder b{color:#f2d8a6;font:800 13px/1 Arial,sans-serif;letter-spacing:.02em}.gameplay-layout .rate-ladder i{color:#ffc95f;font:900 15px/1 Arial,sans-serif;text-shadow:0 0 10px rgba(255,188,70,.35)}
.gameplay-layout .rate-ladder span:last-child{background:linear-gradient(180deg,rgba(169,43,27,.55),rgba(62,22,15,.88));border-color:#df6844;box-shadow:inset 0 0 22px rgba(255,114,44,.13),0 8px 20px rgba(87,20,12,.25),0 0 18px rgba(224,92,42,.16)}
.gameplay-layout .rate-ladder span:last-child:before{top:0;width:23px;height:23px;border-width:3px;background:#bd3020;box-shadow:0 0 5px #fff2b8,0 0 22px #f29c35}
.gameplay-layout .rate-ladder span:last-child b{color:#ffe0a2;font-size:14px}.gameplay-layout .rate-ladder span:last-child i{color:#fff0a9;font-size:17px;text-shadow:0 0 12px rgba(255,205,91,.7)}
@media(max-width:720px){.gameplay-layout .rate-ladder{gap:4px;margin-top:25px;padding-top:28px}.gameplay-layout .rate-ladder:before{top:37px;height:3px}.gameplay-layout .rate-ladder span{min-height:72px;padding:32px 2px 9px;gap:6px}.gameplay-layout .rate-ladder span:before{width:14px;height:14px;border-width:2px}.gameplay-layout .rate-ladder b{font-size:10px}.gameplay-layout .rate-ladder i{font-size:11px}.gameplay-layout .rate-ladder span:last-child b{font-size:10px}.gameplay-layout .rate-ladder span:last-child i{font-size:12px}.gameplay-layout .rate-ladder span:last-child:before{width:18px;height:18px}}

/* Clearer recharge-rule copy without competing with the reward headline. */
.gameplay-layout .recharge-card>ul{padding:28px 0 28px 22px;color:#d8c8b0;font-size:15px;font-weight:500;line-height:2.05;letter-spacing:.025em;text-shadow:0 1px 2px rgba(0,0,0,.55)}
.gameplay-layout .recharge-card>ul li{padding-left:3px}
.gameplay-layout .recharge-card>ul li::marker{color:#e6ad4e;font-size:1.08em}
@media(max-width:720px){.gameplay-layout .recharge-card>ul{padding:22px 0 22px 20px;font-size:14px;line-height:1.95}}

/* Fixed left-side Buddha and sword depth layer. */
.page-backdrop>img{position:absolute;z-index:0;inset:0}
.page-backdrop .buddha-sword-fixed{position:absolute;z-index:1;left:-2.5vw;top:0;bottom:0;width:min(45vw,690px);background:url("../images/buddha-sword-fixed.png") left center/auto 104% no-repeat;opacity:.88;filter:saturate(.9) contrast(1.08) brightness(.76);-webkit-mask-image:linear-gradient(90deg,#000 0 58%,rgba(0,0,0,.94) 72%,rgba(0,0,0,.48) 88%,transparent 100%);mask-image:linear-gradient(90deg,#000 0 58%,rgba(0,0,0,.94) 72%,rgba(0,0,0,.48) 88%,transparent 100%);transform:none!important;animation:none!important;pointer-events:none}
.page-backdrop .page-backdrop-shade{z-index:2}
@media(max-width:900px){.page-backdrop .buddha-sword-fixed{left:-12vw;width:76vw;opacity:.66;background-size:auto 100%;filter:saturate(.88) contrast(1.05) brightness(.7)}}
@media(max-width:560px){.page-backdrop .buddha-sword-fixed{left:-22vw;width:92vw;opacity:.52}}

/* Solitary battlefield mood: the Buddha and sword stay still; only weather and silk move. */
.page-backdrop .buddha-sword-fixed{
  isolation:isolate;
  opacity:.94;
  filter:saturate(.74) contrast(1.18) brightness(.69);
  box-shadow:inset 70px 0 110px rgba(2,6,9,.22)
}
.page-backdrop .buddha-sword-fixed:before{
  content:"";
  position:absolute;
  z-index:1;
  inset:-18% -8%;
  background:repeating-linear-gradient(106deg,transparent 0 34px,rgba(169,196,208,.08) 35px,transparent 37px 70px);
  opacity:.5;
  transform:translate3d(-2%,0,0);
  animation:buddhaColdRain 8s linear infinite;
  pointer-events:none
}
.page-backdrop .buddha-sword-fixed:after{
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  background:
    radial-gradient(circle at 31% 58%,rgba(164,40,22,.18),transparent 8%),
    linear-gradient(180deg,rgba(2,6,10,.2),transparent 38%,rgba(2,4,6,.34));
  pointer-events:none
}
.page-backdrop .sword-ribbon{
  --ribbon-length:220px;
  position:absolute;
  z-index:3;
  left:calc(31% - var(--ribbon-length));
  top:55%;
  width:var(--ribbon-length);
  height:25px;
  display:block;
  transform-origin:100% 50%;
  background:linear-gradient(90deg,transparent 0%,rgba(91,5,9,.3) 8%,#78100f 38%,#b3231b 72%,#e05936 100%);
  clip-path:polygon(0 44%,13% 18%,29% 62%,46% 24%,64% 64%,82% 30%,100% 43%,100% 60%,82% 48%,64% 82%,46% 43%,29% 80%,13% 35%,0 67%);
  opacity:.8;
  filter:drop-shadow(0 0 5px rgba(175,31,18,.6));
  will-change:transform;
  pointer-events:none
}
.page-backdrop .ribbon-one{animation:swordSilkOne 5.8s ease-in-out infinite}
.page-backdrop .ribbon-two{--ribbon-length:180px;top:56.4%;height:19px;opacity:.64;animation:swordSilkTwo 7.1s ease-in-out -2.4s infinite}
.page-backdrop .ribbon-three{--ribbon-length:145px;top:53.9%;height:14px;opacity:.48;animation:swordSilkThree 6.4s ease-in-out -1.1s infinite}
@keyframes swordSilkOne{
  0%,100%{transform:rotate(7deg) skewX(-7deg) scaleX(.97)}
  35%{transform:rotate(-2deg) skewX(8deg) scaleX(1.04)}
  68%{transform:rotate(4deg) skewX(-3deg) scaleX(1)}
}
@keyframes swordSilkTwo{
  0%,100%{transform:rotate(-8deg) skewX(8deg) scaleX(.94)}
  42%{transform:rotate(4deg) skewX(-9deg) scaleX(1.06)}
  74%{transform:rotate(-3deg) skewX(3deg) scaleX(.99)}
}
@keyframes swordSilkThree{
  0%,100%{transform:rotate(15deg) skewX(-5deg) scaleX(.96)}
  50%{transform:rotate(5deg) skewX(10deg) scaleX(1.05)}
}
@keyframes buddhaColdRain{
  from{background-position:0 -100px}
  to{background-position:-90px 160px}
}
@media(max-width:900px){
  .page-backdrop .buddha-sword-fixed{left:-12vw;width:76vw;opacity:.68;background-size:auto 100%;filter:saturate(.72) contrast(1.14) brightness(.66)}
  .page-backdrop .sword-ribbon{left:calc(33% - var(--ribbon-length));top:55.5%;transform:scale(.86);opacity:.66}
}
@media(max-width:560px){
  .page-backdrop .buddha-sword-fixed{left:-22vw;width:92vw;opacity:.52}
  .page-backdrop .sword-ribbon{display:none}
  .page-backdrop .buddha-sword-fixed:before{opacity:.3}
}
@media(prefers-reduced-motion:reduce){
  .page-backdrop .sword-ribbon,.page-backdrop .buddha-sword-fixed:before{animation:none}
}

/* Keep the complete pale ink-wash base visible instead of cropping it. */
.page-backdrop{
  background-color:#dce8ed;
  background-image:linear-gradient(rgba(220,232,237,.22),rgba(220,232,237,.22)),url("../images/1111.bmp");
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat
}
.page-backdrop>img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
  background:rgba(220,232,237,.38);
  filter:saturate(.92) contrast(1.02)
}
@media(max-width:800px){
  .page-backdrop>img{object-fit:contain;object-position:center center}
}

/* Align the casino and twelve-manual feature images to one shared grid line. */
.special-gameplay .feature-game-card,
.special-gameplay .manuals-card{
  grid-template-columns:minmax(290px,.72fr) minmax(460px,1.28fr)
}
.special-gameplay .feature-shot-button{
  width:100%;
  justify-self:stretch
}
@media(max-width:1050px){
  .special-gameplay .feature-game-card,
  .special-gameplay .manuals-card{grid-template-columns:1fr}
}

/* Feather the dark Buddha plate into the pale ink wash without a hard seam. */
.page-backdrop .buddha-sword-fixed{
  width:min(45vw,57.8vh);
  background-size:auto 104%;
  -webkit-mask-image:linear-gradient(90deg,#000 0 44%,rgba(0,0,0,.96) 52%,rgba(0,0,0,.82) 62%,rgba(0,0,0,.56) 72%,rgba(0,0,0,.30) 82%,rgba(0,0,0,.10) 92%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0 44%,rgba(0,0,0,.96) 52%,rgba(0,0,0,.82) 62%,rgba(0,0,0,.56) 72%,rgba(0,0,0,.30) 82%,rgba(0,0,0,.10) 92%,transparent 100%);
  box-shadow:inset 70px 0 110px rgba(2,6,9,.22),28px 0 56px rgba(77,104,113,.10)
}
.page-backdrop .sword-ribbon{left:calc(37% - var(--ribbon-length))}
@media(max-width:900px){
  .page-backdrop .buddha-sword-fixed{width:min(76vw,55.6vh);background-size:auto 100%}
  .page-backdrop .sword-ribbon{left:calc(37% - var(--ribbon-length))}
}
@media(max-width:560px){
  .page-backdrop .buddha-sword-fixed{width:min(92vw,55.6vh)}
}

/* Cinematic replacement for the former two-column game introduction. */
.world-cinema{
  position:relative;
  max-width:1380px;
  margin:auto;
  padding:18px;
  color:#f1dec0;
  background:linear-gradient(145deg,rgba(37,21,14,.96),rgba(5,7,8,.98));
  border:1px solid rgba(204,153,68,.62);
  box-shadow:0 32px 90px rgba(20,13,8,.42),inset 0 0 55px rgba(207,141,48,.06)
}
.world-cinema:before{
  content:"";
  position:absolute;
  inset:8px;
  border:1px solid rgba(227,180,92,.18);
  pointer-events:none
}
.world-cinema-label{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:18px;
  padding:5px 4px 17px
}
.world-cinema-label small{color:#cda14f;font:10px Arial,sans-serif;letter-spacing:.34em}
.world-cinema-label strong{font-size:17px;letter-spacing:.18em;color:#f2ddb0}
.world-cinema-label span{margin-left:auto;color:#c9aa71;font:12px Arial,sans-serif;letter-spacing:.16em}
.world-cinema-screen{
  position:relative;
  z-index:1;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#000;
  border:1px solid rgba(235,187,91,.34);
  box-shadow:0 18px 55px rgba(0,0,0,.65)
}
.world-cinema-screen iframe{display:block;width:100%;height:100%;border:0}
.world-cinema>p{margin:14px 4px 0;color:#a99577;font-size:11px;letter-spacing:.16em;text-align:right}
@media(max-width:700px){
  .world-cinema{padding:10px}
  .world-cinema-label{align-items:flex-start;flex-direction:column;gap:7px;padding:7px 3px 13px}
  .world-cinema-label span{margin-left:0}
  .world-cinema>p{text-align:left;font-size:10px;line-height:1.7}
}

/* One exact equipment-detail viewport: 234 x 484, matching the supplied reference. */
.hover-preview:not(.manual-mode){
  width:234px;
  height:484px;
  padding:4px;
  display:grid;
  grid-template-rows:444px 30px;
  overflow:hidden
}
.hover-preview:not(.manual-mode) img{
  display:block;
  width:224px;
  height:444px;
  max-height:none;
  object-fit:contain;
  object-position:center;
  background:#030302;
  image-rendering:auto
}
.hover-preview:not(.manual-mode) span{
  min-height:0;
  height:30px;
  padding:7px 2px 2px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis
}
@media(max-width:800px){.hover-preview:not(.manual-mode){display:none}}

/* Animate only the original red tassel pixels from the supplied Buddha artwork. */
.page-backdrop .sword-ribbon{display:none!important}
.page-backdrop .buddha-sword-fixed{
  --buddha-art-size:auto 104%;
  background-size:var(--buddha-art-size)
}
.page-backdrop .tassel-shadow{
  position:absolute;
  z-index:3;
  left:-2%;
  top:46.5%;
  width:42%;
  height:20%;
  display:block;
  border-radius:48%;
  background:rgba(7,14,17,.34);
  -webkit-backdrop-filter:blur(7px) saturate(.12) brightness(.56);
  backdrop-filter:blur(7px) saturate(.12) brightness(.56);
  -webkit-mask-image:radial-gradient(ellipse at 56% 50%,#000 0 56%,rgba(0,0,0,.72) 72%,transparent 100%);
  mask-image:radial-gradient(ellipse at 56% 50%,#000 0 56%,rgba(0,0,0,.72) 72%,transparent 100%);
  pointer-events:none
}
.page-backdrop .original-sword-tassel{
  position:absolute;
  z-index:4;
  inset:0;
  display:block;
  background:url("../images/buddha-sword-fixed.png") left center/var(--buddha-art-size) no-repeat;
  clip-path:polygon(0 46%,38% 46%,39% 56%,35% 61%,23% 66%,0 68%);
  transform-origin:37% 55%;
  mix-blend-mode:screen;
  filter:saturate(1.42) contrast(1.08) brightness(.82);
  animation:originalTasselWind 6.8s ease-in-out infinite;
  will-change:transform;
  pointer-events:none
}
@keyframes originalTasselWind{
  0%,100%{transform:rotate(.35deg) skewY(-.2deg) translateY(0)}
  32%{transform:rotate(-1.15deg) skewY(.55deg) translateY(-3px)}
  66%{transform:rotate(.8deg) skewY(-.45deg) translateY(2px)}
}
@media(max-width:900px){
  .page-backdrop .buddha-sword-fixed{--buddha-art-size:auto 100%}
}
@media(max-width:560px){
  .page-backdrop .tassel-shadow,.page-backdrop .original-sword-tassel{display:none}
}
@media(prefers-reduced-motion:reduce){
  .page-backdrop .original-sword-tassel{animation:none}
}

/* Restore the supplied manga as one untouched, motionless image. */
.comic-right{
  background-image:linear-gradient(270deg,rgba(4,3,3,.08),rgba(8,5,3,.20) 55%,rgba(5,4,3,.96)),url("../images/manga-hero-01.png")!important;
  background-size:cover,auto 118%!important;
  background-position:center,center 34%!important;
  transform:none!important;
  transition:none!important;
  animation:none!important
}
.comic-right:before,.comic-right:after,
.comic-stage .blade-orbit,.comic-stage .slash,
.comic-stage .energy-ring,.comic-stage .spark-field{
  content:none!important;
  display:none!important;
  animation:none!important
}
@media(max-width:800px){
  .comic-right{background-size:cover,auto 112%!important;background-position:center,center 32%!important}
}

/* V2: every equipment detail fills the same content rectangle, not only the outer frame. */
.hover-preview:not(.manual-mode) img{
  object-fit:fill;
  object-position:center;
  filter:contrast(1.035) saturate(1.02)
}

/* Restore every supplied equipment-detail image at its original ratio and clarity. */
.hover-preview:not(.manual-mode){
  width:auto;
  height:auto;
  max-width:calc(100vw - 24px);
  padding:4px;
  display:block;
  overflow:visible
}
.hover-preview:not(.manual-mode) img{
  width:auto;
  height:auto;
  max-width:min(420px,calc(100vw - 32px));
  max-height:calc(100vh - 76px);
  object-fit:contain;
  object-position:center;
  background:#030302;
  filter:none
}
.hover-preview:not(.manual-mode) span{
  width:100%;
  min-height:30px;
  height:auto;
  padding:7px 6px 3px
}

/* Clean, deliberate two-line recharge headline. */
.gameplay-layout .recharge-card>.recharge-heading{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  width:100%;
  margin:9px 0 0;
  padding:7px 0 7px 18px;
  border-left:4px solid #b93627;
  font-size:clamp(39px,3vw,52px);
  line-height:1;
  letter-spacing:.08em;
  white-space:nowrap
}
.gameplay-layout .recharge-card>.recharge-heading span,
.gameplay-layout .recharge-card>.recharge-heading b{
  display:block;
  color:#f5e2bd;
  font:inherit;
  white-space:nowrap
}
.gameplay-layout .recharge-card>.recharge-heading b{
  color:#ffd16f;
  text-shadow:0 0 18px rgba(241,148,44,.32),0 7px 22px rgba(0,0,0,.38)
}
.gameplay-layout .recharge-card>.recharge-heading:after{
  content:"每充值满 200 元 · 额外爆率 +1000%";
  margin-top:18px;
  color:#c8a77a;
  font:600 11px/1.7 Arial,"Microsoft YaHei",sans-serif;
  letter-spacing:.08em;
  white-space:normal
}
@media(max-width:1120px){
  .gameplay-layout .recharge-card>.recharge-heading{font-size:44px}
}
@media(max-width:720px){
  .gameplay-layout .recharge-card>.recharge-heading{width:auto;font-size:38px;padding-left:14px}
}

/* Larger, higher-contrast PK store copy for comfortable reading. */
.pk-manifesto{padding:clamp(38px,4vw,62px)}
.pk-manifesto .pk-kicker{
  color:#96601d;
  font-size:12px;
  letter-spacing:.27em
}
.pk-manifesto h3{
  margin:14px 0 18px;
  font-size:clamp(43px,3.6vw,56px);
  font-weight:900;
  text-shadow:0 2px 0 rgba(255,255,255,.7)
}
.pk-manifesto .pk-lead{
  margin-bottom:21px;
  color:#392c25;
  font-size:17px;
  font-weight:600;
  line-height:1.9
}
.pk-manifesto .pk-rules{gap:11px}
.pk-manifesto .pk-rules li{
  padding:14px 15px;
  background:rgba(255,253,247,.88);
  border-color:rgba(113,65,32,.32);
  border-left-width:4px;
  box-shadow:0 5px 15px rgba(78,48,25,.06)
}
.pk-manifesto .pk-rules b{
  margin-bottom:7px;
  font-size:15px;
  font-weight:900
}
.pk-manifesto .pk-rules span{
  color:#4b3a30;
  font-size:14px;
  font-weight:600;
  line-height:1.75
}
.pk-manifesto .pk-example{
  margin-top:14px;
  padding:15px 16px;
  background:linear-gradient(135deg,rgba(126,36,27,.12),rgba(177,119,38,.10));
  border-color:rgba(126,43,28,.38)
}
.pk-manifesto .pk-example>b{
  font-size:15px;
  font-weight:900
}
.pk-manifesto .pk-example p{
  margin-top:7px;
  color:#48372d;
  font-size:14px;
  font-weight:600;
  line-height:1.8
}
@media(max-width:720px){
  .pk-manifesto .pk-kicker{font-size:10px}
  .pk-manifesto h3{font-size:40px}
  .pk-manifesto .pk-lead{font-size:16px}
  .pk-manifesto .pk-rules span,.pk-manifesto .pk-example p{font-size:13px}
}

/* New order: full-width season chapter, recharge pulled upward, PK follows manuals. */
.world-grid.single-chapter{grid-template-columns:1fr}
.world-grid.single-chapter .world-art{min-height:520px}
.world{padding-bottom:70px}
.gameplay-section{padding-top:64px}

.special-gameplay .pk-feature-card{
  display:block;
  min-height:auto;
  padding:clamp(34px,4vw,58px);
  color:#eee3cc;
  background:linear-gradient(120deg,rgba(38,25,17,.96),rgba(8,8,7,.94));
  border-color:rgba(205,157,72,.48)
}
.special-gameplay .pk-feature-card .seal{
  top:24px;
  right:24px;
  padding:12px 10px;
  box-shadow:0 8px 24px rgba(0,0,0,.45)
}
.special-gameplay .pk-feature-card .pk-kicker{
  color:#d3a453;
  font-size:11px
}
.special-gameplay .pk-feature-card h3{
  margin:16px 0 20px;
  color:#f3d99b;
  text-shadow:0 8px 28px rgba(0,0,0,.42)
}
.special-gameplay .pk-feature-card .pk-lead{
  max-width:1180px;
  color:#c8baa3;
  font-weight:500
}
.special-gameplay .pk-feature-card .pk-rules{
  grid-template-columns:1fr 1fr;
  max-width:1280px
}
.special-gameplay .pk-feature-card .pk-rules li{
  background:rgba(255,255,255,.035);
  border-color:rgba(205,157,72,.30);
  border-left-color:#a9271e;
  box-shadow:none
}
.special-gameplay .pk-feature-card .pk-rules b,
.special-gameplay .pk-feature-card .pk-example>b{color:#efc56f}
.special-gameplay .pk-feature-card .pk-rules span,
.special-gameplay .pk-feature-card .pk-example p{
  color:#b7aa94;
  font-weight:500
}
.special-gameplay .pk-feature-card .pk-example{
  max-width:1280px;
  background:linear-gradient(135deg,rgba(145,39,27,.16),rgba(192,128,38,.08));
  border-color:rgba(205,157,72,.30)
}
@media(max-width:720px){
  .world{padding-bottom:50px}
  .gameplay-section{padding-top:48px}
  .special-gameplay .pk-feature-card .seal{top:14px;right:14px}
  .special-gameplay .pk-feature-card .pk-rules{grid-template-columns:1fr}
}

/* Prominent diamond-to-PK exchange notice inside the PK feature card. */
.special-gameplay .pk-exchange{
  position:relative;
  max-width:1280px;
  margin:2px 0 18px;
  padding:18px 22px;
  display:flex;
  align-items:center;
  gap:20px;
  overflow:hidden;
  background:
    radial-gradient(circle at 9% 50%,rgba(255,198,83,.18),transparent 20%),
    linear-gradient(105deg,rgba(119,27,20,.72),rgba(52,24,15,.90) 48%,rgba(16,13,9,.94));
  border:1px solid #d29a42;
  box-shadow:inset 0 0 34px rgba(239,154,45,.08),0 10px 28px rgba(0,0,0,.28)
}
.special-gameplay .pk-exchange:after{
  content:"";
  position:absolute;
  left:-35%;
  top:0;
  width:28%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,235,178,.15),transparent);
  transform:skewX(-18deg);
  animation:pkExchangeShine 4s ease-in-out infinite
}
.pk-exchange-icon{
  flex:0 0 auto;
  color:#ffd66f;
  font-size:37px;
  line-height:1;
  text-shadow:0 0 10px #f49b32,0 0 28px rgba(244,105,34,.75)
}
.pk-exchange>div{position:relative;z-index:1}
.pk-exchange small{
  display:block;
  margin-bottom:6px;
  color:#d5a451;
  font:700 10px/1.4 Arial,"Microsoft YaHei",sans-serif;
  letter-spacing:.25em
}
.pk-exchange strong{
  display:flex;
  align-items:baseline;
  gap:12px;
  color:#fff0be;
  font-size:clamp(27px,3vw,42px);
  line-height:1.1;
  letter-spacing:.08em
}
.pk-exchange strong i,
.pk-exchange strong b{
  color:#ffd36c;
  font-style:normal;
  font-weight:900;
  text-shadow:0 0 18px rgba(246,161,47,.38)
}
.pk-exchange strong em{
  padding:5px 10px;
  color:#fff;
  background:#a72b20;
  border:1px solid #d55c42;
  font-style:normal;
  font-size:.48em;
  letter-spacing:.12em
}
.special-gameplay .pk-exchange p{
  margin:7px 0 0;
  color:#cabda8;
  font-size:13px;
  line-height:1.7
}
@keyframes pkExchangeShine{
  0%,58%{left:-35%;opacity:0}
  68%{opacity:1}
  86%,100%{left:125%;opacity:0}
}
@media(max-width:620px){
  .special-gameplay .pk-exchange{padding:17px 15px;gap:13px}
  .pk-exchange-icon{font-size:29px}
  .pk-exchange strong{flex-wrap:wrap;gap:8px;font-size:28px}
}
@media(prefers-reduced-motion:reduce){.special-gameplay .pk-exchange:after{animation:none}}

/* Slightly calmer recharge composition: about ten percent smaller overall. */
.gameplay-section{padding:54px clamp(20px,5vw,82px) 96px}
.benefit-banner{
  max-width:1440px;
  padding:18px 22px;
  grid-template-columns:215px 1fr;
  gap:22px
}
.benefit-title strong{font-size:21px}
.benefit-banner li b{font-size:16px}
.gameplay-layout{max-width:1440px}
.gameplay-layout .recharge-card{
  min-height:510px;
  padding:50px 58px;
  column-gap:42px;
  row-gap:20px
}
.gameplay-layout .recharge-card>.recharge-heading{
  font-size:clamp(36px,3.35vw,55px)
}
.gameplay-layout .recharge-card>.rate{padding:30px 34px}
.gameplay-layout .recharge-card .rate strong{padding:27px 0 22px}
.gameplay-layout .recharge-card .rate strong mark{
  font-size:clamp(58px,5.4vw,82px)
}
.gameplay-layout .recharge-card .rate em{padding:13px 15px}
.gameplay-layout .recharge-card .rate em b{font-size:22px}
.gameplay-layout .rate-ladder{margin-top:22px;padding-top:27px}
.gameplay-layout .rate-ladder span{
  min-height:78px;
  padding:34px 6px 10px
}
.gameplay-layout .recharge-card>ul{
  padding-top:24px;
  padding-bottom:24px;
  font-size:14px;
  line-height:1.95
}
@media(max-width:1120px){
  .gameplay-layout .recharge-card{min-height:0;padding:48px}
}
@media(max-width:720px){
  .gameplay-section{padding:48px 16px 78px}
  .gameplay-layout .recharge-card{padding:38px 22px}
  .gameplay-layout .recharge-card>.recharge-heading{font-size:35px}
  .gameplay-layout .recharge-card .rate strong mark{font-size:50px}
}

/* PK exchange becomes a restrained final note below all rules. */
.special-gameplay .pk-feature-card .pk-exchange{
  margin:14px 0 0;
  padding:11px 15px;
  gap:11px;
  background:rgba(255,255,255,.025);
  border-color:rgba(205,157,72,.30);
  box-shadow:none
}
.special-gameplay .pk-feature-card .pk-exchange:after{display:none}
.special-gameplay .pk-feature-card .pk-exchange-icon{
  font-size:19px;
  text-shadow:0 0 10px rgba(244,155,50,.45)
}
.special-gameplay .pk-feature-card .pk-exchange small{
  display:inline-block;
  margin:0 11px 0 0;
  font-size:8px;
  letter-spacing:.18em
}
.special-gameplay .pk-feature-card .pk-exchange strong{
  display:inline-flex;
  gap:7px;
  font-size:clamp(18px,1.7vw,24px);
  letter-spacing:.05em
}
.special-gameplay .pk-feature-card .pk-exchange strong em{
  padding:3px 7px;
  font-size:.5em;
  letter-spacing:.08em
}
.special-gameplay .pk-feature-card .pk-exchange p{
  display:inline;
  margin-left:14px;
  color:#a99b86;
  font-size:11px
}
@media(max-width:620px){
  .special-gameplay .pk-feature-card .pk-exchange{padding:11px 12px}
  .special-gameplay .pk-feature-card .pk-exchange strong{font-size:19px}
  .special-gameplay .pk-feature-card .pk-exchange p{display:block;margin:5px 0 0}
}

/* Sixth character set: fixed card geometry with the supplied six-frame effect. */
.character-grid .animated-equipment{
  grid-column:2;
  width:100%;
  justify-self:stretch
}
.character-grid .frost-equipment{
  grid-column:3;
  width:100%;
  justify-self:stretch
}
.frost-frame-sequence{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:590/748;
  overflow:hidden;
  background:#000
}
.character-grid .frost-frame-sequence>img{
  position:absolute;
  left:50%;
  top:0;
  display:block;
  width:auto;
  max-width:none;
  height:108%;
  object-fit:contain;
  object-position:center top;
  opacity:0;
  transform:translateX(-50%);
  animation:frostEquipmentPlayback 1.2s steps(1,end) infinite
}
.frost-frame-sequence>img:nth-child(1){animation-delay:0s}
.frost-frame-sequence>img:nth-child(2){animation-delay:-1s}
.frost-frame-sequence>img:nth-child(3){animation-delay:-.8s}
.frost-frame-sequence>img:nth-child(4){animation-delay:-.6s}
.frost-frame-sequence>img:nth-child(5){animation-delay:-.4s}
.frost-frame-sequence>img:nth-child(6){animation-delay:-.2s}
@keyframes frostEquipmentPlayback{0%,16.6%{opacity:1}16.7%,100%{opacity:0}}
.character-grid .frost-equipment>.frost-card-logo{
  position:absolute;
  z-index:4;
  top:2.8%;
  right:3.5%;
  display:block;
  width:61%;
  height:auto;
  object-fit:contain;
  object-position:center;
  mix-blend-mode:screen;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.72));
  pointer-events:none
}
.character-grid .frost-equipment figcaption{
  padding:70px 22px 24px;
  background:linear-gradient(transparent,rgba(3,4,5,.97))
}
.character-grid .frost-equipment figcaption b{color:#d8e9ff;text-shadow:0 0 13px rgba(67,158,255,.52)}
.character-grid .frost-equipment figcaption span{color:#82add7}
@media(max-width:1280px){
  .character-grid .animated-equipment,
  .character-grid .frost-equipment{grid-column:auto;width:100%}
}
@media(max-width:480px){
  .character-grid .animated-equipment,
  .character-grid .frost-equipment{grid-column:auto;width:100%}
}
@media(prefers-reduced-motion:reduce){
  .character-grid .frost-frame-sequence>img{display:none;animation:none}
  .character-grid .frost-frame-sequence>img:first-child{display:block;opacity:1}
}

/* Eight character sets: four matching cards per row. */
.character-grid{grid-template-columns:repeat(8,minmax(0,1fr))}
.character-grid>figure{grid-column:span 2}
.character-grid .animated-equipment,
.character-grid .frost-equipment,
.character-grid .ice-blade-equipment,
.character-grid .fire-blade-equipment{
  grid-column:span 2;
  width:100%;
  justify-self:stretch
}
.character-grid .ice-blade-equipment>.frost-card-logo,
.character-grid .fire-blade-equipment>.frost-card-logo{
  position:absolute;
  z-index:4;
  top:2.8%;
  right:3.5%;
  display:block;
  width:61%;
  height:auto;
  object-fit:contain;
  object-position:center;
  mix-blend-mode:screen;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.72));
  pointer-events:none
}
.character-grid .ice-blade-equipment figcaption,
.character-grid .fire-blade-equipment figcaption{
  padding:70px 22px 24px;
  background:linear-gradient(transparent,rgba(3,4,5,.97))
}
.character-grid .ice-blade-equipment figcaption b{color:#d8e9ff;text-shadow:0 0 13px rgba(67,158,255,.52)}
.character-grid .ice-blade-equipment figcaption span{color:#82add7}
.character-grid .fire-blade-equipment figcaption b{color:#ffe0a3;text-shadow:0 0 13px rgba(255,91,30,.58)}
.character-grid .fire-blade-equipment figcaption span{color:#d98b68}
@media(max-width:1280px){
  .character-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .character-grid>figure,
  .character-grid .animated-equipment,
  .character-grid .frost-equipment,
  .character-grid .ice-blade-equipment,
  .character-grid .fire-blade-equipment{grid-column:auto;width:100%}
}
@media(max-width:480px){
  .character-grid{grid-template-columns:1fr}
}

/* Unified legendary-card treatment: one gold frame, one battle-calligraphy system. */
.character-grid figure{
  isolation:isolate;
  border:2px solid #b78628;
  background:#020201;
  box-shadow:
    0 22px 55px rgba(0,0,0,.58),
    0 0 0 1px rgba(255,219,132,.24),
    inset 0 0 0 1px rgba(255,229,157,.2)
}
.character-grid figure:before{
  z-index:5;
  inset:6px;
  border:1px solid rgba(230,181,78,.8);
  box-shadow:
    inset 0 0 0 1px rgba(91,55,12,.72),
    0 0 14px rgba(215,156,42,.12)
}
.character-grid figcaption b,
.character-grid .frost-equipment figcaption b,
.character-grid .ice-blade-equipment figcaption b,
.character-grid .fire-blade-equipment figcaption b{
  color:#f2ce7d;
  font-family:"STXingkai","FZKai-Z03","KaiTi","STKaiti",serif;
  font-weight:800;
  letter-spacing:.08em;
  text-shadow:0 2px 2px #000,0 0 12px rgba(215,153,41,.34)
}
.character-grid figcaption span,
.character-grid .frost-equipment figcaption span,
.character-grid .ice-blade-equipment figcaption span,
.character-grid .fire-blade-equipment figcaption span{
  color:#c7a86e;
  font-family:"STXingkai","FZKai-Z03","KaiTi","STKaiti",serif;
  font-weight:700;
  letter-spacing:.1em;
  text-shadow:0 1px 2px #000
}

/* Keep the original logo artwork; feather its dark plate into every character frame. */
.character-grid .character-card-logo,
.character-grid .equipment-card-logo,
.character-grid .frost-card-logo{
  position:absolute;
  z-index:4;
  top:1.5%;
  right:auto;
  left:50%;
  display:block;
  width:72%;
  height:auto;
  object-fit:contain;
  object-position:center;
  opacity:.98;
  transform:translateX(-50%);
  mix-blend-mode:screen;
  filter:contrast(1.08) saturate(1.03) drop-shadow(0 4px 11px rgba(0,0,0,.62));
  -webkit-mask-image:radial-gradient(ellipse 88% 80% at 50% 48%,#000 0 62%,rgba(0,0,0,.96) 72%,rgba(0,0,0,.62) 84%,transparent 100%);
  mask-image:radial-gradient(ellipse 88% 80% at 50% 48%,#000 0 62%,rgba(0,0,0,.96) 72%,rgba(0,0,0,.62) 84%,transparent 100%);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  pointer-events:none
}

/* The first, second and fourth source cards already contain a bright gold
   frame in their artwork. Give the remaining five cards the same visual
   weight without touching their character or weapon imagery. */
.character-grid>figure:nth-child(3),
.character-grid>figure:nth-child(n+5){
  border:3px solid #d4a20b;
  box-shadow:
    0 22px 55px rgba(0,0,0,.62),
    0 0 0 1px #4d3207,
    inset 0 0 0 1px #ffe175,
    inset 0 0 14px rgba(217,164,34,.15)
}
.character-grid>figure:nth-child(3):before,
.character-grid>figure:nth-child(n+5):before{
  inset:6px;
  border:1px solid rgba(242,194,78,.95);
  box-shadow:inset 0 0 0 1px rgba(91,55,12,.9),0 0 10px rgba(226,169,48,.16)
}

/* Local cinematic: the source portrait canvas is cropped into its native
   40:17 movie frame during export, so no title strip or black bars remain. */
.cinematic-section{
  position:relative;
  z-index:2;
  padding:92px clamp(20px,5vw,84px) 104px;
  overflow:hidden;
  color:#efe4cf;
  background:
    radial-gradient(circle at 82% 12%,rgba(157,31,25,.22),transparent 34%),
    linear-gradient(135deg,rgba(8,7,5,.96),rgba(25,15,10,.96) 58%,rgba(6,6,5,.98));
  border-top:1px solid rgba(226,176,78,.3);
  border-bottom:1px solid rgba(226,176,78,.3)
}
.cinematic-section:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.16;
  background:url("../images/bg_b.jpg") center/cover;
  mix-blend-mode:screen
}
.cinematic-heading{
  position:relative;
  max-width:1320px;
  margin:0 auto 30px;
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:28px
}
.cinematic-heading p{
  margin:0 0 12px;
  color:#d5a64f;
  font:11px Arial,sans-serif;
  letter-spacing:.52em
}
.cinematic-heading h2{
  margin:0;
  font-size:clamp(30px,4vw,58px);
  letter-spacing:.1em;
  color:#f2dfba;
  text-shadow:0 8px 30px #000
}
.cinematic-heading>span{
  display:flex;
  align-items:center;
  gap:16px;
  padding-bottom:7px;
  color:#a99676;
  font-size:12px;
  letter-spacing:.2em
}
.cinematic-heading>span b{color:#dfbd79;font-weight:700}
.cinematic-heading>span i{font-style:normal;font-family:Arial,sans-serif}
.cinematic-frame{
  position:relative;
  max-width:1320px;
  aspect-ratio:40/17;
  margin:auto;
  background:#000;
  border:1px solid #a97a2d;
  box-shadow:0 32px 85px rgba(0,0,0,.72),0 0 0 8px rgba(10,7,4,.75),0 0 0 9px rgba(213,164,74,.2)
}
.cinematic-frame:before,
.cinematic-frame:after{
  content:"";
  position:absolute;
  z-index:3;
  top:-10px;
  width:72px;
  height:2px;
  background:linear-gradient(90deg,transparent,#e6b957)
}
.cinematic-frame:before{left:0}
.cinematic-frame:after{right:0;transform:scaleX(-1)}
.cinematic-frame video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#000
}
.cinematic-start{
  position:absolute;
  inset:0;
  z-index:4;
  width:100%;
  border:0;
  color:#f5e5c5;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  background:linear-gradient(rgba(4,3,2,.36),rgba(4,3,2,.76));
  backdrop-filter:blur(2px)
}
.cinematic-start[hidden]{display:none}
.cinematic-start>i{
  display:grid;
  place-items:center;
  width:62px;
  height:62px;
  padding-left:4px;
  border:1px solid #e0ae50;
  border-radius:50%;
  color:#ffd989;
  font-style:normal;
  box-shadow:0 0 36px rgba(213,142,34,.35)
}
.cinematic-start span{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.cinematic-start b{font-size:18px;letter-spacing:.16em}
.cinematic-start small{color:#c2ae8d;letter-spacing:.08em}
.cinematic-note{
  position:relative;
  max-width:1320px;
  margin:22px auto 0;
  color:#8f816b;
  text-align:right;
  font-size:11px;
  letter-spacing:.2em
}
.movie-sound{
  min-width:138px;
  justify-content:flex-end
}
.movie-sound i{
  flex:0 0 34px;
  border-color:rgba(225,176,79,.55);
  background:rgba(118,32,22,.2);
  box-shadow:inset 0 0 16px rgba(210,143,37,.08)
}
.movie-sound i:after{
  content:"♪";
  color:#f0c66f;
  font-size:16px
}
.movie-sound.muted i:after{
  content:"×";
  color:#a99c86;
  font-size:19px
}
.movie-sound span{color:#e6d5b6}
.movie-sound.muted span{color:#8e8578}
@media(max-width:800px){
  .cinematic-section{padding:72px 14px 78px}
  .cinematic-heading{align-items:flex-start;flex-direction:column;margin-bottom:24px}
  .cinematic-heading>span{padding:0}
  .cinematic-frame{box-shadow:0 18px 44px rgba(0,0,0,.7),0 0 0 4px rgba(10,7,4,.8)}
  .cinematic-start>i{width:48px;height:48px}
  .cinematic-start b{font-size:14px}
  .cinematic-start small{font-size:10px}
  .cinematic-note{text-align:left;line-height:1.8}
}
/* Moderated comments */
.comments-section{position:relative;padding:100px 24px;background:#0b0b0b;color:#e9e1d2;overflow:hidden}.comments-section:before{content:"评";position:absolute;right:5%;top:-80px;font:700 360px/1 serif;color:rgba(166,35,35,.06);pointer-events:none}.comments-inner{position:relative;z-index:1;max-width:1180px;margin:auto}.comments-heading{text-align:center;margin-bottom:38px}.comments-heading p{color:#b99356;font-size:12px;letter-spacing:.35em}.comments-heading h2{margin:10px 0 8px;font:700 38px/1.25 serif;letter-spacing:.16em;color:#fff}.comments-heading span{color:#8e8981;font-size:14px}.comments-layout{display:grid;grid-template-columns:minmax(280px,410px) 1fr;gap:36px;align-items:start}.comment-form,.comment-wall{border:1px solid rgba(185,147,86,.28);background:rgba(20,19,17,.9);box-shadow:0 18px 60px rgba(0,0,0,.28)}.comment-form{padding:28px}.comment-form label{display:block;margin:0 0 8px;color:#d7c5a5;font-size:14px}.comment-form input,.comment-form textarea{box-sizing:border-box;width:100%;margin:0 0 20px;border:1px solid #39342c;border-radius:2px;background:#111;color:#eee;padding:13px 14px;font:inherit;outline:none;transition:.2s}.comment-form input:focus,.comment-form textarea:focus{border-color:#a87338;box-shadow:0 0 0 3px rgba(168,115,56,.13)}.comment-form textarea{resize:vertical;min-height:125px}.comment-form-footer{display:flex;align-items:center;justify-content:space-between;color:#746f68;font-size:12px}.comment-form button{border:1px solid #c69a55;background:#8e251f;color:#fff;padding:11px 26px;cursor:pointer;letter-spacing:.12em}.comment-form button:hover{background:#aa3028}.comment-form button:disabled{opacity:.55;cursor:not-allowed}.comment-honeypot{position:absolute!important;left:-9999px!important}.comment-status{min-height:20px;margin:15px 0 0;font-size:13px;color:#aaa}.comment-status.success{color:#83bc84}.comment-status.error,.comment-empty.error{color:#d9857e}.comment-wall{padding:0 28px;max-height:525px;overflow:auto}.comment-wall-head{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:24px 0 17px;border-bottom:1px solid #302b25;background:#141311}.comment-wall-head h3{margin:0;color:#fff;font:700 20px serif;letter-spacing:.1em}.comment-wall-head span{color:#9d8157;font-size:12px}.comment-card{display:grid;grid-template-columns:44px 1fr;gap:15px;padding:23px 0;border-bottom:1px solid #282521}.comment-avatar{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid #6c5331;border-radius:50%;background:#211b15;color:#d8af70;font:700 19px serif}.comment-card header{display:flex;justify-content:space-between;gap:12px;margin-bottom:9px}.comment-card b{color:#d9c6a7;font-size:14px}.comment-card time{color:#6f6b65;font-size:12px}.comment-card p{margin:0;color:#aaa5a0;font-size:14px;line-height:1.8;overflow-wrap:anywhere}.comment-empty{padding:52px 0;text-align:center;color:#777}@media(max-width:760px){.comments-section{padding:72px 16px}.comments-layout{grid-template-columns:1fr}.comments-heading h2{font-size:30px}.comment-form,.comment-wall{padding-left:20px;padding-right:20px}.comment-wall{max-height:480px}}