﻿/* =========  公共基础  ========= */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
    background:#0f0f1a url(./img/stardust.png) repeat;
    color:#e6e6e6;
    min-height:100vh;
    line-height:1.6;
}
a{text-decoration:none;color:inherit}

/* =========  顶部导航  ========= */
.top-nav{
    width:100%;
    background:rgba(0,0,0,.35);
    backdrop-filter:blur(6px);
    border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-wrap{
    max-width:1400px;
    margin:0 auto;
    display:flex;
    height:52px;
    padding:0 20px;
    align-items:center;
}
.nav-wrap a{
    flex:1;
    text-align:center;
    line-height:52px;
    font-size:15px;
    letter-spacing:1px;
    transition:background .3s,color .3s;
}
.nav-wrap a:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-wrap a.active{color:#ffb84d}
.nav-wrap a.active::after{
    content:"";
    position:absolute;
    left:20%;right:20%;bottom:8px;
    height:2px;
    background:#ffb84d;
    border-radius:2px;
}
.nav-wrap a{position:relative}

/* ========= 通用容器 ========= */
.container {
    max-width: 1400px; /* 1. 增加容器上限：从1400px增加到1800px，让整体布局更宽 */
    width: 92%;        /* 2. 增加屏幕占比：占据屏幕92%的宽度，确保在大屏幕上也能铺满 */
    margin: 50px auto 80px;
    padding: 0 20px;
    
    /* 3. 优化文字排版：增加行高和字间距，让宽屏阅读更舒适 */
    line-height: 1.9;  /* 行高稍微拉大一点，防止文字拥挤 */
}
header{text-align:center;margin-bottom:40px}
header h1{
    font-size:42px;
    letter-spacing:3px;
    color:#ffe7a8;
    text-shadow:0 0 10px rgba(255,231,168,.4);
}
header .subtitle{font-size:18px;color:#b8b8d9;margin-top:8px}

/* =========  更新日志  ========= */
.tabs{display:flex;justify-content:center;gap:12px;margin-bottom:32px}
.tab-button{
    padding:10px 28px;
    border:1px solid rgba(255,255,255,.25);
    background:rgba(0,0,0,.25);
    color:#d1d1e0;
    font-size:16px;
    border-radius:30px;
    cursor:pointer;
    transition:all .3s;
}
.tab-button:hover{background:rgba(255,255,255,.1);color:#fff}
.tab-button.active{background:#ffb84d;color:#0f0f1a;border-color:#ffb84d;font-weight:600}

.server-content{display:none}
.server-content.active{display:block}
.server-content h2{font-size:24px;margin-bottom:20px;color:#ffe7a8}
.update-log{display:flex;flex-direction:column;gap:20px}
.update-item{
    background:rgba(255,255,255,.05);
    border-left:4px solid #ffb84d;
    padding:18px 22px;
    border-radius:4px;
}
.update-item h3{font-size:17px;color:#ffb84d;margin-bottom:10px}
.update-item ul{list-style:none;padding-left:0}
.update-item li{position:relative;padding-left:18px}
.update-item li::before{
    content:"•";position:absolute;left:0;color:#ffb84d;font-size:20px;line-height:1.4
}

/* =========  游戏攻略  ========= */
.strategy-content h2{margin-bottom:25px;font-size:26px;color:#ffe7a8}
.strategy-item{margin-bottom:30px}
.strategy-item h3{font-size:19px;color:#ffb84d;margin-bottom:10px}
.strategy-item p{margin-bottom:10px;text-align:justify}

/* =========  官方主页  ========= */
.intro,.showcase,.rules,.sets,.dungeons,.screenshots{margin-bottom:45px}
.intro p,.dungeons-intro,.dungeons-tip{margin-bottom:12px;text-align:justify}
.dungeon-list{list-style:none;padding-left:0}
.dungeon-list li{line-height:1.8;padding-left:20px;position:relative}
.dungeon-list li::before{
    content:"▸";position:absolute;left:0;color:#ffb84d;font-size:18px
}
.showcase img,.rules img,.sets img{width:100%;border-radius:6px;box-shadow:0 8px 20px rgba(0,0,0,.6)}

/* ----- 图片轮播 ----- */
.gallery{
    position:relative;width:100%;max-width:1000px;margin:30px auto;
    overflow:hidden;border-radius:8px;box-shadow:0 8px 20px rgba(0,0,0,.6)
}
.gallery-inner{display:flex;transition:transform .6s ease}
.gallery-inner img{width:100%;flex-shrink:0}
.gallery-btn{
    position:absolute;top:50%;transform:translateY(-50%);
    background:rgba(0,0,0,.45);color:#fff;border:none;
    padding:12px 18px;font-size:24px;cursor:pointer;
    border-radius:4px;backdrop-filter:blur(4px);transition:background .3s
}
.gallery-btn:hover{background:rgba(0,0,0,.7)}
.prev{left:15px}
.next{right:15px}
.dots{
    position:absolute;bottom:12px;left:50%;transform:translateX(-50%);
    display:flex;gap:8px
}
.dot{
    width:10px;height:10px;border-radius:50%;
    background:rgba(255,255,255,.4);cursor:pointer;transition:background .3s
}
.dot.active{background:#ffb84d}

/* =========  登录器下载页  ========= */
.down-box{
    text-align:center;
    margin:40px auto;
    padding:40px 30px;
    background:rgba(255,255,255,.05);
    border-radius:8px;
    max-width:600px;
}
.down-btn{
    display:inline-block;
    padding:14px 40px;
    background:#ffb84d;
    color:#0f0f1a;
    font-size:18px;
    font-weight:600;
    border-radius:30px;
    transition:background .3s,color .3s;
}
.down-btn:hover{background:#ffa31a;color:#000}
.down-tip{
    margin-top:15px;
    font-size:14px;
    color:#b8b8d9;
}
.shot{
    margin-top:40px;
    text-align:center;
}
.shot img{
    max-width:100%;
    border-radius:6px;
    box-shadow:0 8px 20px rgba(0,0,0,.6);
}

/* =========  响应式  ========= */
@media(max-width:600px){
    .nav-wrap{font-size:13px}
    header h1{font-size:32px}
}