* {
    box-sizing:border-box
}
html,body {
    margin:0;
    padding:0;
    background:#151310;
    color:#1f1a15;
    font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif
}
body {
    min-width:320px
}
.page {
    width:min(1024px,100%);
    margin:0 auto;
    background:#171411;
    box-shadow:0 0 35px rgba(0,0,0,.65)
}
.hero img,.nav img,.footer img {
    display:block;
    width:100%;
    height:auto
}
.hero {
    line-height:0;
    background:#1b1814
}
.nav {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:7px;
    padding:8px 12px;
    background:
    linear-gradient(#3a2b1c,#171411 18%,#171411 82%,#3a2b1c);
    border:3px solid #5a4429;
    box-shadow:
    inset 0 0 0 1px #17120e,
    inset 0 0 0 3px #8a6a3e,
    inset 0 0 0 5px #241a12,
    0 2px 5px rgba(0,0,0,.75);
    align-items:center;
}
.nav a,.nav span {
    display:block;
    line-height:0;
    min-width:0;
}
.nav img {
    display:block;
    width:100%;
    height:auto;
}
.nav .disabled {
    cursor:not-allowed;
    filter:saturate(.7);
}
/* 导航按钮悬停效果 */
.nav a {
    transition:filter .2s ease,transform .2s ease,box-shadow .2s ease;
}
.nav a:hover {
    filter:brightness(1.22) saturate(1.15);
    transform:translateY(-2px);
    box-shadow:
    0 0 6px rgba(255,210,100,.75),
    0 0 14px rgba(255,180,50,.5);
}
.nav a:active {
    transform:translateY(1px);
    filter:brightness(1.05);
}
.nav span.disabled {
    transition:filter .2s ease,transform .2s ease,box-shadow .2s ease;
}
.nav span.disabled:hover {
    filter:saturate(.7) brightness(1.12);
    transform:translateY(-2px);
    box-shadow:
    0 0 5px rgba(190,160,100,.45),
    0 0 10px rgba(130,105,70,.3);
}
@media (max-width:650px) {
    .nav {
        gap:4px;
        padding:6px;
        border-width:3px;
    }
}
.paper {
    position:relative;
    background:#eee5d2 url("assets/paper-texture.jpg") center/cover repeat-y;
    border:1px solid #5a4730;
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.2),0 2px 0 #0c0b09;
    margin:7px 10px;
    padding:12px
}
.section-title {
    display:flex;
    align-items:baseline;
    gap:12px;
    margin-bottom:10px
}
.section-title span,.dark-title span,.sub-title {
    font-family:STKaiti,"KaiTi",serif;
    font-weight:700;
    letter-spacing:2px
}
.section-title span {
    font-size:28px;
    color:#fff;
    text-shadow:0 2px 3px #24150e;
    background:linear-gradient(90deg,#2c160f,#4d2417,#2c160f);
    padding:3px 18px;
    border-radius:18px
}
.section-title small,.sub-title small,.dark-title small {
    font-size:13px;
    color:#40352b;
    letter-spacing:1px
}
.section-title>a {
    margin-left:auto;
    color:#4a3420;
    text-decoration:none
}
.intro-title .news-head {
    display:flex;
    align-items:baseline;
    gap:12px;
    margin-left:auto;
    width:calc(51.2195% - 136.1px);
    min-width:300px;
    padding-left:15px;
}
.intro-title .news-head .sub-title {
    font-family:STKaiti,"KaiTi",serif;
    font-weight:700;
    letter-spacing:2px;
    font-size:28px;
    color:#fff;
    text-shadow:0 2px 3px #24150e;
    background:linear-gradient(90deg,#2c160f,#4d2417,#2c160f);
    padding:3px 18px;
    border-radius:18px;
    position:relative;
    display:inline-block;
    flex:0 0 auto;
}
.intro-title .news-head .news-en {
    font-size:13px;
    color:#40352b;
    letter-spacing:1px;
    white-space:nowrap;
}
.intro-title .news-head a {
    margin-left:auto;
    color:#4a3420;
    text-decoration:none;
    font:14px "Microsoft YaHei",sans-serif;
    white-space:nowrap;
}
/* 新闻公告标题：尺寸与“服务器介绍”标题完全一致，仅调整 CSS */
.intro-title .news-head .sub-title {
    font-family:STKaiti,"KaiTi",serif !important;
    font-weight:700 !important;
    letter-spacing:2px !important;
    font-size:28px !important;
    line-height:normal !important;
    color:#fff !important;
    text-shadow:0 2px 3px #24150e !important;
    background:linear-gradient(90deg,#2c160f,#4d2417,#2c160f) !important;
    padding:3px 18px !important;
    border-radius:18px !important;
}
.intro-grid {
    display:grid;
    grid-template-columns:260px minmax(260px,1fr) minmax(300px,1.05fr);
    gap:16px;
    align-items:start
}
.promo {
    border:3px solid #5b4630;
    background:#261d16;
    padding:3px;
    box-shadow:0 2px 5px #5b4630
}
.promo img {
    display:block;
    width:100%;
    height:auto
}
.server-copy {
    padding-top:2px;
    font-size:17px;
    line-height:1.85
}
.server-copy p {
    margin:0;
    white-space:nowrap
}
.server-copy b {
    color:#8f1d12
}
.server-copy strong {
    color:#b82017;
    font-size:25px
}
.news {
    border-left:1px solid rgba(74,51,31,.45);
    padding-left:15px;
    min-width:0
}
.sub-title {
    font-size:23px;
    color:#fff;
    text-shadow:0 2px 2px #21130d;
    background:linear-gradient(90deg,#351810,#4c2419,#351810);
    padding:3px 15px;
    border-radius:17px;
    position:relative
}
.sub-title a {
    float:right;
    color:#34271c;
    font:14px "Microsoft YaHei",sans-serif;
    text-decoration:none;
    margin-top:7px
}
.news ul {
    list-style:none;
    margin:0;
    padding:0
}
.news li {
    display:grid;
    grid-template-columns:66px minmax(0,1fr) 84px;
    gap:6px;
    padding:7px 0;
    border-bottom:1px solid rgba(80,55,30,.24);
    font-size:14px
}
.news em {
    font-style:normal;
    color:#b51e14;
    font-weight:700
}
.news span {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.news time {
    text-align:right;
    color:#695d50;
    font-size:12px
}
.features {
    min-height:215px
}
.feature-grid {
    display:grid;
    grid-template-columns:65% 35%;
    min-height:155px
}
.feature-grid ul {
    margin:4px 0 0;
    padding:0 0 0 27px;
    font-size:16px;
    line-height:2
}
.feature-grid li::marker {
    color:#39291e
}
.feature-art {
    min-height:155px;
    position:relative;
    background:
    radial-gradient(ellipse at 55% 75%,rgba(70,56,44,.18),transparent 48%),
    linear-gradient(transparent,rgba(120,105,88,.06))
}
.feature-art:after {
    content:"";
    position:absolute;
    right:8%;
    bottom:0;
    width:58%;
    height:92%;
    background:linear-gradient(150deg,transparent 35%,rgba(75,63,52,.22) 36%,rgba(75,63,52,.10) 60%,transparent 61%);
    clip-path:polygon(25% 15%,55% 0,72% 18%,100% 25%,88% 100%,30% 100%,0 70%)
}
.memory {
    position:absolute;
    right:2%;
    top:20px;
    z-index:2;
    font-family:STKaiti,"KaiTi",serif;
    font-size:22px;
    line-height:1.55;
    transform:rotate(-5deg);
    color:#40352d
}
.dark {
    margin:7px 10px;
    background:#151311;
    border:1px solid #5a4730;
    padding:10px 12px;
    color:#eee1ca
}
.dark-title {
    display:flex;
    align-items:baseline;
    gap:10px;
    margin-bottom:8px
}
.dark-title span {
    font-size:27px
}
.dark-title small {
    color:#d8c7ab
}
.dark-title a {
    margin-left:auto;
    color:#e6d3b0;
    text-decoration:none;
    font-size:14px
}
.monster-row {
    display:grid;
    grid-template-columns:repeat(9,minmax(65px,1fr));
    gap:9px;
    align-items:end
}
.monster {
    text-align:center;
    min-width:0
}
.monster img {
    display:block;
    width:100%;
    height:82px;
    object-fit:contain;
    background:#28231e;
    border:2px solid #806c4f;
    padding:3px
}
.monster b {
    display:block;
    font-size:13px;
    margin-top:5px;
    font-weight:500;
    white-space:nowrap
}
.screenshots .section-title {
    margin-bottom:12px
}
.shot-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}
.shot-grid figure {
    margin:0;
    background:#1c1713;
    border:3px solid #55422e;
    padding:3px;
    box-shadow:0 2px 4px #5b4630
}
.shot-grid img {
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:1.62;
    object-fit:cover
}
.shot-grid figcaption {
    color:#f0e5d3;
    text-align:center;
    font-family:STKaiti,"KaiTi",serif;
    font-size:17px;
    padding:4px 2px
}
.footer {
    line-height:0;
    background:#14110f
}
.footer img {
    width:100%;
    height:auto
}
@media (max-width:900px) {
    .intro-grid {
        grid-template-columns:245px 1fr
    }
    .news {
        grid-column:1/-1;
        border-left:0;
        border-top:1px solid rgba(74,51,31,.45);
        padding:10px 0 0
    }
    .monster-row {
        grid-template-columns:repeat(6,1fr)
    }
}
@media (max-width:650px) {
    .intro-title {
        display:flex;
        flex-wrap:wrap;
        align-items:center
    }
    .intro-title .news-head {
        display:flex;
        width:100%;
        min-width:0;
        margin-left:0;
        margin-top:4px;
        padding-left:0;
        gap:10px;
    }
    .intro-title .news-head .sub-title {
        font-size:23px !important;
        padding:3px 15px !important;
        border-radius:17px !important;
    }
    .intro-title .news-head .news-en {
        font-size:11px
    }
    .intro-title .news-head a {
        font-size:13px
    }
}
@media (max-width:650px) {
    .nav {
        gap:4px;
        padding:4px
    }
    .paper {
        margin:5px;
        padding:9px
    }
    .intro-grid {
        grid-template-columns:1fr
    }
    .promo {
        max-width:320px;
        margin:auto
    }
    .server-copy {
        font-size:15px
    }
    .server-copy p {
        white-space:normal
    }
    .server-copy strong {
        font-size:22px
    }
    .feature-grid {
        grid-template-columns:1fr
    }
    .feature-art {
        min-height:120px
    }
    .feature-grid ul {
        font-size:16px
    }
    .memory {
        font-size:19px
    }
    .monster-row {
        grid-template-columns:repeat(4,1fr);
        gap:6px
    }
    .monster img {
        height:72px
    }
    .monster b {
        font-size:12px
    }
    .shot-grid {
        grid-template-columns:1fr
    }
}
@media (max-width:390px) {
    .monster-row {
        grid-template-columns:repeat(3,1fr)
    }
    .section-title span,.dark-title span {
        font-size:23px
    }
    .section-title small,.dark-title small {
        font-size:11px
    }
}
/* 导航每个按钮的复古石头外框：包括“在线充值” */
.nav>a,
.nav>span {
    position:relative;
    box-sizing:border-box;
    padding:5px;
    background:
    linear-gradient(145deg,#76634a 0%,#3b3024 18%,#171411 50%,#4b3b29 82%,#806b4e 100%);
    border:1px solid #17120e;
    box-shadow:
    inset 0 0 0 1px #9a805b,
    inset 0 0 0 3px #2a2118,
    0 1px 2px rgba(0,0,0,.85);
}
.nav>a:before,
.nav>span:before {
    content:"";
    position:absolute;
    inset:2px;
    border:1px solid rgba(177,148,103,.55);
    pointer-events:none;
}
.nav>a>img,
.nav>span>img {
    position:relative;
    z-index:1;
}
.nav>span.disabled:hover {
    filter:saturate(.7) brightness(1.12);
}
/* ===== MOBILE ONLY — desktop above 650px is untouched ===== */
@media (max-width:650px) {
    html,body {
        width:100%;
        max-width:100%;
        overflow-x:hidden;
    }
    .page {
        width:100%;
        max-width:100%;
        margin:0;
    }
    .nav {
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:4px;
        padding:4px;
    }
    .paper {
        margin:5px;
        padding:9px;
    }
    /*
   * 手机端只做视觉重排：
   * 服务器标题 → 图片 → 服务器介绍 → 新闻标题 → 新闻列表
   * HTML 完全不改。
   */
    .intro {
        display:flex !important;
        flex-direction:column !important;
    }
    .intro-title {
        display:contents !important;
    }
    .intro-grid {
        display:contents !important;
    }
    .intro-title > span {
        order:1;
        align-self:flex-start;
        margin-bottom:0;
    }
    .intro-title > small {
        order:2;
        align-self:flex-start;
        margin-left:6px;
        margin-bottom:7px;
    }
    .promo {
        order:3;
        width:100%;
        max-width:320px;
        margin:0 auto 8px;
    }
    .server-copy {
        order:4;
        padding-top:0;
        font-size:15px;
        line-height:1.7;
        width:100%;
        margin-bottom:8px;
    }
    .server-copy p {
        white-space:normal;
    }
    .server-copy strong {
        font-size:22px;
    }
    /* 新闻标题现在紧跟服务器介绍，新闻列表紧跟其后 */
    .news-head {
        order:5;
        position:static !important;
        width:100% !important;
        min-width:0 !important;
        margin:0 0 8px !important;
        padding:0 !important;
        display:flex !important;
        align-items:baseline !important;
        gap:8px !important;
        box-sizing:border-box;
    }
    .news-head .sub-title {
        flex:0 0 auto;
        font-size:23px !important;
        line-height:normal !important;
        padding:3px 15px !important;
        border-radius:17px !important;
    }
    .news-head .news-en {
        flex:0 0 auto;
        font-size:11px !important;
        white-space:nowrap;
    }
    .news-head a {
        flex:0 0 auto;
        margin-left:auto !important;
        font-size:13px !important;
        white-space:nowrap;
    }
    .news {
        order:6;
        grid-column:auto !important;
        border-left:0;
        border-top:1px solid rgba(74,51,31,.45);
        padding:9px 0 0;
        width:100%;
    }
    .news li {
        grid-template-columns:58px minmax(0,1fr) 70px;
        gap:5px;
        padding:7px 0;
        font-size:13px;
    }
    .news time {
        font-size:10px;
    }
    .feature-grid {
        grid-template-columns:1fr !important;
    }
    .feature-art {
        min-height:120px;
    }
    .feature-grid ul {
        font-size:16px;
    }
    .memory {
        font-size:19px;
    }
    /* 经典怪物：手机端保持一行 */
    .monster-row {
        grid-template-columns:repeat(9,minmax(0,1fr)) !important;
        gap:2px !important;
    }
    .monster {
        min-width:0;
        overflow:hidden;
    }
    .monster img {
        width:100%;
        height:auto !important;
        max-height:62px;
        object-fit:contain;
    }
    .monster b {
        display:block;
        font-size:9px;
        line-height:1.2;
        white-space:nowrap;
        text-align:center;
    }
    /* 游戏截图：手机端保持三列 */
    .shot-grid {
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:6px !important;
    }
    .shot {
        min-width:0;
    }
    .shot img {
        width:100%;
        height:auto;
        display:block;
    }
}
@media (max-width:390px) {
    .monster-row {
        grid-template-columns:repeat(9,minmax(0,1fr)) !important;
        gap:1px !important;
    }
    .monster img {
        max-height:52px
    }
    .monster b {
        font-size:8px
    }
    .shot-grid {
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:4px !important;
    }
    .section-title span,.dark-title span {
        font-size:21px
    }
    .section-title small,.dark-title small {
        font-size:10px
    }
}