:root { --ink:#24211d; --jade:#154a43; --jade-dark:#10352f; --gold:#d79a2e; --paper:#fffcf4; --coral:#c9523d; }
* { box-sizing:border-box; }
html { scroll-behavior:auto; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Microsoft YaHei","PingFang SC",sans-serif; }
a, button { color:inherit; opacity:1 !important; text-decoration:none; transition:none !important; -webkit-tap-highlight-color:transparent; }
a:active, button:active { filter:none !important; opacity:1 !important; transform:none !important; }
button { font:inherit; }
.demon-shell { width:min(1160px,calc(100% - 48px)); margin:0 auto; }

/* 顶部导航 */
.demon-nav { position:sticky; top:0; z-index:1000; border-top:2px solid var(--jade-dark); border-bottom:1px solid #e5ddd0; background:var(--paper); }
.demon-nav__inner { position:relative; display:flex; align-items:center; width:min(1160px,calc(100% - 48px)); min-height:76px; margin:0 auto; gap:24px; }
.demon-nav__brand { display:flex; flex:0 0 auto; align-items:center; gap:10px; }
.demon-nav__brand img { display:block; width:46px; height:46px; border-radius:6px; object-fit:cover; }
.demon-nav__brand strong, .demon-nav__brand small { display:block; }
.demon-nav__brand strong { font-size:17px; font-weight:800; line-height:1.15; white-space:nowrap; }
.demon-nav__brand small { margin-top:3px; color:#716b61; font-size:12px; line-height:1.2; white-space:nowrap; }
.demon-nav__toggle { display:none; }
.demon-nav__links { display:flex; align-items:center; justify-content:flex-end; gap:28px; margin:0 0 0 auto; padding:0; list-style:none; }
.demon-nav__links a { display:block; color:var(--ink); font-size:14px; white-space:nowrap; }
.demon-nav__links li:first-child a { color:var(--coral); }

/* 首屏 */
.demon-hero { position:relative; min-height:650px; overflow:hidden; color:#fff; background:radial-gradient(circle at 80% 35%,rgba(255,205,105,.32),transparent 26%),linear-gradient(121deg,#102f2e 0%,#1d6a5d 49%,#b94f43 100%); scroll-margin-top:76px; }
.demon-hero::before { position:absolute; inset:0; content:""; opacity:.18; background-image:linear-gradient(45deg,transparent 48%,rgba(255,255,255,.42) 49%,transparent 50%),linear-gradient(-45deg,transparent 48%,rgba(255,255,255,.25) 49%,transparent 50%); background-size:110px 110px; }
.demon-hero__content { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; width:min(1200px,calc(100% - 48px)); min-height:650px; gap:56px; }
.demon-hero__copy { max-width:540px; }
.demon-eyebrow, .demon-heading > p { margin:0 0 13px; font-size:12px; font-weight:700; letter-spacing:.18em; }
.demon-eyebrow span { display:inline-block; width:26px; height:2px; margin:0 9px 4px 0; background:#ffd66e; }
.demon-hero h1 { margin:0; font-size:clamp(56px,7vw,90px); line-height:1; letter-spacing:.07em; text-shadow:5px 5px 0 rgba(10,43,37,.26); white-space:nowrap; }
.demon-hero__slogan { margin:18px 0 0; font-size:clamp(22px,2.7vw,34px); letter-spacing:.12em; }
.demon-hero__slogan strong { color:#ffe079; }
.demon-hero__intro { max-width:480px; margin:24px 0 31px; font-size:15px; line-height:1.9; }
.demon-hero__action { display:inline-flex; align-items:center; gap:22px; padding:14px 20px; background:#fff6d8; color:#17473f !important; font-size:14px; font-weight:800; letter-spacing:.1em; }
.demon-hero__visual { flex:0 0 266px; width:266px; }
.demon-carousel { position:relative; box-sizing:content-box; width:250px; height:450px; margin:0 auto; overflow:visible; border:8px solid rgba(255,248,222,.9); background:#174a43; box-shadow:18px 18px 0 rgba(11,46,39,.23),0 20px 42px rgba(7,26,23,.35); }
.demon-carousel__slide { display:none; position:relative; width:250px; height:450px; }
.demon-carousel__slide.is-active { display:block; }
.demon-carousel__slide img { display:block; width:250px; max-width:100%; height:450px; object-fit:contain; }
.demon-carousel__caption { position:absolute; right:0; bottom:0; left:0; padding:42px 15px 14px; background:linear-gradient(transparent,rgba(6,38,31,.78)); font-size:13px; }
.demon-carousel__slide--empty { display:grid; place-items:center; color:#f7e5b7; font-size:14px; }
.demon-carousel__button { position:absolute; z-index:2; top:calc(50% - 17px); display:grid; width:34px; height:34px; padding:0; place-items:center; border:0; background:rgba(6,40,33,.52); color:#fff; cursor:pointer; font-size:20px; line-height:1; }
.demon-carousel__button--prev { left:0; }
.demon-carousel__button--next { right:0; }
.demon-carousel__dots { position:absolute; z-index:2; right:0; bottom:12px; left:0; display:flex; justify-content:center; gap:8px; }
.demon-carousel__dot { width:8px; height:8px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.55); cursor:pointer; }
.demon-carousel__dot.is-active { background:#ffe079; }
.demon-hero__hint { position:absolute; z-index:1; right:0; bottom:22px; left:0; color:#fff !important; font-size:12px; letter-spacing:.16em; text-align:center; }
.demon-hero__hint span { display:block; width:1px; height:24px; margin:9px auto 0; background:#ffe079; }

/* 通用板块 */
.demon-section { padding:100px 0; scroll-margin-top:76px; }
.demon-heading { text-align:center; }
.demon-heading > p { color:var(--coral); }
.demon-heading h2 { margin:0; color:var(--ink); font-size:clamp(29px,3.3vw,42px); letter-spacing:.12em; }
.demon-heading--left { text-align:left; }
.demon-heading--light h2 { color:#fff9e7; }
.demon-heading--light > p { color:#f7c95f; }

/* 游戏介绍 */
.demon-section--about { background:#f8f1e4; }
.demon-about { display:grid; grid-template-columns:.9fr 1.2fr; align-items:center; gap:86px; }
.demon-about__body > p { margin:0; color:#52655e; font-size:16px; line-height:2.15; }
.demon-features { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; margin-top:37px; }
.demon-features article { padding:22px 14px; border-top:3px solid var(--gold); background:#fffdf8; box-shadow:0 13px 30px rgba(45,68,56,.08); }
.demon-features b { color:var(--coral); font-size:17px; }
.demon-features h3 { margin:16px 0 8px; font-size:17px; }
.demon-features p { margin:0; color:#75877e; font-size:12px; line-height:1.5; }

/* 游戏截图 */
.demon-section--gallery { background:#174a43; }
.demon-gallery__meta { display:flex; align-items:center; justify-content:space-between; margin:48px 0 17px; color:#fff9e7; font-size:14px; }
.demon-gallery__meta em { color:#b7d1bf; font-size:12px; font-style:normal; }
.demon-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; }
.demon-shot { position:relative; margin:0; overflow:hidden; aspect-ratio:4 / 3; background:#2b6d60; }
.demon-shot--wide { grid-column:span 2; aspect-ratio:16 / 7.9; }
.demon-shot a, .demon-shot img { display:block; width:100%; height:100%; }
.demon-shot img { object-fit:cover; }
.demon-shot__mask { position:absolute; inset:0; display:grid; place-items:center; background:rgba(6,39,33,.22); color:#fff; }
.demon-shot__mask b { padding:10px 16px; border:1px solid #ffe6a5; font-size:12px; letter-spacing:.12em; }
.demon-shot figcaption { position:absolute; right:0; bottom:0; left:0; padding:27px 13px 11px; background:linear-gradient(transparent,rgba(0,0,0,.6)); color:#fff; font-size:13px; }
.demon-gallery__empty { grid-column:1 / -1; padding:55px 20px; border:1px dashed rgba(255,255,255,.32); color:#c7dbc9; font-size:14px; text-align:center; }

/* 资讯与评论 */
.demon-section--news { background:#fffdf8; }
.demon-news-list { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:46px; }
.demon-news-card { overflow:hidden; border:1px solid #eee4d2; background:#fff; }
.demon-news-card__cover { display:grid; height:196px; place-items:center; color:#fff; font-size:25px; font-weight:800; letter-spacing:.16em; text-shadow:0 2px 8px rgba(30,55,39,.35); }
.demon-news-card__cover--update { background:linear-gradient(135deg,#1f7769,#dd9e3d); }
.demon-news-card__cover--event { background:linear-gradient(135deg,#c75443,#e4b349); }
.demon-news-card__cover--guide { background:linear-gradient(135deg,#285a62,#52a887); }
.demon-news-card__cover--guild { background:linear-gradient(135deg,#78523b,#cc7650); }
.demon-news-card__body { padding:18px 19px 21px; }
.demon-news-card time { color:var(--coral); font-size:12px; }
.demon-news-card h3 { margin:10px 0 8px; font-size:17px; line-height:1.45; }
.demon-news-card p { min-height:42px; margin:0; color:#718079; font-size:13px; line-height:1.65; }
.demon-text-link { display:inline-block; margin-top:17px; color:#1f796c !important; font-size:13px; font-weight:800; }
.demon-section--reviews { background:#fffaf0; }
.demon-section--reviews .demon-heading > p { color:#bd7421; }
.demon-reviews__intro { margin:20px auto 38px; color:#716b61; font-size:14px; text-align:center; }
.demon-reviews-list { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.demon-review-card { display:flex; flex-direction:column; min-height:245px; padding:21px; border:1px solid #e7d9c5; background:#fffdf8; }
.demon-review-card__header { display:flex; align-items:center; min-height:25px; gap:9px; }
.demon-review-card__number { color:#ca7c16; font-size:12px; font-weight:800; }
.demon-review-card__avatar { display:grid; flex:0 0 auto; width:25px; height:25px; place-items:center; border-radius:50%; background:#e8e2d4; color:#516159; font-size:12px; font-weight:600; }
.demon-review-card__name { margin:0; font-size:14px; font-weight:600; }
.demon-review-card__stars { display:block; flex:0 0 auto; width:70px; height:14px; margin-left:auto; }
.demon-review-card__stars i { display:block; width:100%; height:100%; background:url("../icon/star.svg") left center / 14px 14px repeat-x; }
.demon-review-card__description { flex:1; margin:17px 0 12px; color:var(--ink); font-size:14px; line-height:1.82; }
.demon-review-card__date { color:#747984; font-size:12px; text-align:right; }

/* 下载与页脚 */
.demon-section--download { padding:92px 0; background:linear-gradient(110deg,#e5f1e8,#fff0db); }
.demon-download { display:flex; align-items:center; justify-content:space-between; gap:40px; }
.demon-download__copy h2 { margin:11px 0 14px; font-size:clamp(30px,3.1vw,43px); line-height:1.35; letter-spacing:.11em; }
.demon-download__copy > p:last-child { margin:0; color:#6e8078; font-size:14px; }
.demon-download__buttons { display:flex; flex-wrap:wrap; gap:13px; max-width:485px; }
.demon-download-btn { display:flex; align-items:center; min-width:210px; gap:12px; padding:13px 22px; background:#1c6559; color:#fff !important; box-shadow:0 9px 18px rgba(30,91,78,.2); font-size:16px; }
.demon-download-btn--apple { background:#c65744; }
.demon-download-btn__icon { display:grid; flex:0 0 auto; width:28px; height:28px; place-items:center; }
.demon-download-btn__icon::before { display:block; width:26px; height:26px; content:""; background:center / contain no-repeat; }
.demon-download-btn__icon--android::before { background-image:url("../icon/%E5%AE%89%E5%8D%93.svg"); }
.demon-download-btn__icon--apple::before { background-image:url("../icon/%E8%8B%B9%E6%9E%9C.svg"); }
.demon-download-btn small { display:block; margin-bottom:2px; font-size:12px; letter-spacing:.14em; }
.demon-download__empty { color:#687a72; font-size:14px; }
.demon-footer { padding:52px 0 21px; background:var(--jade-dark); color:#fff; }
.demon-footer__inner { display:flex; width:min(1160px,calc(100% - 48px)); margin:0 auto; gap:128px; }
.demon-footer__brand { display:flex; flex:0 0 190px; align-items:center; gap:11px; color:#fff !important; }
.demon-footer__brand img { display:block; width:42px; height:42px; border-radius:5px; object-fit:cover; }
.demon-footer__brand strong, .demon-footer__brand small { display:block; }
.demon-footer__brand strong { font-size:17px; font-weight:800; line-height:1.15; white-space:nowrap; }
.demon-footer__brand small { margin-top:3px; color:rgba(255,255,255,.75); font-size:12px; white-space:nowrap; }
.demon-footer__groups { display:grid; flex:1; grid-template-columns:1fr 1fr 1fr 1.15fr; gap:58px; }
.demon-footer__group h3 { margin:2px 0 17px; font-size:14px; font-weight:700; }
.demon-footer__group a { display:block; width:fit-content; margin:0 0 13px; color:#fff !important; font-size:14px; line-height:1.25; }
.demon-footer__socials { display:flex; gap:10px; }
.demon-footer__socials a { display:grid; width:34px; height:34px; margin:0; place-items:center; border:1px solid rgba(255,255,255,.4); border-radius:50%; font-size:13px; }
.demon-footer__copyright { width:min(1160px,calc(100% - 48px)); margin:31px auto 0; padding-top:19px; border-top:1px solid rgba(255,255,255,.5); font-size:13px; text-align:center; }
.demon-back-top { display:none; position:fixed; z-index:900; right:24px; bottom:28px; width:48px; height:48px; padding:5px 0 4px; border:0; border-radius:50%; background:var(--jade-dark); color:#fff; cursor:pointer; font-size:12px; text-align:center; }
.demon-back-top.is-visible { display:grid; place-content:center; }
.demon-back-top i { display:block; width:9px; height:9px; margin:0 auto 4px; border-top:2px solid currentColor; border-left:2px solid currentColor; transform:rotate(45deg); }
.demon-back-top span { display:block; line-height:1; }

@media (max-width:860px) {
    .demon-hero__content { gap:28px; }
    .demon-hero__visual { flex-basis:266px; width:266px; }
    .demon-about { gap:42px; }
    .demon-footer__inner { gap:58px; }
    .demon-footer__groups { gap:28px; }
}

@media (max-width:620px) {
    body { padding-top:62px; }
    .demon-nav { position:fixed; top:0; right:0; left:0; -webkit-backface-visibility:hidden; backface-visibility:hidden; }
    .demon-nav__inner { width:min(100% - 30px,1160px); min-height:60px; gap:0; }
    .demon-nav__brand img { width:36px; height:36px; }
    .demon-nav__brand strong { font-size:14px; }
    .demon-nav__brand small { margin-top:1px; font-size:12px; }
    .demon-nav__toggle { display:grid; width:35px; height:35px; margin-left:auto; padding:0; place-content:center; gap:5px; border:1px solid #25463f; border-radius:4px; background:transparent; cursor:pointer; }
    .demon-nav__toggle i { display:block; width:21px; height:2px; background:#25463f; }
    .demon-nav__toggle.is-open i:nth-child(1) { transform:translateY(7px) rotate(45deg); }
    .demon-nav__toggle.is-open i:nth-child(2) { visibility:hidden; }
    .demon-nav__toggle.is-open i:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
    .demon-nav__links { display:none; position:absolute; top:60px; right:0; left:0; width:auto; margin:0; padding:0; border:1px solid #ded3c1; background:#fffdf7; box-shadow:0 10px 22px rgba(35,46,37,.14); }
    .demon-nav__links.is-open { display:grid; grid-template-columns:repeat(3,1fr); }
    .demon-nav__links li { min-width:0; list-style:none; }
    .demon-nav__links li:nth-child(-n+3) a { border-bottom:1px solid #ebe1d2; }
    .demon-nav__links li:nth-child(3n+2) a, .demon-nav__links li:nth-child(3n+3) a { border-left:1px solid #ebe1d2; }
    .demon-nav__links a { display:grid; min-height:54px; padding:10px 6px; place-items:center; color:#25463f; font-size:13px; text-align:center; }
    .demon-hero { min-height:0; scroll-margin-top:62px; }
    .demon-hero::before { display:none; }
    .demon-hero__content { min-height:0; padding:58px 0 48px; flex-direction:column; gap:32px; text-align:center; }
    .demon-hero__copy { display:flex; align-items:center; flex-direction:column; max-width:100%; text-align:center; }
    .demon-hero h1 { font-size:clamp(40px,13vw,56px); }
    .demon-hero__intro { max-width:350px; }
    .demon-hero__visual { flex-basis:auto; width:266px; margin:0 auto; }
    .demon-carousel { border-width:5px; box-shadow:10px 10px 0 rgba(10,47,40,.2),0 14px 30px rgba(7,26,23,.28); }
    .demon-hero__hint { display:none; }
    .demon-section { padding:70px 0; scroll-margin-top:62px; }
    .demon-about { grid-template-columns:1fr; }
    .demon-heading--left { text-align:center; }
    .demon-features { gap:9px; margin-top:25px; }
    .demon-features article { padding:15px 8px; }
    .demon-features h3 { font-size:14px; }
    .demon-gallery { grid-template-columns:repeat(2,1fr); gap:9px; }
    .demon-shot--wide { grid-column:span 2; }
    .demon-gallery__meta { margin-top:32px; }
    .demon-news-list, .demon-reviews-list { grid-template-columns:1fr; margin-top:31px; }
    .demon-news-card__cover { height:172px; }
    .demon-review-card { min-height:0; padding:19px; }
    .demon-download { align-items:flex-start; flex-direction:column; }
    .demon-download__buttons { width:100%; max-width:none; }
    .demon-download-btn { flex:1; min-width:0; padding:13px; }
    .demon-footer { padding:38px 0 18px; }
    .demon-footer__inner { display:block; width:min(100% - 32px,1160px); text-align:center; }
    .demon-footer__brand { justify-content:center; margin-bottom:30px; }
    .demon-footer__groups { grid-template-columns:repeat(3,1fr); gap:26px 16px; }
    .demon-footer__group { text-align:center; }
    .demon-footer__group h3 { margin-bottom:13px; }
    .demon-footer__group a { width:100%; margin-bottom:10px; font-size:13px; text-align:center; }
    .demon-footer__group--social { grid-column:1 / -1; }
    .demon-footer__socials { justify-content:center; }
    .demon-footer__copyright { width:min(100% - 32px,1160px); margin-top:26px; padding-top:16px; font-size:12px; }
    .demon-back-top { right:14px; bottom:18px; width:44px; height:44px; }
}