:root {
  --gold: #edcd91;
  --cream: #fff3dc;
  --brown: #3a2117;
  --deep: #180d09;
  --purple: #694692;
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.3);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: #160c08; color: #f8ebd8; font-family: Inter, 'Microsoft YaHei', 'PingFang SC', sans-serif; }
button, a { font: inherit; }
button { cursor: pointer; }
a { text-decoration: none; color: inherit; }

.topbar { position: sticky; top: 0; z-index: 60; background: rgba(255, 255, 255, 0.97); border-bottom: 1px solid rgba(36, 20, 14, 0.1); backdrop-filter: blur(12px); }
.topbar-inner { width: min(1500px, calc(100% - 38px)); height: 88px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: flex; align-items: center; gap: 15px; color: #21140f; }
.brand-mark { width: 78px; height: 54px; border-radius: 14px; display: grid; place-items: center; font: 900 33px serif; color: #fff3d6; background: linear-gradient(135deg, #ffcf58, #d66c29 55%, #6e1e16); box-shadow: 0 8px 20px rgba(146, 68, 25, 0.24); }
.brand-name { font-weight: 900; font-size: 29px; letter-spacing: 0.12em; line-height: 1; }
.brand-name small { display: block; margin-top: 6px; font-size: 11px; letter-spacing: 0.5em; color: #6a625d; }
.brand em { margin-left: 12px; font-size: 14px; font-weight: 700; letter-spacing: 0.18em; color: #51413a; transform: skew(-10deg); }
.nav { display: flex; align-items: center; gap: 10px; }
.nav a, .nav button { border: 0; background: transparent; padding: 12px 13px; color: #50443e; font-size: 17px; transition: 0.2s; }
.nav a:hover, .nav button:hover { color: #111; transform: translateY(-1px); }
.menu-btn { display: none; width: 46px; height: 46px; border: 1px solid #ddd; border-radius: 13px; background: #fff; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.menu-btn i { width: 20px; height: 2px; background: #261710; border-radius: 9px; }
.mobile-nav { display: none; padding: 4px 20px 14px; background: #fff; color: #261710; }
.mobile-nav.open { display: grid; }
.mobile-nav a, .mobile-nav button { padding: 14px 0; text-align: left; border: 0; border-bottom: 1px solid #eee; background: transparent; }

.hero { position: relative; min-height: 800px; overflow: hidden; background: #6f89b9 url('https://q2.itc.cn/q_70/images01/20260209/1097ba2b5ec64df6be16a0c74373e3a2.jpeg') center center / cover no-repeat; }
.hero::after { content: ''; position: absolute; inset: auto 0 0; height: 42%; background: linear-gradient(180deg, transparent, rgba(54,73,116,.42)); z-index: 1; }
.mountain { display: none; }
.hero-orbit { position: absolute; top: 135px; left: 50%; width: min(440px, 38vw); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, #153b6f 0 28%, #0d244b 29% 49%, rgba(11,28,57,.2) 50% 64%, transparent 65%); box-shadow: 0 0 0 6px rgba(79,226,255,.22), 0 0 48px rgba(56,219,255,.5); z-index: 2; }
.hero-orbit::before, .hero-orbit::after { content: ''; position: absolute; inset: 4%; border: 4px solid rgba(77,223,255,.58); border-radius: 50%; clip-path: polygon(0 0, 100% 0, 100% 38%, 0 68%); transform: rotate(14deg); }
.hero-orbit::after { inset: 10%; transform: rotate(-22deg); opacity: .7; }
.hero-copy { position: relative; z-index: 3; width: min(1100px, calc(100% - 30px)); margin: auto; padding-top: 205px; text-align: center; }
.hero-copy p { margin: 0 0 22px; font-size: 18px; letter-spacing: .42em; color: #f8fbff; text-shadow: 0 4px 12px rgba(20,35,70,.4); }
.hero-copy h1 { margin: 0; font: 900 clamp(78px, 10vw, 172px)/.94 serif; letter-spacing: .06em; color: #f8fcff; text-shadow: 0 4px 0 #324c77, 0 12px 28px rgba(20,33,64,.58), 0 0 24px rgba(79,219,255,.45); }
.hero-copy span { display: block; margin-top: 16px; font-size: 16px; letter-spacing: .5em; color: #eff7ff; }
.snow { position: absolute; inset: 0; z-index: 2; background-image: radial-gradient(circle, rgba(255,255,255,.9) 0 2px, transparent 3px), radial-gradient(circle, rgba(255,255,255,.75) 0 1.6px, transparent 2.5px); background-size: 120px 110px, 180px 160px; background-position: 0 0, 40px 50px; animation: snow 8s linear infinite; opacity: .72; pointer-events: none; }
@keyframes snow { to { background-position: 90px 130px, 10px 210px; } }

.download-strip { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 4; width: min(1050px, calc(100% - 40px)); display: grid; grid-template-columns: 90px 250px repeat(3, 120px) 115px; gap: 12px; }
.age, .download-main, .quick, .qr { min-height: 108px; border: 1px solid rgba(255,255,255,.2); border-radius: 10px; background: rgba(31,29,42,.72); backdrop-filter: blur(10px); box-shadow: var(--shadow); color: #fff6df; }
.age { display: grid; place-items: center; padding: 10px; }
.age strong { font-size: 36px; }
.age small { font-size: 12px; }
.download-main { border-color: rgba(255,255,255,.3); background: linear-gradient(180deg, rgba(117,70,160,.86), rgba(73,44,110,.92)); display: flex; flex-direction: column; justify-content: center; align-items: center; }
.download-main b { font-size: 23px; letter-spacing: .14em; }
.download-main span { margin-top: 8px; letter-spacing: .12em; }
.quick { display: grid; place-items: center; gap: 4px; padding: 10px; }
.quick i { width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 20px; }
.quick span { font-size: 14px; }
.qr { padding: 8px; text-align: center; }
.qr-pattern { display: block; height: 74px; border-radius: 8px; background: repeating-linear-gradient(45deg, #0b0b0b 0 6px, #e7ad45 6px 12px), repeating-linear-gradient(-45deg, transparent 0 7px, #53170f 7px 14px); background-blend-mode: multiply; }
.qr small { display: block; margin-top: 5px; font-size: 11px; }

.motto { background: linear-gradient(180deg, #5a3928, #3f271d); border-block: 1px solid rgba(255,224,176,.16); }
.motto p { margin: 0 auto; width: min(1250px, calc(100% - 32px)); padding: 25px 0; text-align: center; color: #ddc18b; font: 700 21px serif; letter-spacing: .25em; }
.brown-world { position: relative; background: radial-gradient(circle at 94% 34%, rgba(226,148,62,.13), transparent 28%), linear-gradient(180deg, #4c2c21, #2c1812 32%, #170c08); }
.brown-world::after { content: '龙'; position: absolute; right: -30px; top: 220px; font: 900 420px serif; color: rgba(226,169,70,.06); transform: rotate(-8deg); pointer-events: none; }
.section { position: relative; z-index: 2; width: min(1240px, calc(100% - 36px)); margin: auto; padding: 72px 0; }
.section-title { text-align: center; margin: 0 0 40px; color: var(--gold); font: 800 clamp(42px, 5vw, 66px) serif; letter-spacing: .1em; }
.section-title span::before, .section-title span::after { content: '❦'; margin: 0 20px; font-size: .48em; }
.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: stretch; }
.intro-list, .intro-preview, .equip-card, .feature-grid article { border: 1px solid rgba(237,205,145,.23); background: linear-gradient(180deg, rgba(107,66,45,.42), rgba(47,27,20,.72)); box-shadow: var(--shadow); }
.intro-list { padding: 22px; border-radius: 4px; }
.intro-item { width: 100%; padding: 19px 12px; border: 0; border-bottom: 1px solid rgba(237,205,145,.13); background: transparent; color: #fff0d8; text-align: left; transition: .2s; }
.intro-item:last-child { border-bottom: 0; }
.intro-item:hover, .intro-item.active { background: rgba(255,241,211,.07); transform: translateX(4px); }
.intro-item b { font-size: 17px; }
.intro-item span { margin-left: 8px; color: #f3dfc1; }
.intro-preview { padding: 9px; border-radius: 4px; }
.preview-art { position: relative; height: 360px; overflow: hidden; background: #160c08; }
.preview-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 48%, rgba(20,8,5,.18) 68%, rgba(20,8,5,.58)); pointer-events: none; }
.preview-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: opacity .2s ease, transform .45s ease; }
.intro-preview:hover .preview-art img { transform: scale(1.025); }
.preview-art strong { position: absolute; z-index: 2; right: 25px; bottom: 28px; writing-mode: vertical-rl; color: #ffd779; font: 900 48px serif; text-shadow: 0 0 14px rgba(255,194,65,.5), 0 3px 8px rgba(0,0,0,.72); }
.preview-text { padding: 18px 12px 8px; }
.preview-text h3 { margin: 0 0 8px; color: #fff1d8; font-size: 25px; }
.preview-text p { margin: 0; line-height: 1.8; color: #dbc9b0; }

.equip-tabs { display: flex; justify-content: center; gap: 12px; margin-bottom: 24px; }
.equip-tab { padding: 11px 22px; border: 1px solid rgba(237,205,145,.25); border-radius: 999px; background: rgba(255,255,255,.04); color: #f4dfbd; }
.equip-tab.active, .equip-tab:hover { background: rgba(237,205,145,.16); color: #fff8e8; }
.equip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.equip-card { padding: 18px; border-radius: 7px; transition: .22s; }
.equip-card.active, .equip-card:hover { transform: translateY(-4px); border-color: rgba(237,205,145,.5); }
.weapon { height: 220px; border-radius: 7px; position: relative; overflow: hidden; background: radial-gradient(circle at 30% 25%, rgba(255,205,103,.45), transparent 25%), linear-gradient(135deg, #792c20, #1c0d0a 52%, #85522a); }
.weapon::after { content: ''; position: absolute; left: 23%; right: 23%; top: 18%; bottom: 12%; border-radius: 40% 40% 18% 18%; background: linear-gradient(180deg, rgba(255,219,133,.38), rgba(50,19,14,.84)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.sword::before { content: ''; position: absolute; z-index: 2; left: 49%; top: 9%; width: 17px; height: 78%; background: linear-gradient(90deg, #724417, #fff4c0, #c07928); transform: rotate(29deg); box-shadow: 0 0 18px rgba(255,200,86,.5); }
.armor::before { content: '甲'; position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; color: #f5d18d; font: 900 82px serif; }
.wing::before { content: '羽'; position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; color: #f2b66a; font: 900 82px serif; }
.equip-card h3 { margin: 15px 0 6px; color: #fff0d0; font-size: 22px; }
.equip-card p { margin: 0 0 10px; color: #d7c2a7; }
.equip-card small { color: #efcb8c; }

.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.feature-grid article { padding: 25px; border-radius: 6px; }
.feature-grid i { width: 58px; height: 58px; border: 1px solid rgba(237,205,145,.22); border-radius: 16px; display: grid; place-items: center; background: rgba(237,205,145,.08); font-style: normal; font-size: 28px; color: #ffe6b3; }
.feature-grid h3 { margin: 15px 0 8px; color: #fff0d1; font-size: 22px; }
.feature-grid p { margin: 0; color: #d7c2a7; line-height: 1.8; }

.float-tools { position: fixed; z-index: 50; right: 16px; top: 50%; transform: translateY(-45%); width: 125px; background: #33363a; box-shadow: var(--shadow); border-radius: 2px; overflow: hidden; }
.float-art { height: 125px; margin: 10px; border-radius: 14px; background: linear-gradient(135deg, transparent 42%, #ffd36e 43% 47%, #fff8d1 48% 50%, #bc3b1c 51% 55%, transparent 56%), radial-gradient(circle at 68% 25%, rgba(255,187,61,.35), transparent 25%), linear-gradient(135deg, #971d11, #51140c 55%, #1e0d0b); }
.float-tools button, .float-tools a { width: 100%; border: 0; border-top: 1px solid rgba(255,255,255,.08); background: transparent; color: white; padding: 12px 8px; display: block; text-align: center; }
.float-tools button:hover, .float-tools a:hover { background: #44484d; }

.footer { background: #06080a; border-top: 1px solid rgba(255,255,255,.08); }
.footer-inner { width: min(1100px, calc(100% - 32px)); margin: auto; padding: 30px 0; display: flex; align-items: center; gap: 30px; }
.footer-logo { display: flex; align-items: center; gap: 12px; min-width: 240px; }
.footer-logo > span { width: 58px; height: 58px; border-radius: 15px; display: grid; place-items: center; background: linear-gradient(135deg, #ffaf32, #8b2d16); font: 900 28px serif; }
.footer-logo b { font-size: 25px; color: #ffc769; }
.footer-logo small { display: block; font-size: 10px; letter-spacing: .4em; color: #fff; }
.footer p { margin: 0; flex: 1; color: #b9aea1; font-size: 12px; line-height: 1.8; }
.footer p a { color: #efcb8c; text-decoration: underline; text-underline-offset: 3px; }
.footer > div > i { width: 58px; height: 58px; border: 4px solid #08dfd4; border-radius: 50%; display: grid; place-items: center; color: #0ce8df; font-size: 30px; font-style: normal; }

.toast { position: fixed; z-index: 120; left: 50%; bottom: 24px; transform: translate(-50%, 100px); opacity: 0; padding: 12px 20px; border-radius: 999px; background: rgba(15,14,13,.92); color: #fff2d8; transition: .25s; box-shadow: var(--shadow); }
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.reveal { opacity: 0; transform: translateY(24px); transition: .6s; }
.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 1180px) {
  .nav { display: none; }
  .menu-btn { display: flex; }
  .download-strip { grid-template-columns: 90px 1.5fr repeat(2, 1fr); }
  .download-strip .quick:nth-of-type(4), .qr { display: none; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .topbar-inner { height: 72px; }
  .brand-mark { width: 58px; height: 44px; }
  .brand-name { font-size: 23px; }
  .brand em { display: none; }
  .hero { min-height: 710px; }
  .hero-orbit { width: 260px; top: 120px; }
  .hero-copy { padding-top: 180px; }
  .hero-copy p { font-size: 13px; letter-spacing: .2em; }
  .hero-copy h1 { font-size: 62px; }
  .download-strip { position: absolute; bottom: 18px; grid-template-columns: 80px 1fr 1fr; width: calc(100% - 20px); gap: 8px; }
  .download-strip .quick:nth-of-type(3), .download-strip .quick:nth-of-type(4), .qr { display: none; }
  .age, .download-main, .quick { min-height: 86px; }
  .download-main b { font-size: 18px; }
  .intro-grid, .equip-grid, .feature-grid { grid-template-columns: 1fr; }
  .section { width: calc(100% - 20px); padding: 50px 0; }
  .section-title { font-size: 40px; }
  .intro-item b, .intro-item span { display: block; }
  .intro-item span { margin: 7px 0 0; }
  .preview-art { height: 300px; }
  .equip-tabs { overflow: auto; justify-content: flex-start; }
  .float-tools { right: 8px; top: auto; bottom: 10px; transform: none; width: 92px; }
  .float-art { height: 82px; margin: 6px; }
  .float-tools button, .float-tools a { font-size: 11px; padding: 9px 5px; }
  .footer-inner { align-items: flex-start; flex-direction: column; }
  .footer > div > i { display: none; }
  .motto p { font-size: 15px; letter-spacing: .1em; }
}