﻿/* 01 全局颜色和字体 */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #101111; color: #e5e0d7; font: 16px/1.8 "Microsoft YaHei",sans-serif; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
a:focus-visible,button:focus-visible { outline: 2px solid #e4bb75; outline-offset: 5px; }
.wrap { max-width: 1200px; width: 88%; margin: auto; }
header { height: 90px; display:flex; align-items:center; justify-content:space-between; padding:0 5%; border-bottom:1px solid #aa895136; background:#111211; }
.brand { display:flex; gap:14px; align-items:center; font:24px SimSun,serif; letter-spacing:3px; color:#d8b679; }
.brand b { border:1px solid #ad8b51; padding:8px; font-weight:normal; }
.brand small { display:block; font:9px/2.5 Georgia,serif; letter-spacing:2px; }
nav { display:flex; gap:30px; font-size:14px; color:#aaa69d; }
nav a:hover { color:#e9c689; }
.nav-download { border:1px solid #a78a53; padding:8px 19px; color:#ddbf87; font-size:13px; }
/* 02 首页背景及主按钮 */
.hero { min-height:740px; height:calc(100vh - 90px); max-height:1000px; position:relative; background:linear-gradient(90deg,rgba(8,12,12,.6),transparent 80%),linear-gradient(0deg,#101111,transparent 28%),url('assets/hero.png') center/cover no-repeat; }
.hero-content { padding:80px 0 70px 8%; max-width:820px; }
.eyebrow { font:12px/1.8 Georgia,"Microsoft YaHei",serif; letter-spacing:3px; color:#c1a16a; }
.pretitle { margin:35px 0 12px; letter-spacing:7px; font-size:14px; }
h1 { font:clamp(64px,7vw,108px)/1.2 KaiTi,STKaiti,SimSun,serif; margin:0; color:#e9c98e; letter-spacing:8px; text-shadow:0 3px 30px #000; }
.english { font:10px Georgia; letter-spacing:7px; color:#ba9a62; margin:20px 0 36px; }
h2 { font:36px/1.6 SimSun,serif; font-weight:normal; }
.hero h2 { font-size:29px; margin:0 0 18px; letter-spacing:3px; }
.lead,.muted { color:#aaa99f; font-size:14px; }
.actions { display:flex; gap:16px; margin-top:30px; }
.button { display:inline-flex; align-items:center; justify-content:space-between; gap:35px; padding:15px 28px; border:1px solid #ad9464; color:#ddc295; font-size:16px; transition:filter .2s,transform .2s; }
.button:hover { filter:brightness(1.14); transform:translateY(-2px); }
.gold { background:linear-gradient(110deg,#d7b97b,#ae874c); color:#201b14; border-color:#e3c58d; box-shadow:0 0 24px #b9954726; }
.hero-note { font-size:12px; color:#aaa18e; margin-top:25px; }
.hero-note i { font-style:normal; color:#af8a50; margin:0 15px; font-size:8px; }
.scroll { position:absolute; bottom:28px; left:50%; font-size:10px; letter-spacing:4px; color:#b39b73; }
.scroll span { display:block; text-align:center; font-size:25px; }
.hero-number { position:absolute; bottom:32px; right:5%; font-size:11px; color:#b6a17e; }
.ribbon { display:flex; justify-content:center; border-top:1px solid #b3955538; border-bottom:1px solid #b3955538; padding:28px; gap:90px; background:#151614; }
.ribbon span { color:#918d81; font-size:13px; }.ribbon strong { color:#d5b378; font:26px Georgia,SimSun; margin-right:16px; }
/* 03 内容版块 */
.section { padding-top:105px; padding-bottom:105px; scroll-margin-top:20px; }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:35px; }
.section-head>p { color:#95958d; font-size:14px; padding-bottom:20px; }
h2 em { font-style:normal; color:#c3a476; }
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:50px; margin-top:50px; }
.features article { border-top:1px solid #66573e; padding-top:25px; }
.features span { color:#9e8359; font-size:12px; letter-spacing:3px; }
h3 { font:25px/1.6 SimSun,serif; }
.features p { color:#98988f; font-size:14px; }
.classes { background:#181a18; border-block:1px solid #b3955525; }
.class-layout { display:grid; grid-template-columns:1fr 1.2fr; gap:70px; }
.tabs { display:flex; gap:12px; margin-top:35px; }.tabs button { border:1px solid #5c533f; background:none; color:#aaa69b; padding:12px 20px; }.tabs button[aria-selected="true"] { background:#bd9d65; color:#151714; }
.class-detail { position:relative; display:flex; align-items:center; min-height:300px; padding:35px; border-left:1px solid #736044; overflow:hidden; }
#class-rune { position:absolute; right:0; top:0; font:260px KaiTi,serif; color:#c1a36b12; pointer-events:none; }
.class-detail>div { position:relative; }.class-detail h3 { font-size:45px; margin:10px 0; color:#e1c28a; }.class-detail p { max-width:400px; color:#aaa99c; }.class-tag { font-size:12px; letter-spacing:2px; color:#bd9d65!important; }
.news { display:grid; grid-template-columns:1fr 1fr; gap:70px; }.bulletin>div { padding:24px 0; border-bottom:1px solid #504734; }.bulletin span { font-size:11px; color:#a78e67; letter-spacing:2px; }.bulletin strong { display:block; font-size:22px; font-weight:normal; margin-top:8px; }.bulletin p { font-size:13px; color:#92958c; margin-bottom:0; }
.support { background:#191b18; }.contacts { display:grid; grid-template-columns:1fr 1fr 1.2fr; gap:36px; margin:50px 0 25px; }.contacts article { padding:20px 0; border-top:1px solid #756344; }.contacts small { display:block; color:#a99c82; }.contacts strong { display:block; font:26px Georgia; margin:25px 0; }.contacts button { background:none; border:0; padding:0; color:#d4b57f; font-size:13px; }.groups { margin-top:18px; }.groups button { display:flex; width:100%; justify-content:space-between; border-bottom:1px solid #ffffff10; padding:8px 0; }.groups span { color:#8d8e83; font-size:11px; }
.closing { text-align:center; padding:90px 0; }.closing p { font:27px/1.8 SimSun,serif; margin-bottom:30px; }
footer { border-top:1px solid #66563d; padding:30px 0; display:flex; justify-content:space-between; align-items:center; gap:25px; }footer span { color:#b79b68; }footer p { font-size:11px; color:#72776e; }
#toast { position:fixed; bottom:35px; left:50%; transform:translateX(-50%); background:#e1c18a; color:#191a16; padding:10px 25px; opacity:0; pointer-events:none; transition:opacity .2s; }#toast.show { opacity:1; }
.subpage { max-width:850px; margin:80px auto; padding:40px; border:1px solid #77613c; background:#191c18; }.subpage h1 { font-size:44px; }.subpage p { color:#aaa; }.subpage a { color:#d8b87f; }
@media(max-width:900px){nav{gap:14px;font-size:12px}.nav-download{display:none}.hero-content{padding-left:6%}.features{gap:25px}.class-layout,.news{gap:30px}.contacts{grid-template-columns:1fr 1fr}.contacts article:last-child{grid-column:1/-1}.ribbon{gap:30px}.tabs{gap:6px}.tabs button{padding:10px}}
@media(max-width:600px){header{height:auto;min-height:80px;flex-wrap:wrap;gap:12px;padding:14px 6%}nav{width:100%;justify-content:space-between}.brand{font-size:21px}.hero{height:auto;min-height:710px;background-position:65% center}.hero-content{padding-top:55px;padding-right:6%;background:linear-gradient(90deg,#0a0f0fe0,#0a0f0f35)}h1{font-size:63px;letter-spacing:3px}.hero h2{font-size:24px}.pretitle{letter-spacing:3px}.button{padding:13px 18px;font-size:14px;gap:20px}.hero-number{display:none}.scroll{left:auto;right:6%}.ribbon{justify-content:space-between;gap:10px;padding:20px}.ribbon span{font-size:10px}.ribbon strong{display:block;font-size:20px;margin:0 0 5px}.section{padding-top:65px;padding-bottom:65px}h2{font-size:28px}.section-head{display:block}.features,.class-layout,.news,.contacts{display:block}.features article{margin-top:30px}.class-detail{margin-top:30px}.contacts article{margin-top:20px}.closing p{font-size:22px}footer{display:block}.subpage{margin:30px 5%;padding:25px}.subpage h1{font-size:32px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* 07 第二版：品牌主视觉与职业殿堂 */
header { background:#0b0d0ee8; height:84px; border-bottom:1px solid #9e805340; }
.hero { min-height:860px; max-height:1100px; height:calc(100vh - 84px); background-position:center; }
.hero-content { padding-top:65px; max-width:850px; }
.version-mark { color:#d5b77e; font:38px Georgia; letter-spacing:4px; margin:25px 0 0; }
.version-mark small { font:12px 'Microsoft YaHei'; border:1px solid #b4945d; padding:5px 9px; vertical-align:middle; letter-spacing:3px; }
h1 { font-size:clamp(76px,8vw,130px); letter-spacing:6px; color:#f2d7a0; text-shadow:0 2px 0 #7e6139,0 5px 9px #000,0 0 70px #b58a3d42; margin:8px 0; }
.pretitle { display:flex; gap:15px; align-items:center; margin:12px 0; font-size:12px; color:#c6b18c; }
.pretitle span { width:30px; height:1px; background:#a0834f; }
.english { margin:18px 0 22px; letter-spacing:5px; }
.hero-divider { display:flex; align-items:center; color:#bba16d; gap:16px; max-width:480px; margin-bottom:25px; font-size:10px; }
.hero-divider:before,.hero-divider:after { content:''; height:1px; background:linear-gradient(90deg,transparent,#ac8c50); flex:1; }.hero-divider:after{transform:rotate(180deg)}
.hero h2 { font-size:28px; color:#f0e5d0; }
.actions .button { min-width:200px; min-height:78px; position:relative; overflow:hidden; }
.button small { display:block; font:9px/2.2 Georgia; letter-spacing:2px; opacity:.7; }.button b{font-size:24px;font-weight:normal}
.download-glow:after { content:'';position:absolute;top:-50%;left:-70%;width:40%;height:200%;background:linear-gradient(90deg,transparent,#fff5,transparent);transform:rotate(25deg);animation:shine 5s infinite;pointer-events:none; }
@keyframes shine{0%,60%{left:-70%}100%{left:160%}}
.ribbon { background:linear-gradient(90deg,#151511,#232119,#151511); }
.features article { padding:30px; background:linear-gradient(145deg,#26251f70,#131513); border:1px solid #77623f55; }
.features h3{color:#dfc18c}.features span{display:block;border-bottom:1px solid #7e684631;padding-bottom:18px}
.profession-section { background:radial-gradient(ellipse at center,#2f2c2244,transparent 70%),#0c1011; border-block:1px solid #9a7c4c33; }
.center-heading { text-align:center;margin-bottom:50px; }.center-heading h2{font-size:42px;margin:15px 0}.center-heading>p:last-child{font-size:14px;color:#a49d8f}
.profession-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:24px; }
.profession { height:560px; position:relative; background-image:url('assets/classes.png');background-size:300% 100%;border:1px solid #aa885448; transition:transform .4s,border-color .4s; overflow:hidden; }
.profession:hover { transform:translateY(-7px);border-color:#c8a260; }
.warrior { background-position:left center; }.mage{background-position:center}.taoist{background-position:right center}
.profession:after { content:'';position:absolute;inset:0;background:linear-gradient(0deg,#0a0e10 5%,#0a0e10da 25%,transparent 70%); }
.profession-copy { position:absolute;z-index:1;bottom:30px;left:28px;right:28px; }.profession-copy span{font:10px Georgia;letter-spacing:3px;color:#b9a078}.profession h3{font:55px KaiTi,SimSun;margin:12px 0;color:#e6c58a}.profession i{font-style:normal;color:#d4c4ab;font-size:16px}.profession p{font-size:13px;color:#a8a59b}.profession b{font-size:10px;letter-spacing:4px;font-weight:normal;color:#c09f69}
.art-note { text-align:right;color:#77796f;font-size:11px;margin:18px 0 0; }
.rules-section { display:grid;grid-template-columns:1fr 1fr;gap:70px;padding:100px 0; }.rules-section h2{font-size:31px}.rules-table{margin:0}.rules-table div{display:flex;justify-content:space-between;gap:25px;padding:18px 0;border-bottom:1px solid #7f6a4335;font-size:13px}.rules-table dt{color:#96978d}.rules-table dd{margin:0;color:#dcc392}.text-link{display:inline-block;color:#d3af71;margin-top:20px;font-size:14px}
/* 08 下载中心 */
.download-page { background:#0e1213; }
.download-hero { padding:65px 0 55px;position:relative;background:linear-gradient(90deg,#0d1111ee,#0d1111a0),url('assets/hero.png') center 45%/cover; border-bottom:1px solid #8d714841; }
.breadcrumb { color:#9e998e;font-size:12px;margin-bottom:35px; }.download-hero h1{font:58px/1.3 SimSun;letter-spacing:7px;margin:12px 0 20px;text-shadow:none}.download-hero p{max-width:620px;color:#b2b0a4;font-size:14px}.download-hero .eyebrow{color:#c9a96f;font-size:11px}
.download-layout { display:grid;grid-template-columns:230px 1fr;gap:45px;padding:55px 0 85px;align-items:start; }
.download-sidebar { position:sticky;top:25px; }.download-sidebar>p{font-size:10px;letter-spacing:3px;color:#9a896c}.download-sidebar>a{display:flex;justify-content:space-between;border-left:1px solid #a4875044;padding:14px 18px;color:#b5b1a5;font-size:14px}.download-sidebar>a:hover{color:#edce8f;background:#a0813620}.side-help{border:1px solid #8b71483b;padding:20px;margin-top:25px}.side-help b{font-size:15px;color:#d7bc8b}.side-help p{font-size:12px;color:#95968c}.side-help strong{display:block;font:20px Georgia;color:#e0c28d}.side-help a{font-size:12px;color:#c8aa75}
.download-block { margin-bottom:30px;background:#171c1c;border:1px solid #a58b5a40;padding:30px;scroll-margin-top:25px; }.download-block.primary{border-top:2px solid #d7b273;background:linear-gradient(130deg,#2b2a20,#141c1e)}.dl-heading{display:flex;align-items:center;gap:18px}.dl-icon{font:28px Georgia;color:#cdb27d;border:1px solid #a287543d;width:56px;height:56px;display:grid;place-items:center}.dl-heading h2{font:25px SimSun;margin:0 0 7px}.dl-heading small{color:#a58d64;font-size:10px;letter-spacing:2px}.download-block>p{color:#a7aaa0;font-size:13px;line-height:1.9}.download-meta{display:flex;gap:25px;font-size:11px;color:#b7a78a;border-block:1px solid #a0884f25;padding:12px 0;margin:20px 0}.download-lines{display:flex;gap:12px;flex-wrap:wrap}.download-lines .button{font-size:14px;padding:12px 20px;gap:18px}.download-lines [aria-disabled=true]{opacity:.45;cursor:not-allowed;filter:none;transform:none}.line-status{font-size:11px!important;margin-bottom:0;color:#a39174!important}
.install-section{padding:30px 0}.install-section h2,.faq-section h2{font-size:27px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.step{border-top:1px solid #897345;padding-top:15px}.step b{font:27px Georgia;color:#b89963}.step h3{font-size:17px;margin:8px 0}.step p{font-size:12px;color:#a4a59b}.faq-section details{border-bottom:1px solid #7c6b4c44;padding:18px 0}.faq-section summary{cursor:pointer;color:#d3c3a6;font-size:14px}.faq-section details p{font-size:13px;color:#999e96;line-height:1.9}.download-footer{border-top:1px solid #856a3b55;padding:30px 0;font-size:12px;color:#888f86}
@media(max-width:900px){.hero{min-height:800px}.hero-content{padding-top:55px}.profession-grid{gap:12px}.profession{height:470px}.profession-copy{left:18px;right:18px;bottom:20px}.rules-section{gap:30px}.download-layout{grid-template-columns:180px 1fr;gap:25px}.download-block{padding:22px}}
@media(max-width:600px){.hero{min-height:770px}.hero-content{padding-top:35px}.version-mark{font-size:30px}h1{font-size:76px}.hero h2{font-size:24px}.actions .button{min-width:0;min-height:70px;flex:1;padding:12px 16px;gap:12px}.actions .button small{font-size:8px;letter-spacing:1px}.hero-note{font-size:11px}.center-heading h2{font-size:29px}.profession-grid{grid-template-columns:1fr}.profession{height:490px;background-size:300% 100%}.profession-copy{left:25px}.rules-section{display:block;padding:60px 0}.rules-table{margin-top:30px}.rules-table div{font-size:12px}.download-hero{padding:35px 0}.download-hero h1{font-size:40px}.download-layout{display:block;padding-top:25px}.download-sidebar{position:static;display:flex;gap:8px;margin-bottom:25px;flex-wrap:wrap}.download-sidebar>p,.download-sidebar .side-help{display:none}.download-sidebar>a{border:1px solid #8e754940;padding:8px 10px;font-size:12px}.download-sidebar>a span{display:none}.download-block{padding:22px 18px}.download-meta{gap:14px;flex-wrap:wrap}.download-lines{display:grid;grid-template-columns:1fr 1fr}.download-lines .button{justify-content:center;padding:11px 8px;font-size:12px;gap:5px}.steps{grid-template-columns:1fr}.step{display:block}.dl-heading h2{font-size:23px}}
@media(prefers-reduced-motion:reduce){.download-glow:after{animation:none}}
