:root{--red:#a83b32;--jade:#7dd89b;--paper:#f4ead2;--radius:18px;--radius-lg:28px}
body{background-color:#08120f;background-image:url('assets/cloud-pattern.svg'),radial-gradient(circle at 20% 16%,rgba(155,56,44,.06),transparent 25%);background-attachment:fixed;background-position:0 140px,center}
.site-header{height:88px}.site-header.scrolled{background:rgba(6,17,14,.92)}
.brand-original img{display:block;width:176px;height:auto}.site-footer .brand-original img{content:url('assets/uwow-logo-header.webp')}.brand-original{flex:none}
.button,.eyebrow,.feature-icon,.copy-realm,.qq-groups button,.accordion details,.floating-chip{border-radius:12px}.button-primary{border-radius:999px;background:linear-gradient(115deg,#70d990,#b5ed9d);box-shadow:0 9px 28px rgba(60,166,99,.2)}.button-ghost{border-radius:999px}.button-sm{border-radius:999px}
.hero-media{background-image:url('assets/uwowcn-chinese-hero.jpg');background-position:center 50%}.hero-vignette{background:linear-gradient(90deg,rgba(4,14,11,.97) 0%,rgba(4,14,11,.82) 27%,rgba(4,14,11,.12) 60%,rgba(4,14,11,.05)),linear-gradient(180deg,rgba(0,0,0,.15),transparent 45%,rgba(5,15,11,.78))}.hero h1{letter-spacing:-.035em}.hero h1 em,.section-heading h2 em{-webkit-text-stroke:0;color:#93dfa3;text-shadow:0 0 30px rgba(96,202,132,.22)}
.server-pulse{margin:-18px auto 0;width:min(1220px,calc(100% - 32px));border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;z-index:3;box-shadow:0 22px 60px rgba(0,0,0,.2)}
.feature-grid{gap:16px;border:0}.feature-card{border:1px solid var(--line)!important;border-radius:var(--radius-lg);min-height:340px}.feature-card:hover{border-color:rgba(125,216,155,.34)!important}.feature-card::after{left:34px;right:34px;border-radius:99px}.feature-icon{border-radius:16px}
.journey{margin-inline:16px;border-radius:38px;min-height:760px}.portal-ring{border-radius:50%}.portal-core{border-radius:50%}.floating-chip{border-radius:14px}.check-list li{border-color:rgba(215,184,110,.13)}
.step-grid{gap:20px}.step-card{border-radius:var(--radius-lg);overflow:hidden}.community-bar{border-radius:var(--radius-lg)}.copy-realm,.qq-groups button{border-radius:10px}.faq-heading .button{margin-top:4px}.accordion details{margin-bottom:12px;border:1px solid var(--line)!important;background:rgba(13,28,21,.6);padding-inline:18px}.final-cta{margin:16px;border-radius:38px}.final-cta-bg{background-image:linear-gradient(rgba(4,14,10,.64),rgba(3,11,8,.88));background-position:center 35%}.final-cta-bg.loaded{background-image:linear-gradient(rgba(4,14,10,.64),rgba(3,11,8,.88)),url('assets/chinese-fantasy-reference.jpg')}
.language-picker{position:relative}.language-picker summary{list-style:none;min-width:84px;height:39px;border:1px solid var(--line);border-radius:999px;display:flex;align-items:center;justify-content:center;gap:9px;color:#cad3cb;font-size:11px;cursor:pointer;background:rgba(255,255,255,.035)}.language-picker summary::-webkit-details-marker{display:none}.language-picker summary i{font-style:normal;color:#8bd79d;transition:.2s}.language-picker[open] summary i{transform:rotate(180deg)}.language-picker>div{position:absolute;top:48px;right:0;width:176px;padding:8px;background:rgba(8,20,15,.98);border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 45px rgba(0,0,0,.35)}.language-picker a{display:flex;justify-content:space-between;padding:10px 12px;border-radius:10px;font-size:11px;color:#a9b4ab}.language-picker a:hover,.language-picker a.active{background:rgba(125,216,155,.1);color:#e9f4eb}.language-picker small{color:#688073}.mobile-languages{display:flex!important;gap:8px;padding-top:14px}.mobile-languages a{border:1px solid var(--line)!important;border-radius:999px!important;padding:7px 14px!important}.mobile-languages a.active{background:rgba(125,216,155,.12);color:#9ee2ad}
@media(max-width:1000px){.site-header{height:72px}.mobile-nav{top:72px;border-radius:0 0 22px 22px}.language-picker{display:none}.brand-original img{width:128px}.menu-button{border-radius:14px}}
@media(max-width:700px){.hero-media{background-position:67% center}.server-pulse{margin-top:-12px}.feature-card{border-radius:22px!important}.journey,.final-cta{margin-inline:8px;border-radius:28px}.section-heading h2,.journey-copy h2,.faq-heading h2{line-height:1.18}.community-bar{border-radius:22px}.site-footer{border-radius:28px 28px 0 0}}

/* Legion-era fel gateway visual */
.journey-art{isolation:isolate}
.journey-art::before{content:"";position:absolute;z-index:-1;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(110,255,62,.18),rgba(44,162,49,.07) 42%,transparent 72%);filter:blur(18px)}
.legion-portal-art{position:absolute;z-index:0;left:50%;top:50%;width:min(100%,590px);height:auto;transform:translate(-50%,-50%);filter:drop-shadow(0 30px 36px rgba(0,0,0,.58)) drop-shadow(0 0 34px rgba(92,255,53,.16));animation:legionPortalBreath 6s ease-in-out infinite;pointer-events:none;user-select:none}
.portal-core{position:relative;z-index:2;width:154px;height:154px;border:1px solid rgba(192,255,164,.34);background:radial-gradient(circle,rgba(5,23,10,.78),rgba(3,14,7,.62) 56%,rgba(82,226,54,.13) 72%,transparent 74%);box-shadow:0 0 48px rgba(77,246,50,.34),inset 0 0 36px rgba(71,216,52,.18);font-size:48px}
.portal-core::before{content:"";position:absolute;inset:9px;border:1px solid rgba(180,255,142,.18);border-radius:50%;box-shadow:inset 0 0 24px rgba(92,236,68,.12)}
.portal-core span,.portal-core small{position:relative;z-index:1}
.floating-chip{z-index:3;border-color:rgba(151,245,112,.2);background:linear-gradient(135deg,rgba(6,18,12,.9),rgba(12,30,18,.76));box-shadow:0 14px 35px rgba(0,0,0,.28)}
.chip-one{top:48px;right:-4px}.chip-two{left:-6px;bottom:118px}.chip-three{right:2px;bottom:48px}
@keyframes legionPortalBreath{0%,100%{transform:translate(-50%,-50%) scale(.985);filter:drop-shadow(0 30px 36px rgba(0,0,0,.58)) drop-shadow(0 0 26px rgba(92,255,53,.12))}50%{transform:translate(-50%,-51%) scale(1.01);filter:drop-shadow(0 34px 42px rgba(0,0,0,.62)) drop-shadow(0 0 42px rgba(92,255,53,.22))}}
@media(max-width:1000px){.legion-portal-art{width:min(100%,500px)}.journey-art::before{width:420px;height:420px}.portal-core{width:138px;height:138px;font-size:42px}}
@media(max-width:700px){.journey-art{height:430px}.legion-portal-art{width:min(104%,410px)}.journey-art::before{width:330px;height:330px}.portal-core{width:120px;height:120px;font-size:36px}.portal-core small{font-size:7px}.chip-one{top:10px;right:0}.chip-two{left:0;bottom:68px}.chip-three{right:0;bottom:12px}}
@media(prefers-reduced-motion:reduce){.legion-portal-art{animation:none}}

/* Animated energy inside the hero gateway */
.hero-portal-fx{position:absolute;z-index:1;left:0;top:0;width:100px;height:160px;border-radius:48%;pointer-events:none;mix-blend-mode:screen;opacity:.78;filter:drop-shadow(0 0 18px rgba(101,255,224,.72));transform:translate(-50%,-50%);overflow:visible}
.hero-portal-fx::before{content:"";position:absolute;inset:-10%;border-radius:48%;background:conic-gradient(from 35deg,transparent 0 9%,rgba(126,255,226,.65) 13%,transparent 22% 37%,rgba(81,235,204,.55) 43%,transparent 51% 72%,rgba(187,255,239,.48) 78%,transparent 88%);filter:blur(7px);animation:heroPortalSpin 8s linear infinite}
.hero-portal-fx::after{content:"";position:absolute;inset:6% 12%;border-radius:48%;background:radial-gradient(ellipse at 48% 50%,rgba(231,255,250,.34),rgba(77,235,210,.24) 34%,rgba(39,195,173,.08) 62%,transparent 74%);box-shadow:0 0 26px rgba(94,255,224,.68),inset 0 0 22px rgba(213,255,247,.28);animation:heroPortalPulse 3.4s ease-in-out infinite}
.hero-portal-fx i,.hero-portal-fx b{position:absolute;z-index:2;inset:-18% -34%;border-radius:50%;background-image:radial-gradient(circle,rgba(219,255,248,.95) 0 1px,transparent 2px),radial-gradient(circle,rgba(90,255,221,.8) 0 1.5px,transparent 2.5px),radial-gradient(circle,rgba(149,255,234,.7) 0 1px,transparent 2px);background-size:31px 43px,47px 37px,59px 53px;background-position:7px 8px,19px 27px,33px 14px;opacity:.55;animation:heroPortalParticles 5.8s linear infinite}
.hero-portal-fx b{inset:-26% -46%;opacity:.35;filter:blur(.5px);animation-duration:8.5s;animation-direction:reverse}
@keyframes heroPortalSpin{to{transform:rotate(360deg)}}
@keyframes heroPortalPulse{0%,100%{transform:scale(.92);opacity:.62}50%{transform:scale(1.07);opacity:1}}
@keyframes heroPortalParticles{0%{transform:translateY(12px) rotate(0);opacity:.25}45%{opacity:.62}100%{transform:translateY(-22px) rotate(8deg);opacity:.1}}
@media(prefers-reduced-motion:reduce){.hero-portal-fx::before,.hero-portal-fx::after,.hero-portal-fx i,.hero-portal-fx b{animation:none}.hero-portal-fx{opacity:.42}}

/* Lightweight fel flame cursor trail for mouse/trackpad devices */
.fel-cursor-glow{position:fixed;z-index:9998;left:0;top:0;width:38px;height:38px;border-radius:50%;pointer-events:none;opacity:0;transform:translate3d(-50%,-50%,0);background:radial-gradient(circle,rgba(220,255,191,.82) 0 5%,rgba(111,255,92,.42) 22%,rgba(37,220,92,.16) 48%,transparent 72%);filter:blur(1px) drop-shadow(0 0 8px rgba(97,255,84,.72));mix-blend-mode:screen;transition:opacity .2s,width .2s,height .2s;will-change:transform}
.fel-cursor-glow.is-visible{opacity:.9}.fel-cursor-glow.is-active{width:56px;height:56px}
.fel-cursor-particle{position:fixed;z-index:9997;left:0;top:0;width:var(--fel-size,8px);height:calc(var(--fel-size,8px)*1.55);border-radius:55% 48% 62% 38%;pointer-events:none;transform:translate3d(-50%,-50%,0) rotate(45deg);background:radial-gradient(circle at 45% 68%,rgba(229,255,178,.95) 0 10%,rgba(103,255,72,.82) 28%,rgba(31,204,83,.45) 54%,transparent 76%);box-shadow:0 0 9px rgba(98,255,73,.62);mix-blend-mode:screen;will-change:transform,opacity;animation:felCursorTrail var(--fel-life,680ms) cubic-bezier(.18,.7,.2,1) forwards}
@keyframes felCursorTrail{0%{opacity:.88;transform:translate3d(-50%,-40%,0) scale(.9) rotate(42deg)}45%{opacity:.62}100%{opacity:0;transform:translate3d(calc(-50% + var(--fel-drift,0px)),calc(-50% - var(--fel-rise,30px)),0) scale(.15) rotate(74deg)}}
@media(pointer:coarse),(prefers-reduced-motion:reduce){.fel-cursor-glow,.fel-cursor-particle{display:none!important}}

/* Crawlable server facts and below-the-fold rendering optimization */
.seo-overview{position:relative;padding:74px 0;border-block:1px solid rgba(183,226,181,.1);background:linear-gradient(115deg,rgba(8,24,16,.98),rgba(9,31,19,.88)),radial-gradient(circle at 78% 50%,rgba(89,218,101,.1),transparent 34%)}
.seo-overview-layout{display:grid;grid-template-columns:1.08fr .92fr;gap:72px;align-items:center}
.seo-overview-copy h2{margin:12px 0 18px;font:clamp(30px,3.2vw,46px)/1.15 Georgia,"STSong",serif;letter-spacing:-.025em;color:#eff5e8}
.seo-overview-copy p{max-width:690px;margin:0 0 11px;color:#98aa9d;font-size:13px;line-height:1.9}
.server-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;border:1px solid rgba(156,226,151,.14);border-radius:22px;overflow:hidden;background:rgba(4,15,9,.42)}
.server-facts div{min-height:82px;padding:18px 20px;border-right:1px solid rgba(156,226,151,.1);border-bottom:1px solid rgba(156,226,151,.1)}
.server-facts div:nth-child(2n){border-right:0}.server-facts div:nth-last-child(-n+2){border-bottom:0}
.server-facts dt{margin-bottom:7px;color:#66796c;font-size:9px;letter-spacing:.12em;text-transform:uppercase}.server-facts dd{margin:0;color:#dff0d8;font:600 13px/1.3 system-ui,sans-serif;overflow-wrap:anywhere}
.intro,.journey,.start,.faq,.final-cta{content-visibility:auto;contain-intrinsic-size:auto 760px}
@media(max-width:900px){.seo-overview-layout{grid-template-columns:1fr;gap:36px}}
@media(max-width:700px){.seo-overview{padding:58px 0}.seo-overview-copy h2{font-size:34px}.server-facts div{padding:15px;min-height:75px}.server-facts dd{font-size:12px}}
