/* ============================================================
   繁星天堂 II · 官网样式
   暗金 · 史诗 · 深色 —— 参考 fly.xxtt2.com 模板调性

   响应式策略：**移动优先（mobile-first）**
   - 基础样式 = 手机版
   - min-width 断点逐级增强：480 / 768 / 1024 / 1280
   - 导航在手机上折叠成抽屉
   - 区服条在手机上横向滑动
   - 栅格在手机上单列，平板 2 列，桌面 3~4 列
   - 悬浮"在线联系"在手机上变底部固定条
   ============================================================ */

:root{
  --gold:#dfb357; --gold2:#f6e0a8; --gold-dim:#8a6a2c; --gold-deep:#5a4520;
  --ink:#0a0806; --panel:rgba(26,21,15,.74); --panel2:rgba(18,15,11,.88);
  --line:rgba(223,179,87,.26); --line2:rgba(223,179,87,.12);
  --txt:#e8e2d4; --txt2:#9c9484; --txt3:#6b6558;
  --ok:#57c07a; --warn:#e0a83c; --bad:#d05a5a;
  --maxw:1400px;

  /* 断点（供 JS 读取，值必须与下面的 @media 一致） */
  --bp-sm:480px; --bp-md:768px; --bp-lg:1024px; --bp-xl:1280px;

  /* 安全区（刘海屏 / 手势条） */
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:124px}
body{
  background:var(--ink); color:var(--txt);
  font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB",serif;
  font-size:14px; line-height:1.7; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-2;
  background:radial-gradient(ellipse at 50% -8%,#1d1710 0%,#0a0806 62%);
}
body.nav-open{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit}
/* 全局深色滚动条（Windows Chromium 原生白条会破坏暗色主题） */
*{scrollbar-width:thin;scrollbar-color:rgba(223,179,87,.45) rgba(10,8,6,.6)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:rgba(10,8,6,.6)}
::-webkit-scrollbar-thumb{
  background:rgba(223,179,87,.42);border-radius:5px;
  border:2px solid rgba(10,8,6,.6);background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{background:rgba(223,179,87,.72);background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}
.gold{
  background:linear-gradient(180deg,#fdf6e3 0%,var(--gold) 42%,#9a7429 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 16px}

/* ═══════════ 按钮 ═══════════ */
.btn{
  padding:9px 20px; font-size:13px; letter-spacing:2px;
  border:1px solid var(--gold); color:var(--gold); background:transparent;
  cursor:pointer; transition:.25s; border-radius:1px; white-space:nowrap;
}
.btn:hover{background:var(--gold); color:#1a1409; box-shadow:0 0 22px rgba(223,179,87,.3)}
.btn.solid{background:linear-gradient(180deg,var(--gold2),var(--gold)); color:#1a1409; border-color:transparent; font-weight:600}
.btn.solid:hover{filter:brightness(1.13); background:linear-gradient(180deg,var(--gold2),var(--gold))}
.btn.sm{padding:6px 13px;font-size:12px;letter-spacing:1px}
.btn.lg{padding:14px 40px;font-size:14px;letter-spacing:4px}
.btn.wide{width:100%;padding:12px}
.btn:disabled{opacity:.42;cursor:not-allowed}
.btn:disabled:hover{background:transparent;color:var(--gold);box-shadow:none}

/* ═══════════ 表单控件 ═══════════ */
.inp{
  padding:8px 12px; font-size:13px; font-family:inherit;
  border:1px solid var(--line2); background:var(--panel); color:var(--txt);
  border-radius:2px; outline:none; transition:.2s; width:100%;
}
.inp:focus{border-color:var(--gold)}
select.inp{cursor:pointer}
textarea.inp{resize:vertical}

/* ═══════════ 顶栏 ═══════════ */
.topbar{
  position:sticky; top:0; z-index:200;
  background:rgba(8,6,4,.92); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line2);
}
.tb-in{display:flex;align-items:center;height:66px;gap:16px}
.logo{display:flex;align-items:center;gap:10px;flex:none}
.logo .mark{
  width:32px;height:32px;border:1px solid var(--gold);display:grid;place-items:center;
  font-size:15px;color:var(--gold);transform:rotate(45deg);flex:none;
  box-shadow:0 0 18px rgba(223,179,87,.22) inset;
}
.logo .mark span{transform:rotate(-45deg)}
.logo h1{font-size:16px;font-weight:400;letter-spacing:2px;line-height:1.2}
.logo small{display:block;font-size:8px;letter-spacing:3px;color:var(--gold-dim);margin-top:1px}

/* 汉堡按钮（手机上显示） */
.nav-toggle{
  display:none; width:40px;height:40px;flex:none;
  background:transparent;border:1px solid var(--line);color:var(--gold);
  font-size:18px;cursor:pointer;align-items:center;justify-content:center;
}
.nav-toggle:active{background:rgba(223,179,87,.12)}

/* 导航 */
.nav{display:none}
.tb-act{display:flex;gap:8px;align-items:center;margin-left:auto;flex:none}
.tb-user{
  display:none; align-items:center;gap:8px;font-size:13px;color:var(--txt2);
  padding:7px 13px;border:1px solid var(--line2);white-space:nowrap;flex:none;
}
.tb-user.on{display:flex}
.tb-user b{color:var(--gold);font-weight:500}

/* 顶栏全局搜索 —— 挂在区服条右侧（见 .sb-tools）*/
.gs-drop{
  position:absolute;top:calc(100% + 7px);right:0;width:340px;max-width:78vw;
  background:var(--panel2);border:1px solid var(--line);z-index:320;
  display:none;max-height:62vh;overflow-y:auto;
  box-shadow:0 14px 44px rgba(0,0,0,.6);
}
.gs-drop.on{display:block}
.gs-row{
  padding:10px 13px;border-bottom:1px solid var(--line2);cursor:pointer;transition:.15s;
}
.gs-row:hover{background:rgba(223,179,87,.07)}
.gs-row .n{font-size:13.5px;color:var(--txt)}
.gs-row .n b{color:var(--gold);font-weight:500}
.gs-row .m{font-size:11px;color:var(--txt3);margin-top:2px}
.gs-empty{padding:22px;text-align:center;color:var(--txt3);font-size:12px}
.gs-hd{padding:8px 13px;font-size:11px;color:var(--gold-dim);letter-spacing:1px;
       border-bottom:1px solid var(--line2);background:rgba(0,0,0,.25)}

/* ═══════════ 移动端抽屉 ═══════════ */
.drawer{
  position:fixed; inset:0; z-index:300; display:none;
}
.drawer.open{display:block}
.drawer .mask{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(3px)}
.drawer .panel{
  position:absolute; right:0; top:0; bottom:0; width:78%; max-width:320px;
  background:var(--panel2); border-left:1px solid var(--line);
  padding:20px 18px calc(24px + var(--safe-b));
  overflow-y:auto; transform:translateX(100%); transition:transform .28s;
}
.drawer.open .panel{transform:none}
.drawer .panel a{
  display:block; padding:13px 4px; font-size:15px; letter-spacing:2px;
  color:var(--txt2); border-bottom:1px solid var(--line2);
}
.drawer .panel a:hover,.drawer .panel a.on{color:var(--gold)}
.drawer .close{
  position:absolute; right:14px; top:12px; background:none;border:none;
  color:var(--txt2); font-size:24px; cursor:pointer;line-height:1;
}

/* ═══════════ 区服条 ═══════════ */
.serverbar{
  border-bottom:1px solid var(--line2);
  background:linear-gradient(180deg,rgba(22,17,11,.92),rgba(10,8,6,.55));
  position:sticky; top:66px; z-index:190;
}
.sb-in{display:flex;align-items:center;gap:14px;height:48px}
/* 当前区（只读）—— 选区在入口网关做完了，这里只是"我在哪"的提示 */
.sb-cur{display:flex;align-items:baseline;gap:9px;min-width:0;flex:none}
.sb-cur .dot{
  width:7px;height:7px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 8px var(--ok);flex:none;align-self:center;
}
.sb-cur .dot.soon{background:var(--warn);box-shadow:0 0 8px rgba(224,168,60,.6)}
.sb-cur .dot.off{background:#8a3b3b;box-shadow:none}
.sb-cur b{font-size:14px;font-weight:500;color:var(--txt);letter-spacing:1.5px;white-space:nowrap}
.sb-cur i{font-style:normal;font-size:11.5px;color:var(--txt3);letter-spacing:.5px;white-space:nowrap}

/* 区服条右侧工具区（搜索 + 音乐）*/
.sb-tools{display:none;margin-left:auto;align-items:center;gap:10px;flex:none;padding-left:16px;
  border-left:1px solid var(--line2)}
.sb-tools .tb-search{position:relative;display:flex;gap:6px;align-items:center}
.sb-tools .tb-search input{
  width:160px;background:rgba(12,9,6,.9);border:1px solid rgba(223,179,87,.28);color:var(--txt);
  padding:7px 12px;border-radius:1px;font-size:13px;outline:none;transition:.2s;
}
.sb-tools .tb-search input::placeholder{color:var(--txt3);opacity:.85}
.sb-tools .tb-search input:focus{border-color:var(--gold);box-shadow:0 0 0 2px rgba(223,179,87,.12);width:200px}
.sb-tools .btn-search{
  background:rgba(223,179,87,.1);border-color:rgba(223,179,87,.35);color:var(--gold);
}
.sb-tools .btn-search:hover{background:rgba(223,179,87,.2);border-color:var(--gold)}
.sb-tools .bgm-btn{
  width:34px;height:34px;padding:0;display:grid;place-items:center;font-size:16px;line-height:1;flex:none;
  background:rgba(12,9,6,.9);border-color:rgba(223,179,87,.28);
}
.sb-tools .bgm-btn:hover{border-color:var(--gold);color:var(--gold)}
.sb-tools .bgm-btn.on{border-color:var(--gold);color:var(--gold);background:rgba(223,179,87,.14)}
@media (min-width:1024px){
  .sb-tools{display:flex}
}
/* 平板：搜索/音乐留在第一行右端 */
@media (max-width:1023px){
  .sb-in{height:auto;flex-wrap:wrap;padding:8px 0;row-gap:8px}
  .sb-tools{
    display:flex;margin-left:auto;padding-left:12px;
    border-left:1px solid var(--line2);
  }
}
@media (max-width:600px){
  .sb-tools{
    margin-left:0;width:100%;padding-left:0;
    border-left:none;border-top:1px solid var(--line2);padding-top:8px;
  }
  .sb-tools .tb-search input{width:130px}
  .sb-tools .tb-search input:focus{width:160px}
}

/* ═══════════ HERO ═══════════ */
.hero{position:relative;min-height:460px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero .bgv{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.42) saturate(.85);
}
.hero .veil{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 42%,rgba(10,8,6,.2),rgba(10,8,6,.94) 76%);
}
.hero-in{position:relative;text-align:center;z-index:2;padding:56px 16px;width:100%}
.hero-kicker{font-size:10px;letter-spacing:6px;color:var(--gold-dim);margin-bottom:16px}
.hero h2{font-size:40px;font-weight:400;letter-spacing:8px;line-height:1.16;margin-bottom:16px;text-shadow:0 6px 50px rgba(0,0,0,.95)}
.hero-tag{font-size:12px;letter-spacing:2px;color:var(--txt2);margin-bottom:30px}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ═══════════ 滚动公告 ═══════════ */
.ticker{border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);background:rgba(12,9,6,.86);overflow:hidden}
.tk-in{display:flex;align-items:center;height:42px;gap:12px}
.tk-tag{flex:none;padding:3px 11px;border:1px solid var(--gold-dim);color:var(--gold);font-size:10px;letter-spacing:1px}
.tk-track{flex:1;overflow:hidden;position:relative;height:42px}
.tk-track ul{position:absolute;left:0;top:0;animation:roll 30s linear infinite;list-style:none;width:100%}
.tk-track li{height:42px;line-height:42px;font-size:13px;color:var(--txt2);letter-spacing:1px}
.tk-track li em{color:var(--gold);font-style:normal;margin-right:8px}
.tk-track li.on{display:block}
.tk-more{flex:none;font-size:12px;color:var(--txt2);cursor:pointer;letter-spacing:1px;white-space:nowrap}
.tk-more:hover{color:var(--gold)}
.ann-pop-foot{display:flex;align-items:center;gap:10px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line2)}
.ann-pop-hide{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--txt2);cursor:pointer;user-select:none}
.ann-pop-hide input{accent-color:var(--gold)}
@keyframes roll{0%{transform:translateY(0)}100%{transform:translateY(-100%)}}
.tk-track:hover ul{animation-play-state:paused}

/* ═══════════ 区块 ═══════════ */
.sec{padding:44px 0;border-bottom:1px solid var(--line2)}
.sec-hd{text-align:center;margin-bottom:30px}
.sec-hd .kick{font-size:10px;letter-spacing:5px;color:var(--gold-dim);margin-bottom:8px}
.sec-hd h3{font-size:24px;font-weight:400;letter-spacing:6px;margin-bottom:6px}
.sec-hd p{font-size:12px;color:var(--txt2);letter-spacing:1px}
.sec-hd .rule{width:56px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:14px auto 0}

/* 栅格 */
.grid{display:grid;grid-template-columns:1fr;gap:14px}

/* ═══════════ 区服卡片 ═══════════ */
.srv-card{
  border:1px solid var(--line2);background:var(--panel);
  padding:20px 18px;position:relative;overflow:hidden;transition:.28s;
  display:flex;flex-direction:column;
}
.srv-card::before{
  content:"";position:absolute;inset:0;opacity:0;transition:.28s;
  background:radial-gradient(ellipse at 50% 0%,rgba(223,179,87,.12),transparent 70%);
}
.srv-card:hover{border-color:var(--gold);transform:translateY(-3px)}
.srv-card:hover::before{opacity:1}
.srv-card .ico{font-size:26px;margin-bottom:10px;opacity:.85}
.srv-card h4{font-size:19px;font-weight:400;letter-spacing:3px;margin-bottom:3px}
.srv-card .sub{font-size:11.5px;color:var(--txt2);letter-spacing:1px;margin-bottom:14px}
.srv-card .stat{
  display:flex;gap:20px;font-size:12px;color:var(--txt2);
  padding:10px 0;border-top:1px solid var(--line2);margin-top:auto;
}
.srv-card .stat b{display:block;color:var(--gold);font-size:16px;font-family:Georgia,serif;font-weight:400}
.srv-card .go{margin-top:14px}
.srv-card.locked{opacity:.62}
.srv-card.locked .go .btn{pointer-events:none}
.srv-badge{
  position:absolute;top:12px;right:12px;font-size:10px;letter-spacing:1px;
  padding:2px 8px;border:1px solid var(--line);color:var(--txt2);
}
.srv-badge.main{border-color:var(--gold);color:var(--gold)}
.srv-badge.closed{border-color:var(--bad);color:var(--bad)}
.srv-badge.coming{border-color:var(--warn);color:var(--warn)}

/* ═══════════ 排行榜 ═══════════ */
.rank-tabs{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:22px}
.rank-tabs button{
  padding:6px 16px;font-size:12.5px;letter-spacing:1px;cursor:pointer;
  background:transparent;border:1px solid var(--line2);color:var(--txt2);transition:.2s;
}
.rank-tabs button.on{border-color:var(--gold);color:var(--gold);background:rgba(223,179,87,.1)}
.rank-list{border:1px solid var(--line2);background:var(--panel)}
.rank-item{
  display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center;
  padding:11px 14px;border-bottom:1px solid var(--line2);transition:.2s;
}
.rank-item:last-child{border-bottom:none}
.rank-item:hover{background:rgba(223,179,87,.05)}
.rank-no{
  font-family:Georgia,serif;font-size:16px;color:var(--txt3);text-align:center;
}
.rank-item:nth-child(1) .rank-no{color:#ffd76a}
.rank-item:nth-child(2) .rank-no{color:#d8d8d8}
.rank-item:nth-child(3) .rank-no{color:#c9955a}
.rank-name{font-size:14px;letter-spacing:1px;display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0}
/* 副标题（Lv.85 / 击杀 84 / 血盟名）—— 独立小字，不跟角色名挤在一行 */
.rank-sub{font-size:11.5px;color:var(--txt3);letter-spacing:0;font-weight:400}
.rank-val{font-family:Georgia,serif;color:var(--gold);font-size:15px;white-space:nowrap}
/* 区服徽章 —— 排行榜每行都要标明来自哪个区 */
.sv{
  display:inline-block;padding:1px 8px;font-size:10.5px;letter-spacing:1px;
  border:1px solid currentColor;border-radius:1px;
}
.sv.z1{color:#6fb3e0} .sv.z2{color:#e08a6f} .sv.z3{color:#8fd694}
.sv.z4{color:#c99ae0} .sv.z5{color:#e0c96f} .sv.z6{color:#6fd8d0}
.sv.z7{color:#e07f9a} .sv.z8{color:#9a9ae0} .sv.z9{color:#d4d46f}

/* ═══════════ 公告列表 ═══════════ */
.news-list{border:1px solid var(--line2);background:var(--panel)}
.news-item{
  display:flex;align-items:center;gap:12px;padding:12px 15px;
  border-bottom:1px solid var(--line2);transition:.2s;cursor:pointer;
}
.news-item:last-child{border-bottom:none}
.news-item:hover{background:rgba(223,179,87,.05)}
.news-item .dt{font-size:11.5px;color:var(--txt3);font-family:Georgia,serif;flex:none;width:78px}
.news-item .tt{flex:1;font-size:13.5px;letter-spacing:.5px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.news-item .tp{
  font-size:10.5px;color:var(--gold-dim);border:1px solid var(--line2);
  padding:1px 8px;flex:none;
}
.news-item .top{color:var(--gold)}

/* ═══════════ 公告详情弹窗 ═══════════ */
.modal{position:fixed;inset:0;z-index:400;display:none;align-items:center;justify-content:center;padding:16px}
.modal.open{display:flex}
.modal .mask{position:absolute;inset:0;background:rgba(0,0,0,.8);backdrop-filter:blur(4px)}
.modal .box{
  position:relative;max-width:640px;width:100%;max-height:80vh;overflow-y:auto;
  background:var(--panel2);border:1px solid var(--line);padding:26px 24px;
}
.modal .box h3{font-size:19px;font-weight:400;letter-spacing:2px;margin-bottom:6px;color:var(--gold)}
.modal .box .meta{font-size:11.5px;color:var(--txt3);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line2)}
.modal .box .content{font-size:14px;line-height:1.9;color:var(--txt)}
.modal .box .content p{margin-bottom:10px}
.modal .x{position:absolute;right:14px;top:12px;background:none;border:none;color:var(--txt2);font-size:24px;cursor:pointer;line-height:1}

/* ═══════════ 登录 / 注册弹窗 ═══════════ */
.auth-tabs{display:flex;border-bottom:1px solid var(--line2);margin-bottom:20px}
.auth-tabs button{
  flex:1;padding:11px;background:transparent;border:none;border-bottom:2px solid transparent;
  color:var(--txt2);font-size:14px;letter-spacing:2px;cursor:pointer;transition:.2s;
}
.auth-tabs button.on{color:var(--gold);border-bottom-color:var(--gold)}
.field{margin-bottom:14px}
.field label{display:block;font-size:11.5px;letter-spacing:1px;color:var(--txt2);margin-bottom:6px}
.field input,.field select{
  width:100%;padding:10px 12px;background:rgba(0,0,0,.34);
  border:1px solid var(--line2);color:var(--txt);font-size:14px;outline:none;transition:.2s;
}
.field input:focus,.field select:focus{border-color:var(--gold)}
.field input::placeholder{color:var(--txt3)}
.field .hint{font-size:11px;color:var(--txt3);margin-top:5px}
/* M10：验证码行 */
.field.hide{display:none}
.cap-row{display:flex;gap:10px;align-items:stretch}
.cap-row input{flex:1;min-width:0}
.cap-row img{
  width:120px;height:40px;border:1px solid var(--line2);cursor:pointer;
  background:rgba(0,0,0,.34);display:block;flex-shrink:0;
}
.auth-err{
  font-size:12.5px;color:var(--bad);min-height:18px;margin-bottom:10px;
  padding-left:2px;
}
.auth-msg{
  font-size:12.5px;color:var(--ok);min-height:18px;margin-bottom:10px;
}

/* ═══════════ 我的账号（M2：多区账号绑定） ═══════════ */
.acc-list{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:18px}
.acc-card{
  border:1px solid var(--line2);padding:14px 15px;background:rgba(255,255,255,.015);
  transition:.2s;
}
.acc-card.bound{border-color:rgba(223,179,87,.34)}
.acc-card .acc-hd{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.acc-card .acc-ico{font-size:20px;flex:none}
.acc-card .acc-nm{font-size:14.5px;letter-spacing:2px;color:var(--gold)}
.acc-card .acc-sb{font-size:11px;color:var(--txt3)}
.acc-card .acc-badge{
  margin-left:auto;font-size:10.5px;letter-spacing:1px;padding:3px 9px;
  border:1px solid var(--line2);color:var(--txt2);flex:none;
}
.acc-card .acc-badge.on{border-color:var(--gold);color:var(--gold);background:rgba(223,179,87,.1)}
.acc-card .acc-badge.off{border-color:rgba(223,179,87,.4);color:var(--txt3)}
/* 已绑定的账号名 —— 用等宽字体，一眼看清账号 */
.acc-card .acc-name{
  font-family:Consolas,Monaco,monospace;font-size:14px;color:var(--txt);
  letter-spacing:1px;word-break:break-all;
}
.acc-card .acc-name.empty{color:var(--txt3);font-family:inherit;letter-spacing:1px}
/* 角色小卡片 */
.acc-chars{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.acc-char{
  border:1px solid var(--line2);padding:6px 11px;font-size:12px;
  background:rgba(0,0,0,.25);
}
.acc-char .cn{color:var(--gold)}
.acc-char .lv{color:var(--txt3);margin-left:7px}
.acc-card .acc-act{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
/* 分区小标题 */
.acc-sub{
  font-size:11.5px;letter-spacing:2px;color:var(--txt2);margin:0 0 10px;
  padding-bottom:7px;border-bottom:1px solid var(--line2);
}
.acc-note{
  font-size:11.5px;color:var(--txt3);line-height:1.75;margin-top:12px;
  padding:9px 11px;border-left:2px solid var(--line2);background:rgba(0,0,0,.2);
}
.acc-note b{color:var(--gold-dim);font-weight:400}

/* 选区网格 */
.sel-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:16px}
.sel-item{
  border:1px solid var(--line2);padding:13px 14px;cursor:pointer;transition:.2s;
  display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.015);
}
.sel-item:hover{border-color:var(--gold-dim)}
.sel-item.on{border-color:var(--gold);background:rgba(223,179,87,.1)}
.sel-item .ico{font-size:21px}
.sel-item .nm{font-size:14.5px;letter-spacing:2px}
.sel-item .sb{font-size:11px;color:var(--txt2)}
.sel-item .rt{margin-left:auto;text-align:right;font-size:11px;color:var(--txt3)}

/* ═══════════ 页脚 ═══════════ */
footer{border-top:1px solid var(--line2);padding:36px 0 calc(28px + var(--safe-b));background:rgba(6,5,3,.6)}
.ft-grid{display:grid;grid-template-columns:1fr;gap:26px}
.ft-col h6{font-size:12.5px;letter-spacing:2px;color:var(--gold);margin-bottom:12px;font-weight:400}
.ft-col ul{list-style:none}
.ft-col li{margin-bottom:7px}
.ft-col a{font-size:12.5px;color:var(--txt2);letter-spacing:.5px}
.ft-col a:hover{color:var(--gold)}
.ft-about p{font-size:12.5px;color:var(--txt2);line-height:1.9;margin-top:12px}
.ft-copy{
  text-align:center;font-size:11.5px;color:var(--txt3);margin-top:28px;
  padding-top:18px;border-top:1px solid var(--line2);line-height:2;
}
.ft-copy a{color:var(--txt2)}
.ft-copy a:hover{color:var(--gold)}

/* ═══════════ 悬浮「在线联系」 ═══════════ */
.fab{
  position:fixed;right:16px;bottom:calc(16px + var(--safe-b));z-index:250;
  display:flex;flex-direction:column;gap:9px;align-items:flex-end;
}
.fab-btn{
  width:50px;height:50px;border-radius:50%;border:1px solid var(--gold);
  background:rgba(12,9,6,.94);color:var(--gold);font-size:19px;
  display:grid;place-items:center;cursor:pointer;
  box-shadow:0 6px 24px rgba(0,0,0,.6),0 0 22px rgba(223,179,87,.18);
  transition:.25s;
}
.fab-btn:active{transform:scale(.94)}
.fab-panel{
  position:fixed;left:0;right:0;bottom:0;z-index:260;
  background:var(--panel2);border-top:1px solid var(--gold);
  padding:20px 18px calc(20px + var(--safe-b));
  transform:translateY(102%);transition:transform .28s;
  max-height:76vh;overflow-y:auto;
}
.fab-panel.open{transform:none}
.fab-panel h5{font-size:14px;font-weight:400;letter-spacing:2px;color:var(--gold);margin-bottom:14px}
.fab-opt{
  display:flex;align-items:center;gap:12px;padding:13px 14px;margin-bottom:9px;
  border:1px solid var(--line2);cursor:pointer;transition:.2s;
}
.fab-opt:hover{border-color:var(--gold)}
.fab-opt .ico{font-size:20px}
.fab-opt .nm{font-size:13.5px}
.fab-opt .ds{font-size:11px;color:var(--txt2)}
.fab-close{position:absolute;right:14px;top:12px;background:none;border:none;color:var(--txt2);font-size:22px;cursor:pointer}

/* ══════════════════════════════════════════════════════════
   实时在线客服窗口（M7+）
   固定在右下角的小窗，WebSocket 连着聊天服务（8084）。
   手机上占满下半屏；桌面上 340×420。
   ══════════════════════════════════════════════════════════ */
.chatbox{
  position:fixed;right:16px;bottom:calc(78px + var(--safe-b));z-index:270;
  width:340px;max-width:calc(100vw - 32px);
  height:420px;max-height:calc(100vh - 140px);
  background:var(--panel2);border:1px solid var(--gold);
  border-radius:12px;display:none;flex-direction:column;overflow:hidden;
  box-shadow:0 18px 60px rgba(0,0,0,.6),0 0 30px rgba(223,179,87,.12);
}
.chatbox.open{display:flex}
.chatbox-hd{
  display:flex;align-items:center;gap:9px;padding:11px 12px;flex:none;
  border-bottom:1px solid var(--line2);background:rgba(26,21,15,.92);
}
.chatbox-dot{width:8px;height:8px;border-radius:50%;background:var(--txt3);flex:none}
.chatbox-dot.on{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.chatbox-dot.wait{background:var(--warn);animation:chatPulse 1.4s infinite}
.chatbox-dot.err{background:var(--bad)}
@keyframes chatPulse{0%,100%{opacity:1}50%{opacity:.3}}
.chatbox-tt{flex:1;min-width:0;line-height:1.35}
.chatbox-tt b{display:block;font-size:13.5px;color:var(--gold);font-weight:400;letter-spacing:1px}
.chatbox-tt span{display:block;font-size:11px;color:var(--txt3)}
.chatbox-btn{
  background:none;border:none;color:var(--txt2);font-size:17px;cursor:pointer;
  width:26px;height:26px;line-height:1;border-radius:4px;flex:none;
}
.chatbox-btn:hover{color:var(--gold);background:rgba(223,179,87,.1)}

/* 选类型 */
.chatbox-start{padding:12px;overflow:auto;flex:1;min-height:0}
.cs-tip{font-size:12px;color:var(--txt2);margin-bottom:11px;text-align:center}
.cs-pick{
  display:flex;align-items:center;gap:11px;
  padding:11px 12px;margin-bottom:8px;cursor:pointer;
  border:1px solid var(--line2);transition:.2s;
}
.cs-pick:hover{border-color:var(--gold);background:rgba(223,179,87,.05)}
.cs-pick .ico{font-size:21px;flex:none;width:26px;text-align:center}
.cs-pick b{font-size:13.5px;font-weight:400;color:var(--txt);flex:none}
.cs-pick i{font-size:11px;font-style:normal;color:var(--txt3);margin-left:auto;text-align:right}
.cs-more{display:flex;justify-content:center;gap:16px;margin-top:12px;
  padding-top:11px;border-top:1px solid var(--line2)}
.cs-link{font-size:11.5px;color:var(--txt2);cursor:pointer}
.cs-link:hover{color:var(--gold)}

/* 消息区 */
.chatbox-body{flex:1;min-height:0;display:flex;flex-direction:column}
.chat-msgs{flex:1;overflow-y:auto;padding:13px 12px;display:flex;flex-direction:column;gap:9px}
.cm{max-width:82%;padding:8px 11px;border-radius:9px;font-size:13px;line-height:1.6;
   word-break:break-word;white-space:pre-wrap}
.cm.me{align-self:flex-end;background:rgba(223,179,87,.16);border:1px solid rgba(223,179,87,.28);
        color:var(--txt)}
.cm.them{align-self:flex-start;background:rgba(255,255,255,.045);border:1px solid var(--line2)}
.cm.ai{align-self:flex-start;background:rgba(150,110,220,.13);border:1px solid rgba(150,110,220,.32)}
.cm.sys{align-self:center;max-width:92%;background:none;border:none;color:var(--txt3);font-size:11.5px;text-align:center}
.cm-who{font-size:10.5px;color:var(--txt3);margin-bottom:3px}

/* 输入区 */
.chatbox-foot{display:flex;gap:8px;padding:9px 10px;flex:none;
  border-top:1px solid var(--line2);background:rgba(26,21,15,.92)}
.chatbox-foot textarea{
  flex:1;min-width:0;max-height:96px;resize:none;background:#0f1319;
  border:1px solid var(--line2);color:var(--txt);border-radius:8px;
  padding:8px 10px;font:13px/1.55 inherit;outline:none;
}
.chatbox-foot textarea:focus{border-color:var(--gold)}
.chatbox-send{
  flex:none;padding:0 15px;background:linear-gradient(180deg,var(--gold2),var(--gold));
  color:#1a1409;border:none;border-radius:8px;font-size:12.5px;font-weight:600;
  cursor:pointer;letter-spacing:1px;
}
.chatbox-send:hover{filter:brightness(1.12)}
.chatbox-send:disabled{opacity:.45;cursor:not-allowed}

@media(max-width:600px){
  .chatbox{
    right:0;left:0;bottom:0;width:100%;max-width:100%;height:72vh;
    max-height:72vh;border-radius:14px 14px 0 0;border-bottom:none;
  }
}

/* ═══════════ 加载 / 空态 ═══════════ */
.loading{padding:40px;text-align:center;color:var(--txt3);font-size:13px;letter-spacing:2px}
.loading::after{
  content:"";display:inline-block;width:12px;height:12px;margin-left:8px;
  border:1px solid var(--gold);border-top-color:transparent;border-radius:50%;
  animation:spin .8s linear infinite;vertical-align:-2px;
}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{padding:34px;text-align:center;color:var(--txt3);font-size:13px}

/* ══════════════════════════════════════════════════════════
   选区网关页（进入网站的第一屏）
   玩家先选区，选完才看到该区内容
   ══════════════════════════════════════════════════════════ */
.gw{
  position:relative;min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;justify-content:center;
  padding:40px 0 calc(40px + var(--safe-b));overflow:hidden;
}
.gw-bg{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(60,44,20,.5),transparent 60%),
    radial-gradient(ellipse at 20% 100%,rgba(40,30,60,.35),transparent 55%);
}
.gw-bg::after{
  content:"";position:absolute;inset:0;opacity:.32;
  background-image:
    linear-gradient(rgba(223,179,87,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(223,179,87,.055) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse at 50% 45%,#000 25%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 45%,#000 25%,transparent 78%);
}
.gw-in{position:relative;z-index:2;width:100%;max-width:1120px;margin:0 auto;padding:0 16px}
.gw-logo{display:flex;align-items:center;gap:14px;justify-content:center;margin-bottom:26px}
.gw-logo .mark{
  width:50px;height:50px;border:1px solid var(--gold);display:grid;place-items:center;
  font-size:21px;color:var(--gold);transform:rotate(45deg);flex:none;
  box-shadow:0 0 26px rgba(223,179,87,.3) inset;
}
.gw-logo .mark span{transform:rotate(-45deg)}
.gw-logo h1{font-size:28px;font-weight:400;letter-spacing:7px;line-height:1.15}
.gw-logo small{display:block;font-size:10px;letter-spacing:5px;color:var(--gold-dim);margin-top:3px}
.gw-title{text-align:center;margin-bottom:8px}
.gw-title .kick{font-size:10px;letter-spacing:7px;color:var(--gold-dim);margin-bottom:12px}
.gw-title h2{font-size:22px;font-weight:400;letter-spacing:5px;margin-bottom:8px}
.gw-title p{font-size:12.5px;color:var(--txt2);letter-spacing:1px}
.gw-rule{width:120px;height:1px;margin:20px auto 30px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}

/* 网关的区服大卡片 */
.gw-list{display:grid;grid-template-columns:1fr;gap:14px}
.gw-card{
  position:relative;border:1px solid var(--line2);background:var(--panel);
  padding:20px 18px;cursor:pointer;transition:.3s;overflow:hidden;
  display:flex;align-items:center;gap:16px;
}
.gw-card::before{
  content:"";position:absolute;inset:0;opacity:0;transition:.3s;
  background:linear-gradient(100deg,rgba(223,179,87,.13),transparent 62%);
}
.gw-card:hover{border-color:var(--gold);transform:translateY(-3px)}
.gw-card:hover::before{opacity:1}
.gw-card.on{border-color:var(--gold);background:rgba(223,179,87,.09)}
.gw-card .ico{
  font-size:30px;flex:none;width:52px;height:52px;display:grid;place-items:center;
  border:1px solid var(--line2);background:rgba(0,0,0,.28);
}
.gw-card:hover .ico{border-color:var(--gold-dim)}
.gw-card .body{flex:1;min-width:0}
.gw-card .nm{
  font-size:19px;letter-spacing:4px;color:var(--gold2);margin-bottom:2px;
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
}
.gw-card .sb{font-size:12px;color:var(--txt2);letter-spacing:1px}
.gw-card .meta{
  display:flex;gap:18px;margin-top:10px;font-size:11.5px;color:var(--txt3);flex-wrap:wrap;
}
.gw-card .meta b{color:var(--txt);font-weight:500;font-family:Georgia,serif;font-size:13px}
.gw-card .go{flex:none}
.gw-card.locked{opacity:.6;cursor:not-allowed}
.gw-card.locked:hover{transform:none;border-color:var(--line2)}
.gw-card .lockmsg{font-size:11.5px;color:var(--warn);letter-spacing:1px}
.gw-hint{
  text-align:center;font-size:12px;color:var(--txt3);margin-top:26px;letter-spacing:1px;
  line-height:2;
}
.gw-hint b{color:var(--gold);font-weight:400}

/* 已选区后的「返回选区」按钮 */
.back-gw{
  display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--txt2);
  letter-spacing:1px;cursor:pointer;transition:.2s;padding:5px 0;
}
.back-gw:hover{color:var(--gold)}
.back-gw::before{content:"◀";font-size:10px}

/* ══════════════════════════════════════════════════════════
   游戏设置
   ══════════════════════════════════════════════════════════ */
.gs-group{margin-bottom:26px}
.gs-group:last-child{margin-bottom:0}
.gs-gt{
  display:flex;align-items:center;gap:10px;margin-bottom:12px;
  font-size:13.5px;letter-spacing:3px;color:var(--gold);
}
.gs-gt::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.gs-items{display:grid;grid-template-columns:1fr;gap:9px}
.gs-item{
  display:flex;align-items:flex-start;gap:12px;padding:12px 14px;
  border:1px solid var(--line2);background:rgba(255,255,255,.015);transition:.2s;
}
.gs-item:hover{border-color:var(--gold-dim);background:rgba(223,179,87,.04)}
.gs-item .ico{font-size:17px;flex:none;width:26px;text-align:center;line-height:1.5}
.gs-item .body{flex:1;min-width:0}
.gs-item .k{font-size:11.5px;color:var(--txt2);letter-spacing:1px;margin-bottom:2px}
.gs-item .v{font-size:14.5px;color:var(--gold2);letter-spacing:1px;word-break:break-word}
.gs-item .n{font-size:11.5px;color:var(--txt3);margin-top:4px;line-height:1.7}
.gs-item .scope{
  flex:none;font-size:10px;padding:1px 7px;border:1px solid var(--line);color:var(--txt3);
  align-self:center;
}
.gs-item .scope.server{border-color:var(--gold-dim);color:var(--gold)}

/* ══════════════════════════════════════════════════════════
   代理中心（agency-host 全屏遮罩层）
   ══════════════════════════════════════════════════════════ */
.agency-host{
  position:fixed;inset:0;z-index:600;display:none;
  background:rgba(0,0,0,.82);backdrop-filter:blur(4px);
  overflow-y:auto;padding:24px 16px;
}
.agency-host.open{display:block}
.agency-panel{
  position:relative;max-width:420px;margin:6vh auto 0;
  background:var(--panel);border:1px solid var(--line2);
  padding:28px 24px;border-radius:2px;
  box-shadow:0 20px 70px rgba(0,0,0,.7);
}
.agency-panel.wide{max-width:960px;margin:3vh auto;padding:24px 22px}
.agency-x{
  position:absolute;right:12px;top:8px;background:none;border:none;
  color:var(--txt2);font-size:24px;cursor:pointer;line-height:1;
}
.agency-x:hover{color:var(--gold)}
.agency-panel h3{font-size:19px;font-weight:400;letter-spacing:3px;color:var(--gold);margin-bottom:6px}
.agency-panel h5{
  font-size:14px;font-weight:400;letter-spacing:2px;color:var(--gold);
  margin:20px 0 10px;padding-bottom:8px;border-bottom:1px solid var(--line2);
}
.agency-sub{font-size:11.5px;color:var(--txt3);letter-spacing:.5px;margin-bottom:18px;line-height:1.7}
.agency-hd{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:14px;flex-wrap:wrap;padding-bottom:14px;
  border-bottom:1px solid var(--line2);margin-bottom:18px;
}
.agency-hd .agency-sub{margin-bottom:0}
.agency-tabs{display:flex;gap:6px;flex-wrap:wrap}
.agency-tabs button{
  background:none;border:1px solid var(--line2);color:var(--txt2);
  padding:6px 13px;font-size:12px;letter-spacing:1px;cursor:pointer;
}
.agency-tabs button.on{border-color:var(--gold);color:var(--gold);background:rgba(223,179,87,.1)}
.agency-field{margin-bottom:14px}
.agency-field label{display:block;font-size:11.5px;letter-spacing:1px;color:var(--txt2);margin-bottom:6px}
.agency-field input,.agency-field select{
  width:100%;background:rgba(0,0,0,.4);border:1px solid var(--line2);
  color:var(--txt);padding:10px 12px;font-size:14px;letter-spacing:1px;
  font-family:inherit;
}
.agency-field input:focus,.agency-field select:focus{border-color:var(--gold);outline:none}
.agency-field input::placeholder{color:var(--txt3)}
.agency-err{
  min-height:18px;font-size:12px;color:var(--bad);letter-spacing:.5px;margin-bottom:10px;
}
.agency-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:6px}
.agency-stat{
  border:1px solid var(--line2);background:rgba(0,0,0,.28);padding:14px 12px;text-align:center;
}
.agency-stat .n{font-family:Georgia,serif;font-size:20px;color:var(--gold);margin-bottom:4px}
.agency-stat .l{font-size:11px;color:var(--txt3);letter-spacing:.5px}
.agency-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.agency-row > *{flex:1;min-width:150px}
.agency-note{
  font-size:12px;color:var(--txt2);letter-spacing:.5px;
  border:1px solid var(--line2);border-left:2px solid var(--gold);
  padding:10px 12px;margin-bottom:14px;
}
.agency-note b{color:var(--gold);font-weight:400}
.agency-table{width:100%;border-collapse:collapse;font-size:12.5px;margin-bottom:14px}
.agency-table th{
  text-align:left;font-weight:400;color:var(--gold-dim);font-size:11px;
  letter-spacing:1px;padding:8px 8px;border-bottom:1px solid var(--line2);
  white-space:nowrap;
}
.agency-table td{padding:9px 8px;border-bottom:1px solid rgba(255,255,255,.04);color:var(--txt)}
.agency-table td.num{font-family:Georgia,serif;color:var(--gold);white-space:nowrap}
.agency-table tr:hover td{background:rgba(223,179,87,.05)}
.agency-tag{
  display:inline-block;border:1px solid var(--gold-dim);color:var(--gold);
  font-size:10px;letter-spacing:1px;padding:1px 6px;margin-left:6px;
}
.agency-code{
  font-family:Consolas,Menlo,monospace;letter-spacing:2px;color:var(--gold2);
}
@media (max-width:720px){
  .agency-stats{grid-template-columns:repeat(2,1fr)}
  .agency-panel{max-width:none;margin:0}
  .agency-panel.wide{margin:0;padding:18px 14px}
  .agency-host{padding:12px 10px}
  .agency-table{font-size:11.5px}
  .agency-table th,.agency-table td{padding:7px 5px}
}

/* ══════════════════════════════════════════════════════════
   M6：转盘 / 积分商城 / 任务
   ══════════════════════════════════════════════════════════ */

/* 转盘卡片网格 */
.lot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.lot-card{
  background:var(--panel);border:1px solid var(--line2);padding:20px 18px;border-radius:2px;
}
.lot-hd{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.lot-hd .ico{font-size:26px}
.lot-hd b{font-size:16px;color:var(--gold);letter-spacing:2px;font-weight:400}
.lot-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--txt2);margin-bottom:14px}
.lot-meta b{color:var(--gold)}
.lot-prizes{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.lot-prize{
  display:flex;align-items:center;gap:6px;padding:7px 10px;
  border:1px solid var(--line2);background:rgba(255,255,255,.02);font-size:12px;
}
.lot-prize.grand{border-color:var(--gold);background:rgba(223,179,87,.08)}
.lot-prize .pi{font-size:16px}
.lot-prize .pn{color:var(--txt)}
.lot-prize .pw{color:var(--txt3);font-size:11px}

/* 积分头（余额大字） */
.pts-head{
  padding:16px 18px;margin-bottom:16px;border:1px solid var(--line2);
  background:rgba(223,179,87,.06);
}
.pts-bal small{display:block;font-size:11px;letter-spacing:2px;color:var(--txt3);margin-bottom:4px}
.pts-bal b{font-size:32px;color:var(--gold);font-weight:700;line-height:1.1}
.pts-sub{display:flex;gap:18px;margin-top:8px;font-size:12px;color:var(--txt2)}

/* 通用表格（积分流水 / 抽奖记录 / 兑换记录） */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;font-size:12.5px;min-width:460px}
.tbl th,.tbl td{padding:9px 8px;border-bottom:1px solid var(--line2);text-align:left;white-space:nowrap}
.tbl th{color:var(--gold);font-weight:400;letter-spacing:1px;font-size:11.5px}
.tbl td{color:var(--txt2)}
.tbl tbody tr:hover td{background:rgba(255,255,255,.02)}

/* 任务列表 */
.quest-list{display:flex;flex-direction:column;gap:10px}
.quest{
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  border:1px solid var(--line2);background:rgba(255,255,255,.02);
}
.quest .qi{font-size:22px;flex:0 0 auto}
.quest .qt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.quest .qt b{font-size:14px;color:var(--txt);font-weight:500}
.quest .qt small{font-size:11.5px;color:var(--txt3);line-height:1.5}
.quest .qt em{font-style:normal;font-size:11px;color:var(--gold);letter-spacing:1px}
.quest .qp{font-size:14px;color:var(--gold);font-weight:700;flex:0 0 auto}
.quest .qb{
  flex:0 0 auto;min-width:64px;padding:7px 12px;font-size:12px;letter-spacing:1px;
  background:transparent;border:1px solid var(--line2);color:var(--txt3);cursor:default;
}
.quest.ready .qb{border-color:var(--gold);color:var(--gold);background:rgba(223,179,87,.1);cursor:pointer}
.quest.ready .qb:hover{background:rgba(223,179,87,.2)}
.quest.ready{border-color:rgba(223,179,87,.4)}
.quest.claimed{opacity:.55}
.quest.claimed .qb{border-color:transparent}

@media (max-width:720px){
  .lot-grid{grid-template-columns:1fr}
  .pts-bal b{font-size:26px}
  .quest{flex-wrap:wrap;gap:8px}
  .quest .qt{flex:1 1 100%;order:2}
  .quest .qp{order:1}
  .quest .qb{order:1}
}

/* Toast */
.toast{
  position:fixed;left:50%;top:76px;transform:translate(-50%,-14px);
  z-index:500;padding:10px 20px;background:rgba(18,15,11,.96);
  border:1px solid var(--gold);color:var(--gold);font-size:13px;
  letter-spacing:1px;opacity:0;pointer-events:none;transition:.25s;
  max-width:calc(100vw - 32px);text-align:center;
}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ══════════════════════════════════════════════════════════
   小屏手机 ≤ 480px
   移动端优先：基础样式就是手机样式，这里只做更窄的收紧
   ══════════════════════════════════════════════════════════ */
@media (max-width:480px){
  .wrap{padding:0 14px}
  .sec{padding:40px 0}
  .sec-hd h3{font-size:24px;letter-spacing:6px}
  .sec-hd p{font-size:12px}
  .hero{min-height:420px}
  .hero h2{font-size:40px;letter-spacing:10px}
  .hero-tag{font-size:12px;letter-spacing:2px}
  .hero-cta{flex-direction:column;gap:10px}
  .hero-cta .btn{width:100%}

  /* 选区网关：手机上标题与卡片都要更紧凑 */
  .gw{padding:24px 0 calc(24px + var(--safe-b))}
  .gw-logo{margin-bottom:18px;gap:11px}
  .gw-logo .mark{width:40px;height:40px;font-size:17px}
  .gw-logo h1{font-size:21px;letter-spacing:5px}
  .gw-logo small{font-size:9px;letter-spacing:3px}
  .gw-title .kick{font-size:9px;letter-spacing:5px;margin-bottom:9px}
  .gw-title h2{font-size:17px;letter-spacing:3px}
  .gw-title p{font-size:11.5px}
  .gw-rule{margin:15px auto 20px}
  .gw-card{padding:15px 13px;gap:11px}
  .gw-card .ico{width:42px;height:42px;font-size:22px}
  .gw-card .nm{font-size:16px;letter-spacing:2px}
  .gw-card .meta{gap:12px;margin-top:7px}
  .gw-card .meta b{font-size:12px}
  .gw-hint{font-size:11px;margin-top:18px}

  /* 游戏设置：单列，图标与文字更紧凑 */
  .gs-gt{font-size:12px;letter-spacing:2px}
  .gs-item{padding:10px 11px;gap:9px}
  .gs-item .v{font-size:13.5px}
  .gs-item .k{font-size:11px}
  .gs-item .n{font-size:11px}

  .btn{padding:9px 16px;font-size:12.5px}
  .tb-in{height:56px;gap:12px}
  .logo .mark{width:30px;height:30px;font-size:14px}
  .logo h1{font-size:16px;letter-spacing:3px}
  .logo small{font-size:8px;letter-spacing:2px}
  .grid{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════
   平板 ≥ 768px
   ══════════════════════════════════════════════════════════ */
@media (min-width:768px){
  .wrap{padding:0 24px}
  .sec{padding:56px 0}
  .sec-hd h3{font-size:30px;letter-spacing:8px}
  .hero{min-height:560px}
  .hero h2{font-size:60px;letter-spacing:14px}
  .hero-tag{font-size:14px;letter-spacing:4px}
  .hero-kicker{font-size:11px;letter-spacing:9px}
  .grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .tb-in{height:70px;gap:30px}
  .logo .mark{width:38px;height:38px;font-size:17px}
  .logo h1{font-size:19px;letter-spacing:3px}
  .logo small{font-size:9px;letter-spacing:4px}
  .serverbar{top:70px}
  .sb-in{height:52px}
  .sb-cur b{font-size:15px;letter-spacing:2px}
  .tb-user{display:flex}
  .sel-grid{grid-template-columns:repeat(2,1fr)}
  .ft-grid{grid-template-columns:repeat(2,1fr)}
  .rank-item{grid-template-columns:52px 1fr 120px;padding:13px 18px}
  .news-item{padding:13px 20px}
  .news-item .dt{width:96px}
  /* 网关：平板 2 列 */
  .gw-list{grid-template-columns:repeat(2,1fr);gap:14px}
  .gw-logo h1{font-size:34px;letter-spacing:9px}
  .gw-logo .mark{width:58px;height:58px;font-size:24px}
  .gw-title h2{font-size:26px}
  .gs-items{grid-template-columns:repeat(2,1fr)}
}

/* ══════════════════════════════════════════════════════════
   桌面 ≥ 1024px
   ══════════════════════════════════════════════════════════ */
@media (min-width:1024px){
  .nav{display:flex;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a{
    padding:11px 20px;font-size:16px;letter-spacing:2.5px;color:var(--txt2);
    border-bottom:2px solid transparent;transition:.25s;font-weight:500;white-space:nowrap;
    flex:none;
  }
  .nav a:hover{color:var(--gold)}
  .nav a.on{color:var(--gold);border-bottom-color:var(--gold);background:linear-gradient(180deg,transparent,rgba(223,179,87,.1))}
  .nav-toggle{display:none}
  .drawer{display:none !important}
  .grid{grid-template-columns:repeat(3,1fr);gap:18px}
  .hero{min-height:660px}
  .hero h2{font-size:76px;letter-spacing:18px}
  .ft-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}
  .sel-grid{grid-template-columns:repeat(3,1fr)}
  .sec{padding:66px 0}
  /* 网关：桌面单列大卡片（信息更完整，横排展示） */
  .gw-list{grid-template-columns:1fr;gap:16px;max-width:820px;margin:0 auto}
  .gw-card{padding:24px 26px;gap:20px}
  .gw-card .ico{width:62px;height:62px;font-size:34px}
  .gw-card .nm{font-size:22px}
  .gs-items{grid-template-columns:repeat(2,1fr)}
}
/* 窄一点的桌面：导航项收紧，保证 8 项都放得下 */
@media (min-width:1024px) and (max-width:1279px){
  .nav a{padding:10px 13px;font-size:15px;letter-spacing:1.5px}
  .sb-tools .tb-search input{width:120px}
  .sb-tools .tb-search input:focus{width:150px}
}

/* ══════════════════════════════════════════════════════════
   宽屏 ≥ 1280px
   ══════════════════════════════════════════════════════════ */
@media (min-width:1280px){
  .grid{grid-template-columns:repeat(4,1fr)}
}

/* ══════════════════════════════════════════════════════════
   超宽屏留白 —— 大屏上内容不能无限拉宽
   ══════════════════════════════════════════════════════════ */
@media (min-width:1700px){
  .wrap{padding:0 40px}
}

/* ══════════════════════════════════════════════════════════
   横屏手机 —— 高度很矮时压缩主视觉
   ══════════════════════════════════════════════════════════ */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:300px}
  .hero-in{padding:28px 16px}
  .hero h2{font-size:30px}
  .hero-tag{margin-bottom:18px}
}

/* ══════════════════════════════════════════════════════════
   降低动效（尊重系统设置）
   ══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

/* ══════════════════════════════════════════════════════════
   打印
   ══════════════════════════════════════════════════════════ */
@media print{
  .topbar,.serverbar,.fab,.fab-panel,.ticker{display:none !important}
  body{background:#fff;color:#000}
}