*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:#d8dde1;font-family:"Microsoft YaHei","SimSun",Arial,sans-serif;background:#070a0e url("../images/bg.jpg") center top/cover fixed no-repeat}
a{text-decoration:none;color:inherit}
.container{width:min(1180px,94%);margin:auto}

/* 顶部导航 */
.topbar{min-height:66px;border-bottom:1px solid rgba(255,209,90,.13);background:rgba(11,16,22,.94);box-shadow:0 8px 30px rgba(0,0,0,.42);position:sticky;top:0;z-index:20;backdrop-filter:blur(10px)}
.nav{min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:22px}
.logo{font-family:"SimSun",serif;font-weight:bold;font-size:25px;color:#f2f2f2;text-shadow:2px 2px #000;letter-spacing:2px;white-space:nowrap}
.logo span{color:#f0b52f}
.menu{display:flex;align-items:center;justify-content:flex-end;gap:4px;flex-wrap:wrap}
.menu a{display:flex;align-items:center;justify-content:center;min-height:38px;padding:0 12px;color:#bfc7ce;font-size:14px;border:1px solid transparent}
.menu a:hover,.menu a.active{color:#fff3ba;background:linear-gradient(#252f39,#111820);border-color:rgba(255,185,61,.18);box-shadow:inset 0 -2px #d08b19}
.mobile-menu{display:none}

/* 通用 Section */
.section{padding:70px 0;background:linear-gradient(180deg,rgba(9,13,18,.96),rgba(13,18,24,.98))}
.section:nth-of-type(even){background:rgba(8,12,17,.97)}
.section-title{text-align:center;margin-bottom:30px}
.section-title h2{margin:0;color:#f2f2f2;font-size:30px;text-shadow:2px 2px #000;font-family:"SimSun",serif}
.section-title h2:before,.section-title h2:after{content:"◆";color:#a30000;font-size:13px;margin:0 14px}
.section-title p{margin:9px 0 0;color:#7d8790;font-size:13px}

/* 首页 Hero */
.hero{min-height:650px;display:flex;align-items:center;position:relative;overflow:hidden;background:linear-gradient(90deg,rgba(5,8,12,.98),rgba(5,8,12,.72) 38%,rgba(5,8,12,.18) 68%,rgba(5,8,12,.75)),url("../images/bg.jpg") center center/cover no-repeat;border-bottom:1px solid #252d35}
.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 74% 54%,rgba(176,28,16,.28),transparent 25%),linear-gradient(180deg,rgba(5,8,12,.06),rgba(5,8,12,.92)),repeating-linear-gradient(135deg,rgba(255,210,70,.045) 0 1px,transparent 1px 18px);pointer-events:none}
.hero-inner{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 410px;align-items:center;gap:42px}
.hero-copy{max-width:660px}
.kicker{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border:1px solid rgba(255,176,28,.35);background:linear-gradient(90deg,#3a1606,#141014);color:#ffbf33;font-size:13px;margin-bottom:18px}
.hero h1{margin:0;font-size:62px;color:#f2f2f2;font-family:"SimSun",serif;text-shadow:0 4px 0 #000;letter-spacing:0}
.hero h1 span{color:#f0b52f}
.hero h3{font-size:23px;color:#f0c85d;font-weight:normal;margin:12px 0}
.hero p{line-height:1.9;color:#aeb7be;font-size:15px;margin:0;max-width:610px}
.hero-buttons{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.hero-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:26px;max-width:610px}
.hero-meta span{min-height:58px;padding:11px 12px;border:1px solid rgba(255,195,80,.16);background:rgba(12,18,24,.74);color:#7f8991;font-size:12px}
.hero-meta b{display:block;color:#ffd21a;font-size:15px;margin-bottom:2px;font-weight:normal}
.btn{display:inline-flex;align-items:center;justify-content:center;min-width:136px;min-height:44px;padding:0 22px;border:1px solid #59646c;background:linear-gradient(#303a43,#171d23);color:#ddd;font-weight:bold;box-shadow:0 2px #000;cursor:pointer}
.btn.primary{color:#fff1a1;border-color:#9b6509;background:linear-gradient(#a32b0a,#5d0d06)}
.btn:hover{filter:brightness(1.08)}
.hero-card{padding:18px;border:1px solid rgba(255,213,90,.18);background:rgba(11,16,22,.84);box-shadow:0 18px 55px rgba(0,0,0,.65)}
.hero-card-inner{border:1px solid rgba(180,0,0,.65);background:linear-gradient(#681010,#300506);padding:18px}
.hero-card h3{margin:0 0 13px;color:#ffd51a;font-size:17px}
.news-row{display:flex;gap:10px;padding:10px 0;border-bottom:1px dotted rgba(255,183,93,.32);font-size:13px}
.news-row a{color:#f3f3f3}
.news-row a:hover{color:#ffd21a}
.dot{color:#ffcf00}

/* 游戏服务器 */
.server-grid{display:grid;grid-template-columns:1.18fr .82fr;gap:20px}
.dark-box,.notice,.card,.equipment-card,.article{border:1px solid #323d47;background:linear-gradient(#171f27,#0e141a);box-shadow:0 8px 26px rgba(0,0,0,.45)}
.dark-box{padding:20px}
.box-title{color:#e9edf0;border-bottom:1px solid #333d45;padding-bottom:13px;margin-bottom:15px;font-weight:bold}
.box-title span{color:#ffba00;margin-right:8px}
.server-table{width:100%;border-collapse:collapse;font-size:13px}
.server-table th,.server-table td{padding:12px 8px;border-bottom:1px solid #252d34;text-align:left}
.server-table th{color:#929da6;font-weight:normal}
.online{color:#55d67a!important}
.offline{color:#d45b5b!important}
.status{display:inline-block;width:7px;height:7px;border-radius:50%;background:#44d76b;margin-right:5px}
.feature-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.feature{padding:15px;border:1px solid #2e3942;background:#10161c}
.feature strong{display:block;color:#ffd21a;margin-bottom:5px}
.feature small{color:#89939b;line-height:1.6}

/* 游戏公告 */
.news-layout{display:grid;grid-template-columns:1fr 330px;gap:20px}
.notice{overflow:hidden}
.notice-head{padding:14px 16px;background:linear-gradient(#9d1111,#5a0909);color:#ffd21a;font-weight:bold}
.notice ul{margin:0;padding:9px 18px 16px 35px}
.notice li{padding:10px 0;color:#fff000;font-size:13px;border-bottom:1px dotted rgba(255,183,93,.28)}
.notice li::marker{color:#ffd000}
.notice li span{color:#ff9f2c;margin-right:7px}
.notice li a{color:#f5f5f5}
.notice li a:hover{color:#ffd21a}
.top-tag{font-size:11px;color:#fff;background:#a90000;border:1px solid #ff6d00;padding:2px 5px;margin-left:8px}
.category-links a{display:flex;justify-content:space-between;padding:13px;border-bottom:1px solid #252e36;color:#bbb}
.category-links a:hover{color:#ffd21a}

/* 特色玩法 */
.feature-section{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(8,12,17,.98),rgba(13,18,24,.96)),url("../images/bg.jpg") center center/cover no-repeat}

/* 三职业展示 */
.class-showcase{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:22px}
.class-card{position:relative;height:300px;overflow:hidden;border:1px solid rgba(255,203,92,.18);background:linear-gradient(180deg,rgba(24,31,39,.8),rgba(8,12,16,.95));box-shadow:0 12px 32px rgba(0,0,0,.5)}
.class-card:before{content:"";position:absolute;left:18px;right:18px;bottom:0;height:42%;background:linear-gradient(180deg,transparent,rgba(120,14,10,.5));filter:blur(10px);pointer-events:none;z-index:0}
.class-card img{position:absolute;left:50%;top:50%;width:auto;height:310px;max-width:none;max-height:none;display:block;margin:0;padding:0;object-fit:contain;object-position:center center;transform:translate(-50%,-50%);filter:drop-shadow(0 16px 22px rgba(0,0,0,.72));z-index:1}
.class-card.warrior img,.class-card.mage img,.class-card.conjurer img{height:310px}
.class-card>div{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:52px 18px 16px;background:linear-gradient(180deg,transparent,rgba(4,7,10,.94))}
.class-card h3{margin:0;color:#ffd21a;font-size:20px;font-family:"SimSun",serif}
.class-card p{margin:5px 0 0;color:#b0b7bd;font-size:13px}

/* 特色玩法卡片 */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.card{padding:22px;min-height:168px}
.card .icon{font-size:30px;margin-bottom:13px;color:#f1bc41}
.card h3{color:#e9b33d;font-size:17px;margin:0 0 9px}
.card p{color:#89939b;font-size:13px;line-height:1.75;margin:0}

/* 装备展示 */
.equipment-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.equipment-card{padding:14px;text-align:center;cursor:pointer;transition:transform .2s ease}
.equipment-img{height:180px;display:flex;align-items:center;justify-content:center;background:#080c10;border:1px solid #27313a;margin-bottom:12px;position:relative;overflow:hidden}
.equipment-img img{max-width:100%;max-height:100%;object-fit:contain;position:relative;z-index:1;animation:float-item 3.5s ease-in-out infinite;transition:transform .4s ease,filter .4s ease}
.equipment-img::before{content:"";position:absolute;inset:-50%;background:radial-gradient(circle,rgba(255,210,26,.25) 0%,transparent 60%);animation:pulse-glow 3s infinite alternate ease-in-out;pointer-events:none}
.equipment-card h3{margin:0 0 8px;color:#ffd21a;font-size:16px}
.equipment-card p{margin:0;color:#818b93;font-size:13px;line-height:1.7}
.equipment-card:hover{transform:translateY(-3px)}
.equipment-card:hover .equipment-img img{transform:scale(1.12) translateY(-4px);filter:drop-shadow(0 0 12px rgba(255,210,26,.8)) brightness(1.15)}

@keyframes float-item{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes pulse-glow{0%{opacity:.3;transform:scale(.8)}100%{opacity:.9;transform:scale(1.1)}}
@keyframes modalFadeIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}

/* 模态框遮罩背景与主体 */
.equip-modal{display:none;position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;width:100vw!important;height:100vh!important;z-index:99999!important;background:rgba(0,0,0,.85);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);align-items:center;justify-content:center;box-sizing:border-box}
.equip-modal-content{position:relative;width:min(600px,90%);max-height:85vh;overflow-y:auto;-webkit-overflow-scrolling:touch;background:linear-gradient(180deg,#171f27,#0e141a);border:1px solid rgba(255,213,90,.3);box-shadow:0 10px 40px rgba(0,0,0,.8),0 0 15px rgba(255,186,0,.15);padding:24px;animation:modalFadeIn .25s ease-out}
.equip-modal-close{position:absolute;top:8px;right:14px;color:#89939b;font-size:28px;font-weight:bold;cursor:pointer;z-index:10;padding:4px 8px;transition:color .2s}
.equip-modal-close:hover{color:#ffd21a}
.modal-body{display:flex;gap:20px;align-items:center}

/* 放大后的图片容器与图片样式 */
.modal-img-box{width:170px;height:220px;flex-shrink:0;background:#080c10;border:1px solid #27313a;display:flex;align-items:center;justify-content:center;padding:8px}
.modal-img-box img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 0 8px rgba(255,210,26,.5))}
.modal-info{flex:1}
.modal-info h3{margin:0 0 10px;color:#ffd21a;font-size:20px;font-family:"SimSun",serif}
.modal-divider{height:1px;background:linear-gradient(90deg,rgba(255,210,26,.4),transparent);margin-bottom:12px}
.modal-info p{margin:0;color:#b8bec2;font-size:14px;line-height:1.8;white-space:pre-wrap}

/* 下载区域 */
.download{background:linear-gradient(90deg,#150b08,#290706 50%,#121017);border-top:1px solid #4c2620;border-bottom:1px solid #4c2620}
.download-panel{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:26px 28px;border:1px solid rgba(255,198,95,.24);background:rgba(8,12,16,.58)}
.download h2{margin:0;color:#ffd21a;font-size:24px}
.download p{color:#a2a8ad;margin:7px 0;font-size:13px}
.download-actions{display:flex;gap:10px;flex-wrap:wrap}

/* Footer */
.footer{border-top:1px solid #242c33;background:linear-gradient(180deg,rgba(8,12,16,.97),rgba(5,8,11,.99)),url("../images/bg.jpg") center bottom/cover no-repeat;padding:30px 0 20px;color:#747f87;font-size:12px;line-height:1.9}
.footer-main{display:grid;grid-template-columns:1fr minmax(260px,auto) auto;align-items:center;gap:34px}
.footer-logo{font-size:22px;color:#f2f2f2;font-family:"SimSun",serif}
.footer-links{display:flex;flex-direction:column;gap:4px}
.footer-links a{color:#929ca4}
.footer-links a:hover{color:#ffd21a}

/* 客服 */
.service-contact{min-width:260px;color:#89939b;display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 16px}
.service-contact div{grid-column:1}
.service-contact b{color:#ffd21a;font-weight:normal}
.service-contact img{grid-column:2;grid-row:1/span 3;width:120px;height:120px;object-fit:contain;display:block;border:1px solid #303941;background:#fff;padding:4px}
.service-contact span{grid-column:2;display:block;color:#69737b;margin-top:0;text-align:center;line-height:1.4}
.copyright{text-align:center;border-top:1px solid #1c2329;margin-top:22px;padding-top:15px}

/* 服务器按钮 */
.mini-btn{border:1px solid #6d3c00;background:#551000;color:#ffd21a;padding:5px 10px}
.muted{color:#666}

/* 公告文章 */
.article{padding:32px}
.article-title{font-size:26px;color:#ffd21a;text-align:center}
.article-meta{text-align:center;color:#707a82;padding:12px;border-bottom:1px solid #2d363d}
.article-body{line-height:2;color:#b8bec2;padding-top:20px;white-space:normal}

/* 公告页面 */
.news-page{background:#070a0e}
.news-page:before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,10,14,.92),rgba(7,10,14,.98)),url("../images/bg.jpg") center top/cover no-repeat;filter:saturate(.55) contrast(.85)}
.news-main{min-height:calc(100vh - 66px);background:linear-gradient(180deg,rgba(8,12,17,.98),rgba(10,14,19,.99))}
.news-page .section-title{padding-top:8px}
.news-page .notice,.news-page .article{background:linear-gradient(#141b23,#0c1117);border-color:#2f3942;box-shadow:0 12px 34px rgba(0,0,0,.55)}

/* 平板 / 中等屏幕 */
@media(max-width:980px){
.hero-inner{grid-template-columns:1fr}
.hero-card{max-width:560px}
.server-grid,.news-layout{grid-template-columns:1fr}
.class-showcase{grid-template-columns:repeat(3,minmax(0,1fr))}
.class-card{height:260px}
.class-card img,.class-card.warrior img,.class-card.mage img,.class-card.conjurer img{height:270px}
.cards,.equipment-grid{grid-template-columns:1fr 1fr}
.footer-main{grid-template-columns:1fr 1fr}
}

/* 手机与响应式适配 */
@media(max-width:650px){
.topbar,.nav{min-height:58px}
.menu{display:none}
.menu.open{display:flex;position:absolute;top:58px;left:0;right:0;flex-direction:column;align-items:stretch;background:#111820;border-bottom:1px solid #303942}
.menu.open a{justify-content:flex-start;padding-left:18px}
.mobile-menu{display:block;color:#aaa;font-size:24px;cursor:pointer}
.section{padding:52px 0}
.hero{min-height:560px}
.hero h1{font-size:42px}
.hero h3{font-size:19px}
.hero-meta{grid-template-columns:1fr}
.hero-card{display:none}
.class-showcase,.cards,.equipment-grid{grid-template-columns:1fr}
.class-card{height:320px}
.class-card img,.class-card.warrior img,.class-card.mage img,.class-card.conjurer img{height:320px}
.download-panel{flex-direction:column;align-items:flex-start}
.footer-main{grid-template-columns:1fr;text-align:center}
.footer-links{align-items:center}
.service-contact{width:100%;text-align:center;grid-template-columns:1fr}
.service-contact div,.service-contact img,.service-contact span{grid-column:1;grid-row:auto}
.service-contact img{margin:8px auto 0}
.modal-body{flex-direction:column;text-align:center}
.modal-img-box{width:140px;height:170px;margin:0 auto}
.modal-divider{background:linear-gradient(90deg,transparent,rgba(255,210,26,.4),transparent)}
}