/* Illustrated MMO ornaments: live text and accessible controls over alpha artwork. */
:root{--orange:#fb842c;--sun:#ffc627;--mint:#eaffda;--ornate-shadow:drop-shadow(0 6px 6px #497d3933)}
.hero{height:970px;background:#eef8db}.hero-wash{background:linear-gradient(180deg,#fff2,transparent 25%,transparent 65%,#f2f9ddbb 87%,#f0f7e3 100%)}.hero-copy{top:155px}.hero-copy h1{font-size:82px}.hero-seals{display:flex;justify-content:center;gap:22px;margin-top:14px}.seal-btn{display:grid;place-items:center;position:relative;width:148px;height:148px;padding:28px;border:0;background:var(--seal-art) center/contain no-repeat;color:#fff7d5;font:800 28px/1.2 var(--sans);letter-spacing:2px;text-shadow:0 2px 0 #9c531f44;filter:var(--ornate-shadow);cursor:pointer}.seal-orange{--seal-art:url('assets/ui-seal-orange.webp')}.seal-jade{--seal-art:url('assets/ui-seal-jade.webp')}.seal-btn>span{position:relative;z-index:2;display:block}.seal-btn small{display:block;font-size:12px;letter-spacing:1px;margin-top:8px}.seal-btn:after{content:'✦';position:absolute;left:17%;bottom:19%;font:15px Georgia;color:#ffefad;animation:sealSpark 3s ease-in-out infinite;pointer-events:none}.seal-jade:after{animation-delay:1.5s}.seal-btn:hover{filter:drop-shadow(0 0 14px #fff19acc) drop-shadow(0 10px 8px #6c834e55)}.hero-copy .play-btn{height:30px;margin-top:8px;gap:7px;color:#507348;font-size:12px;background:none}.hero-copy .play-ring{display:none}.hero-copy .play-icon{width:25px}.hero-copy .play-icon .ui-icon{width:19px;height:19px}.hero-copy .play-label{font-size:12px;letter-spacing:1px}
.hero-bottom{width:min(1120px,calc(100% - 72px));bottom:36px}.start-panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:16px;padding:0;border:0;border-radius:0;background:none;backdrop-filter:none;box-shadow:none}.promo-btn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-width:0;height:132px;padding:25px 32px;background:url('assets/ui-promo-gold.webp') center/100% 100% no-repeat;border:0;border-radius:0;color:#c55712;filter:drop-shadow(0 8px 7px #63894233);overflow:visible;text-align:center}.promo-btn strong{position:relative;z-index:2;font:800 23px/1.3 var(--sans);letter-spacing:0;white-space:nowrap;text-shadow:0 1px #fff995}.promo-detail{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:7px;margin-top:7px;padding:2px 4px 2px 12px;border-radius:99px;background:#fffbd5;color:#aa601a;font:700 12px/1.6 var(--sans);white-space:nowrap}.promo-detail b{background:#ffad00;color:#fffde5;padding:1px 10px;border-radius:99px;font:800 15px/1.5 var(--sans)}.promo-btn:hover{filter:drop-shadow(0 0 17px #ffe76ddd) drop-shadow(0 10px 8px #66944044)}.scroll-hint{margin-top:20px;color:#6a9359}
/* Right-side guide, with the original game character rendered inside its medallion. */
.jianghu-guide{position:fixed;right:13px;top:130px;width:210px;z-index:24;text-align:center;pointer-events:none}.guide-body{position:relative;height:605px;padding:166px 24px 60px;background:url('assets/ui-guide-frame.webp') center/100% 100% no-repeat;filter:drop-shadow(0 8px 12px #466b3433);pointer-events:auto;transition:transform .45s ease,visibility .45s}.guide-portrait{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:126px;height:126px;object-fit:contain;filter:drop-shadow(0 4px 4px #113e4d55);pointer-events:none}.guide-body h2{font:800 23px/1.3 var(--sans);color:#f77d2e;margin:0 0 12px;letter-spacing:0;text-shadow:0 1px #fff}.guide-caption{font-size:10px;letter-spacing:.5px;color:#68a080}.guide-jobs{font:700 16px/1.6 var(--serif);letter-spacing:1px;color:#5c9677;margin:8px 0}.guide-body p{font:12px/1.8 var(--sans);color:#817b43;margin:10px 0 14px;text-align:left}.guide-divider{height:1px;background:linear-gradient(90deg,transparent,#cbbb78,transparent);margin:13px 0;position:relative}.guide-divider:after{content:'◇';position:absolute;left:50%;top:-8px;transform:translateX(-50%);color:#b4aa63;background:#fffbd7;padding:0 5px;font-size:12px}.guide-toggle{position:absolute;left:-22px;top:185px;width:29px;min-height:91px;writing-mode:vertical-rl;padding:12px 5px;border:1px solid #8fb973;border-radius:9px 0 0 9px;background:#f5ffe3;color:#6b9d7d;font:14px/1.3 var(--sans);letter-spacing:3px;pointer-events:auto;box-shadow:-2px 3px 8px #6d8c3522}.guide-toggle:hover{background:#fff4ad;color:#f07e22}.guide-body .guide-btn{width:100%;height:54px;min-height:54px;font-size:16px;margin:0 auto 4px;gap:4px;letter-spacing:0}.guide-body .guide-download{display:block;font:700 20px/1.5 var(--sans);color:#5e9c7d;background:none;margin:5px auto;padding:4px 0}.guide-body .guide-download:hover{color:#f98725;text-shadow:0 0 12px #f9d66088}.guide-home{display:grid;place-items:center;position:absolute;bottom:18px;left:50%;transform:translateX(-50%);width:34px;height:34px;border:2px solid #fff2b0;border-radius:50%;background:#53a18a;color:#fff8d5;box-shadow:0 0 0 3px #cfe7aa}.guide-home:hover{background:#f3a135}.guide-home .ui-icon{width:23px;height:23px}.jianghu-guide.is-collapsed{width:0}.jianghu-guide.is-collapsed .guide-body{visibility:hidden;transform:translateX(270px);pointer-events:none}.jianghu-guide.is-collapsed .guide-toggle{left:auto;right:0;border-radius:9px 0 0 9px}.section-dots{display:none}
/* Shared painted capsule styles, with no flat filled rectangle underneath. */
main .primary-btn,main .outline-btn,main .gift-btn,.modal-shell .primary-btn,.modal-shell .outline-btn,.event-btn,.guide-btn,.text-btn,.feature-tabs button,.faction-tabs button,.class-tabs button,.weapon-faction button{--pill-art:url('assets/ui-pill-jade.webp');position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:68px;padding:16px 32px;border:0;border-radius:0;background:var(--pill-art) center/100% 145% no-repeat;color:#fff9d8;box-shadow:none;font:700 18px/1.3 var(--sans);letter-spacing:1px;text-shadow:0 1px 2px #164f4344;filter:drop-shadow(0 4px 4px #55853c22);overflow:visible;white-space:nowrap}
main .primary-btn,main .gift-btn,.guide-body .gift-btn,.modal-shell .primary-btn,.feature-tabs button[aria-selected=true],.faction-tabs button[aria-selected=true],.class-tabs button[aria-selected=true],.weapon-faction button.active{--pill-art:url('assets/ui-pill-orange.webp');color:#fffbd8;background:var(--pill-art) center/100% 145% no-repeat;box-shadow:none;border:0;text-shadow:0 1px 2px #a54e2644}
main .primary-btn:hover,main .outline-btn:hover,main .gift-btn:hover,.modal-shell .primary-btn:hover,.modal-shell .outline-btn:hover,.event-btn:hover,.guide-btn:hover,.text-btn:hover,.feature-tabs button:hover,.faction-tabs button:hover,.class-tabs button:hover,.weapon-faction button:hover{background:var(--pill-art) center/100% 145% no-repeat;color:#fffbe0;box-shadow:none;filter:drop-shadow(0 0 9px #ffe8a4bb) drop-shadow(0 7px 5px #548f4244)}
main .shine:before,.modal-shell .shine:before{display:none}.text-btn{min-width:225px;font-size:16px;gap:7px}.feature-copy .text-btn{color:#fff8dc;min-height:62px;font-size:15px;margin-top:16px}.feature-tabs,.faction-tabs{border:0;border-radius:0;background:none;box-shadow:none;padding:0;gap:14px}.feature-tabs button{min-height:80px;font-size:23px}.feature-tabs .ui-icon{width:24px;height:24px;--icon-accent:#ffe8a2}.faction-tabs button{min-width:190px;min-height:66px;padding:15px 30px;font-size:19px}.faction-tabs[data-faction='1'] button[aria-selected=true]{color:#fffbd8;background:var(--pill-art) center/100% 145% no-repeat}.class-tabs{gap:13px;max-width:1050px}.class-tabs button{flex:1;padding:16px 19px;min-height:70px;font-size:22px;gap:7px}.class-tabs .ui-icon{width:24px;height:24px;--icon-accent:#ffe8a2}.weapon-faction{padding:0;background:none;border:0;gap:3px}.weapon-faction button{min-height:43px;padding:10px 16px;font-size:11px;letter-spacing:0}.weapon-faction .ui-icon{display:none}.circle-btn,.feature-pagination .circle-btn,.back-top,.modal-close{border:2px solid #f8d986;background:linear-gradient(140deg,#439f81,#22735f);color:#fff6cc;border-radius:50%;box-shadow:0 0 0 2px #fffde799,inset 0 0 0 1px #145f5244;transition:transform .3s,filter .3s}.circle-btn:hover,.feature-pagination .circle-btn:hover,.back-top:hover,.modal-close:hover{background:linear-gradient(140deg,#ffb42c,#ed7525);color:#fff7d9;filter:drop-shadow(0 0 8px #ffdc88aa);box-shadow:0 0 0 2px #fff9}.back-top{width:46px;height:46px}.gallery-bottom .outline-btn{min-width:245px}.gallery-bottom>span{color:#5d8e5c}
/* Illustrated landscapes, ornate borders and drifting clouds replace the old mesh panels. */
.features{background:linear-gradient(#f0f7e3dd,#f7fbdfec),url('assets/world.webp') center/cover}.gallery{background:linear-gradient(#f7fbdfef,#e7f6dcf5),url('assets/hero.webp') center/cover;border-top:0}.classes .class-landscape{background:linear-gradient(#e7f6dcdf,#f6fadbeb),url('assets/world.webp') center/cover}.section-heading h2{color:#397a60;text-shadow:0 2px #fff9}.section-kicker{color:#b38838}.feature-stage{border:3px solid #f4de9c;border-radius:32px 9px 32px 9px;box-shadow:0 0 0 2px #64a281,0 15px 32px #60834622}.feature-stage:after{content:'';position:absolute;inset:8px;border:1px solid #ffefa277;border-radius:22px 4px 22px 4px;pointer-events:none;z-index:5}.gear-card{padding:10px 10px 18px;border:2px solid #afd17c;border-radius:29px 8px 29px 8px;background:linear-gradient(135deg,#fffeda,#f1f8d9);box-shadow:inset 0 0 0 3px #fffefa,0 6px 15px #6b9c3822;overflow:hidden}.gear-card:hover{border-color:#ffc766;box-shadow:inset 0 0 0 3px #fffefa,0 0 20px #ffe59799,0 15px 24px #668f3e33}.gear-thumbnail{border:2px solid #f1d486;border-radius:21px 6px 21px 6px}.gear-title{font-family:var(--sans);font-size:20px;color:#4a8060}.gear-action{color:#b2812d}.character-halo{border:2px solid #ddc37b;background:radial-gradient(circle,#e4f5b6,#d1e9b533,transparent 70%);box-shadow:0 0 0 10px #fff3,0 0 0 11px #a2c89044}.character-caption{background:#fffade;border:2px solid #d5bf79;border-radius:20px 5px;color:#608462;box-shadow:0 4px 12px #72954322}.weapon-preview{border:2px solid #a9c976;border-radius:24px 6px;background:#fffbdc;box-shadow:inset 0 0 0 3px #fff}.class-note{background:#f5f5d4;border-color:#ccda9c}.journey{position:relative;isolation:isolate;background:linear-gradient(#f4fadcde,#ebf6d8d9),url('assets/world.webp') center 56%/cover}.journey-actions{gap:18px;align-items:center}.journey-actions .seal-btn{min-width:0;width:162px;height:162px;font-size:29px;padding:30px;flex:none}.journey-actions .outline-btn{min-width:228px}.journey h2{color:#36795f}.journey p{color:#719467}.modal-shell{background:linear-gradient(140deg,#fffce6,#f0f7da);border:3px solid #b7cf84;border-radius:36px 9px 36px 9px;box-shadow:inset 0 0 0 4px #fffce9,0 0 0 2px #ffe1a0}.modal-shell h2{color:#4b8766;font-family:var(--sans)}.modal-ornament{color:#f1a02f}.modal-shell .primary-btn,.modal-shell .outline-btn{font-size:16px;letter-spacing:0;min-height:72px;padding-inline:27px}.modal-close{width:39px;height:39px}.download-specs,.modal-benefits,.feature-details{background:#f5f5d8;border-color:#d9d49e}.modal-shell .support-email{margin-top:14px;color:#668863}.footer{background:#e6efd6}
.ambient-surface{isolation:isolate;position:relative;overflow:hidden}.ambient-field{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none;transform:translate(var(--field-x,0px),var(--field-y,0px));transition:transform .8s ease}.fluid-orb{position:absolute;display:block;width:370px;height:145px;border:2px solid #a6c97d30;border-radius:50%;box-shadow:0 0 0 13px #fff6,0 0 0 15px #d8c06e24,0 0 0 28px #fff3,0 0 0 30px #a6c97d20;transform:rotate(-15deg);opacity:.7}.fluid-jade{left:-170px;top:70px}.fluid-gold{right:-160px;bottom:90px;transform:rotate(15deg);border-color:#d8ba6533}.surface-awake .fluid-orb{animation:cloudDrift 14s ease-in-out infinite alternate}.surface-awake .fluid-gold{animation-delay:-7s}
.interactive-btn{transform:perspective(800px) translate3d(var(--push-x,0px),var(--push-y,0px),0) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .28s ease,filter .28s ease;isolation:isolate;touch-action:manipulation}.interactive-btn:hover{transform:perspective(800px) translate3d(var(--push-x,0px),calc(var(--push-y,0px) - 4px),0) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}.interactive-btn:active{transform:scale(.96);filter:brightness(1.08)}.promo-btn:before,.seal-btn:before{content:'';position:absolute;inset:17% 11%;background:radial-gradient(ellipse at var(--light-x,50%) var(--light-y,50%),#fff6,transparent 65%);border-radius:50%;opacity:0;pointer-events:none;z-index:1}.promo-btn.pointer-active:before,.seal-btn.pointer-active:before{opacity:1}.ui-ripple{position:absolute;left:var(--ripple-x);top:var(--ripple-y);width:var(--ripple-size);height:var(--ripple-size);border-radius:50%;background:radial-gradient(circle,#fff9,transparent 60%);transform:translate(-50%,-50%) scale(0);animation:ornateRipple .7s ease-out;pointer-events:none;z-index:3}.promo-btn .ui-ripple,.seal-btn .ui-ripple{width:100px;height:100px}button:focus-visible,a:focus-visible{outline:3px solid #ee8c27;outline-offset:5px}.ui-paused *,.ui-paused *:after{animation-play-state:paused!important}
@keyframes ornateRipple{to{transform:translate(-50%,-50%) scale(1);opacity:0}}@keyframes sealSpark{0%,100%{opacity:.35;transform:scale(.7)}50%{opacity:1;transform:scale(1.2) rotate(35deg)}}@keyframes cloudDrift{to{transform:translate(25px,-13px) rotate(-10deg)}}
@media(min-width:1700px){.hero{height:1010px}.hero-copy{top:170px}.hero-copy h1{font-size:94px}.hero-bottom{bottom:42px}}
@media(max-width:1250px){.jianghu-guide{width:204px;right:9px;top:140px}.guide-body{height:595px;padding:167px 22px 65px}.guide-portrait{width:127px;height:127px;top:12px}.guide-body h2{font-size:22px}.guide-body .guide-btn{font-size:15px;height:55px;min-height:55px;padding:14px 12px}.guide-body p{font-size:11px}.guide-divider{margin:12px 0}.guide-jobs{font-size:16px}.guide-body .guide-download{font-size:18px;margin:4px auto}.promo-btn strong{font-size:20px}.promo-btn{height:122px;padding:24px}.feature-tabs button{font-size:21px}.class-tabs button{font-size:20px;padding-inline:16px}}
@media(max-width:1050px){.jianghu-guide{width:220px;top:140px}.guide-body{height:625px;padding-top:176px}.guide-portrait{width:136px;height:136px}.guide-body h2{font-size:23px}.guide-toggle{top:115px}.hero-bottom{width:calc(100% - 40px)}.promo-btn{height:115px;padding:23px 20px}.promo-btn strong{font-size:18px}.promo-detail{font-size:10px;padding-left:9px;gap:5px}.promo-detail b{font-size:12px;padding-inline:8px}.hero{height:940px}.hero-copy{top:157px}.hero-copy h1{font-size:78px}.class-tabs button{font-size:18px;gap:5px}}
@media(max-width:650px){.hero{height:1000px}.hero-copy{top:155px;max-width:330px}.hero-copy h1{font-size:60px}.hero-seals{gap:8px;margin-top:15px}.seal-btn{width:124px;height:124px;font-size:25px;padding:26px}.seal-btn small{font-size:10px;margin-top:6px}.hero-copy .play-btn{margin-top:10px}.hero-bottom{width:calc(100% - 28px);bottom:27px}.start-panel{grid-template-columns:1fr;gap:1px;max-width:365px;margin:auto}.promo-btn{height:94px;padding:18px 30px;background-size:100% 100%}.promo-btn strong{font-size:21px;line-height:1.15}.promo-detail{font-size:11px;margin-top:5px}.promo-detail b{font-size:12px}.scroll-hint{margin-top:12px}.scroll-hint>span{height:16px}.jianghu-guide{top:auto;bottom:74px;right:10px;width:214px}.guide-body{height:590px;padding:165px 23px 65px}.guide-portrait{top:12px;width:130px;height:130px}.guide-body h2{font-size:22px}.guide-body .guide-btn{min-height:52px;height:52px;font-size:15px}.guide-body .guide-download{font-size:17px}.guide-toggle{top:235px;left:-25px}.jianghu-guide.is-collapsed{width:28px;height:106px;top:36vh;bottom:auto;right:0}.jianghu-guide.is-collapsed .guide-toggle{top:0;right:0;writing-mode:vertical-rl;width:28px;min-height:106px;letter-spacing:3px;border-radius:9px 0 0 9px;background:#fffada;border:2px solid #c7d78d;font-size:12px;color:#648f68;padding:12px 5px}.feature-tabs{grid-template-columns:repeat(2,1fr);gap:2px 8px}.feature-tabs button{flex-direction:row;min-height:58px;padding:15px 12px;font-size:18px;gap:7px}.feature-tabs .ui-icon{width:20px;height:20px}.faction-tabs{gap:5px;width:100%;justify-content:center}.faction-tabs button{min-width:0;flex:1;padding:16px 10px;font-size:16px;min-height:60px;gap:5px}.class-tabs{flex-wrap:wrap;justify-content:center;gap:2px 6px}.class-tabs button{flex:0 0 calc(50% - 6px);flex-direction:row;min-height:55px;font-size:17px;padding:15px 9px;gap:4px}.class-tabs .ui-icon{width:18px;height:18px}.text-btn{min-width:220px;min-height:62px;padding:16px 27px;font-size:15px}.feature-copy .text-btn{font-size:14px;margin-top:10px;min-height:57px}.weapon-faction button{min-height:37px;padding:8px 11px;font-size:10px}.gallery-bottom .outline-btn{min-height:65px;font-size:17px}.journey-actions{gap:8px 15px;flex-wrap:wrap}.journey-actions .seal-btn{width:140px;height:140px;font-size:26px;flex:none}.journey-actions .outline-btn{flex:0 0 230px;min-height:66px;font-size:16px}.modal-shell .primary-btn,.modal-shell .outline-btn{min-height:66px;font-size:14px;padding-inline:23px;gap:7px}.modal-shell .primary-btn>.ui-icon{width:21px;height:21px}.modal-shell{padding:37px 22px 26px}.modal-shell h2{font-size:27px}.gear-title{font-size:18px}.fluid-orb{width:260px;height:100px}.guide-jobs{font-size:16px}.back-top{right:15px;bottom:16px}}
@media(max-width:360px){.hero-copy h1{font-size:54px}.hero-copy{top:155px;max-width:300px}.hero-subtitle{font-size:15px}.hero{height:970px}.hero-bottom{bottom:25px}.promo-btn{height:88px;padding:15px 22px}.promo-btn strong{font-size:20px}.class-tabs button{font-size:16px}.feature-tabs button{font-size:16px}.faction-tabs button{font-size:14px}.gear-title{font-size:16px}.modal-shell .primary-btn,.modal-shell .outline-btn{font-size:12px;padding-inline:15px}}
.guide-body a.guide-download{font-size:17px;line-height:1.5;margin-top:0;padding:0}.guide-body p{margin:8px 0 10px}
.header .small-cta{background:url('assets/ui-pill-jade.webp') center/100% 145% no-repeat;border:0;border-radius:0;box-shadow:none;min-height:58px;padding:13px 19px;color:#fffbd8;filter:drop-shadow(0 3px 3px #547b3522)}.header .small-cta:hover{filter:drop-shadow(0 0 8px #ffde8c99)}.header .small-cta.shine:before{display:none}
@media(max-width:650px){.header .small-cta{min-height:49px;padding:11px 13px}}
@media(max-width:360px){.header .small-cta{padding:11px 10px}}
@media(prefers-reduced-motion:reduce){.interactive-btn,.interactive-btn:hover,.interactive-btn:active{transform:none}.fluid-orb,.seal-btn:after{animation:none}.ui-ripple{display:none}.guide-body{transition:none}}