/* 万象棋大数据 — 站点通用样式（datatft 风格：深蓝底 / 清爽卡片 / 精细导航） */
:root{
  --bg:#080b12; --bg2:#0e131e; --panel:#131a28; --bg3:#1a2233;
  --card:#141b2a; --card2:#1c2638;
  --line:#222c41; --line2:#33415c;
  --txt:#eef1f8; --txt2:#9aa7bf; --muted:#69748d;
  --gold:#f1c44e; --gold2:#d49a30;
  --blue:#5b8cff; --red:#ef5a5a; --green:#54d98a; --purple:#b072f0; --orange:#f5a623;
  --q1:#8b95a8; --q2:#54d98a; --q3:#5b8cff; --q4:#b072f0; --q5:#f5a623; --q6:#ef5a5a;
  --radius:14px; --radius-lg:18px;
  --shadow:0 14px 38px rgba(0,0,0,.52);
  --shadow-sm:0 6px 18px rgba(0,0,0,.38);
  --ring:0 0 0 1px rgba(241,196,78,.16);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--txt);
  font-family:"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}
body{
  background:
    radial-gradient(1200px 620px at 10% -12%,rgba(241,196,78,.07),transparent 55%),
    radial-gradient(1000px 520px at 102% -4%,rgba(91,140,255,.07),transparent 55%),
    var(--bg);
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:6px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}

/* ============ 顶栏（精细导航） ============ */
.topbar{position:sticky;top:0;z-index:100;overflow:hidden;
  background:rgba(10,13,20,.82);backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid rgba(241,196,78,.16);
  box-shadow:0 6px 22px rgba(0,0,0,.42)}
.topbar-bg{position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(241,196,78,.55),transparent)}
.topbar-in{position:relative;z-index:1;max-width:1320px;margin:0 auto;padding:0 22px;
  height:60px;display:flex;align-items:center;gap:22px}
.logo{display:flex;align-items:center;gap:11px;white-space:nowrap}
.logo-mark{width:34px;height:34px;border-radius:10px;flex:0 0 auto;object-fit:cover;
  box-shadow:0 0 0 1px rgba(241,196,78,.4),0 4px 12px rgba(241,196,78,.22)}
.logo-tx{display:flex;flex-direction:column;line-height:1.18}
.logo-name{font-size:17px;font-weight:800;letter-spacing:.4px}
.logo-name b{color:var(--gold)}
.logo-tag{font-size:10.5px;color:var(--txt2);margin-top:1px;letter-spacing:.3px}
.ver-tag{font-size:10.5px;color:#1a1206;background:linear-gradient(135deg,var(--gold),var(--gold2));
  padding:2px 9px;border-radius:20px;font-weight:700;letter-spacing:.5px}
.nav{display:flex;gap:4px;flex:1;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{padding:8px 17px;border-radius:10px;color:var(--txt2);font-size:14.5px;
  font-weight:600;white-space:nowrap;transition:.16s}
.nav a:hover{background:rgba(255,255,255,.05);color:var(--txt)}
.nav a.on{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1a1206;
  font-weight:800;box-shadow:0 4px 14px rgba(241,196,78,.32)}
.topbar-right{display:flex;align-items:center;gap:10px;white-space:nowrap}
.btn-mini{padding:7px 15px;border-radius:10px;background:var(--card2);
  border:1px solid var(--line2);color:var(--txt2);font-size:12.5px;cursor:pointer;transition:.16s}
.btn-mini:hover{border-color:var(--gold2);color:var(--gold);background:var(--card)}

/* ============ 布局 ============ */
.wrap{max-width:1320px;margin:0 auto;padding:30px 22px 64px}
.page-head{margin-bottom:22px}
.page-head h1{font-size:25px;font-weight:800;letter-spacing:.5px;
  display:flex;align-items:center;gap:11px}
.page-head h1::before{content:"";width:4px;height:23px;border-radius:3px;
  background:linear-gradient(180deg,var(--gold),var(--gold2))}
.page-head p{color:var(--muted);font-size:13px;margin-top:8px;max-width:760px}
.lead{color:var(--txt2);font-size:14px;line-height:1.85;margin:0 0 28px;
  padding:16px 18px;background:rgba(255,255,255,.025);border:1px solid var(--line);
  border-left:3px solid var(--gold);border-radius:12px}
.lead strong{color:var(--txt);font-weight:700}
.sec{margin-bottom:36px}
.sec-head{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:15px;gap:12px;flex-wrap:wrap}
.sec-head h2{font-size:18px;font-weight:700;display:flex;align-items:center;gap:9px}
.sec-head h2::before{content:"";width:3px;height:17px;border-radius:2px;background:var(--gold)}
.sec-head .more{font-size:12.5px;color:var(--muted)}
.sec-head .more:hover{color:var(--gold)}

/* ============ 磁贴（首页功能入口） ============ */
.tiles{display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 14px;text-align:center;transition:.2s;position:relative;overflow:hidden}
.tile::after{content:"";position:absolute;inset:0;border-radius:var(--radius);
  background:linear-gradient(180deg,transparent,rgba(241,196,78,.05));opacity:0;transition:.2s}
.tile:hover{transform:translateY(-4px);border-color:var(--gold2);box-shadow:var(--shadow-sm)}
.tile:hover::after{opacity:1}
.tile-ico{width:50px;height:50px;margin:0 auto 12px;border-radius:14px;
  display:grid;place-items:center;font-size:24px;
  background:linear-gradient(135deg,var(--card2),#0f1420);border:1px solid var(--line2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.tile-t{font-size:15px;font-weight:700}
.tile-d{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.5}
.tile .badge{position:absolute;top:9px;right:9px;font-size:10px;padding:2px 7px;
  border-radius:20px;font-weight:700;z-index:2}
.badge-new{background:rgba(84,217,138,.15);color:var(--green);border:1px solid rgba(84,217,138,.32)}
.badge-hot{background:rgba(239,90,90,.15);color:var(--red);border:1px solid rgba(239,90,90,.32)}
.badge-soon{background:rgba(105,116,141,.15);color:var(--muted);border:1px solid var(--line2)}

/* ============ Hero 检索区 ============ */
.hero{background:
    radial-gradient(820px 280px at 50% -90px,rgba(241,196,78,.1),transparent 70%),
    linear-gradient(180deg,var(--bg2),var(--bg));
  border-bottom:1px solid var(--line);padding:48px 22px 40px;text-align:center}
.hero h1{font-size:32px;font-weight:900;letter-spacing:2px}
.hero h1 span{color:var(--gold)}
.hero .sub{color:var(--txt2);font-size:14px;margin-top:10px}
.searchbox{max-width:580px;margin:24px auto 0;position:relative}
.searchbox input{width:100%;padding:14px 18px 14px 44px;border-radius:14px;
  background:var(--card);border:1px solid var(--line2);outline:none;font-size:14px;
  box-shadow:var(--shadow-sm)}
.searchbox input:focus{border-color:var(--gold2);box-shadow:0 0 0 4px rgba(241,196,78,.1)}
.searchbox .ico{position:absolute;left:16px;top:13px;color:var(--muted);font-size:16px}
.sug{position:absolute;left:0;right:0;top:calc(100% + 8px);background:var(--card);
  border:1px solid var(--line2);border-radius:12px;box-shadow:var(--shadow);
  max-height:340px;overflow-y:auto;z-index:60;display:none;text-align:left}
.sug.show{display:block}
.sug-item{display:flex;align-items:center;gap:10px;padding:9px 13px;cursor:pointer}
.sug-item:hover{background:var(--card2)}
.sug-item img{width:34px;height:34px;border-radius:8px;object-fit:cover}
.sug-item .n{font-size:13.5px;font-weight:600}
.sug-item .m{font-size:11.5px;color:var(--muted)}
.sug-empty{padding:14px;text-align:center;color:var(--muted);font-size:12.5px}
.audience{display:flex;gap:8px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.audience a{padding:7px 16px;border-radius:20px;background:var(--card);
  border:1px solid var(--line);font-size:12.5px;color:var(--txt2)}
.audience a:hover{border-color:var(--gold2);color:var(--gold)}

/* ============ 统计条 ============ */
.stats{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;transition:.18s}
.stat:hover{border-color:var(--line2);transform:translateY(-2px)}
.stat .v{font-size:26px;font-weight:800;color:var(--gold);line-height:1.2}
.stat .k{font-size:12px;color:var(--muted);margin-top:4px}

/* ============ 筛选栏 ============ */
.filters{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;margin-bottom:18px;display:flex;flex-direction:column;gap:12px}
.frow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.frow>label{font-size:12.5px;color:var(--muted);min-width:46px;flex:0 0 auto}
.chip{padding:6px 14px;border-radius:10px;background:var(--card2);
  border:1px solid var(--line);font-size:12.5px;cursor:pointer;color:var(--txt2);
  transition:.15s;user-select:none}
.chip:hover{border-color:var(--line2);color:var(--txt)}
.chip.on{background:rgba(241,196,78,.14);border-color:var(--gold2);color:var(--gold);font-weight:700}
.finput{flex:1;min-width:180px;padding:8px 13px;border-radius:10px;background:var(--bg2);
  border:1px solid var(--line);outline:none;font-size:13px}
.finput:focus{border-color:var(--gold2)}
.fcount{font-size:12.5px;color:var(--muted);white-space:nowrap}

/* ============ 卡牌网格 ============ */
.grid{display:grid;gap:14px}
.grid-hero{grid-template-columns:repeat(auto-fill,minmax(124px,1fr))}
.grid-item{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.gcard{background:var(--card);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;cursor:pointer;transition:.2s;position:relative;
  box-shadow:var(--shadow-sm)}
.gcard:hover{border-color:var(--gold2);transform:translateY(-4px);
  box-shadow:var(--shadow)}
.gcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--qcol,var(--gold));z-index:4}
.gcard .thumb{width:100%;object-fit:cover;background:var(--bg2);
  transition:transform .35s ease;display:block}
.gcard .thumb.hero{aspect-ratio:1/1;object-position:center}
.gcard .thumb.item{aspect-ratio:1/1}
.gcard:hover .thumb{transform:scale(1.06)}
img.lazy{opacity:0}
img.lazy[src]:not([data-src]){opacity:1}
.gcard .nm{padding:8px 6px 9px;text-align:center;font-size:12.5px;font-weight:700;
  color:var(--txt);letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qtag{position:absolute;top:8px;left:8px;font-size:10px;font-weight:800;
  padding:2px 7px;border-radius:6px;background:rgba(6,9,14,.72);backdrop-filter:blur(3px);
  z-index:3;display:inline-flex;align-items:center;gap:4px;line-height:1.3}
.qtag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.camptag{position:absolute;top:8px;right:8px;font-size:9.5px;font-weight:700;
  padding:2px 7px;border-radius:6px;background:rgba(6,9,14,.72);backdrop-filter:blur(3px);
  z-index:3;line-height:1.3;max-width:calc(100% - 72px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qbar{display:none}
.q1{color:var(--q1)}.q2{color:var(--q2)}.q3{color:var(--q3)}
.q4{color:var(--q4)}.q5{color:var(--q5)}.q6{color:var(--q6)}
.bg-q1{background:var(--q1)}.bg-q2{background:var(--q2)}.bg-q3{background:var(--q3)}
.bg-q4{background:var(--q4)}.bg-q5{background:var(--q5)}.bg-q6{background:var(--q6)}
.gcard.dim{opacity:.26;filter:grayscale(1)}

/* ============ 弹窗 ============ */
.mask{position:fixed;inset:0;background:rgba(4,6,11,.72);backdrop-filter:blur(4px);
  z-index:200;display:none;align-items:center;justify-content:center;padding:20px}
.mask.show{display:flex}
.modal{background:var(--card);border:1px solid var(--line2);border-radius:18px;
  max-width:580px;width:100%;max-height:88vh;overflow-y:auto;box-shadow:var(--shadow)}
.modal-hd{display:flex;gap:15px;padding:20px;border-bottom:1px solid var(--line);
  position:relative}
.modal-hd img{width:82px;height:82px;border-radius:12px;object-fit:cover;
  border:1px solid var(--line2);flex:0 0 auto;background:var(--bg2)}
.modal-hd .t{font-size:21px;font-weight:800}
.modal-hd .meta{display:flex;gap:7px;margin-top:8px;flex-wrap:wrap}
.mtag{font-size:11.5px;padding:3px 10px;border-radius:20px;background:var(--card2);
  border:1px solid var(--line);color:var(--txt2)}
.modal-x{position:absolute;top:14px;right:16px;font-size:22px;color:var(--muted);
  cursor:pointer;line-height:1;padding:2px 7px;border-radius:8px;transition:.15s}
.modal-x:hover{color:var(--txt);background:var(--card2)}
.modal-bd{padding:20px}
.props{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));
  gap:10px;margin-bottom:18px}
.prop{background:var(--bg2);border:1px solid var(--line);border-radius:10px;
  padding:10px;text-align:center}
.prop .v{font-size:17px;font-weight:800;color:var(--gold)}
.prop .k{font-size:11px;color:var(--muted);margin-top:2px}
.blk{margin-bottom:16px}
.blk-t{font-size:13px;font-weight:700;color:var(--gold);margin-bottom:8px;
  display:flex;align-items:center;gap:6px}
.blk-t::before{content:"";width:3px;height:13px;background:var(--gold);border-radius:2px}
.blk p{font-size:13px;color:var(--txt2);line-height:1.75}
.skill{background:var(--bg2);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;margin-bottom:9px}
.skill .sn{font-size:13.5px;font-weight:700;margin-bottom:4px}
.skill .sd{font-size:12.5px;color:var(--txt2);line-height:1.7}
.kws{display:flex;gap:6px;flex-wrap:wrap}
.kw{font-size:11.5px;padding:3px 10px;border-radius:20px;
  background:rgba(91,140,255,.12);border:1px solid rgba(91,140,255,.28);color:var(--blue)}

/* ============ 表格 ============ */
.tbl{width:100%;border-collapse:collapse;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.tbl th{background:var(--card2);padding:12px 14px;text-align:left;font-size:12.5px;
  color:var(--txt2);font-weight:700;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr:hover{background:var(--card2)}

/* ============ 阵容卡 ============ */
.lineups{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
.lcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:.18s;cursor:pointer}
.lcard:hover{border-color:var(--gold2);transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.lcard-hd{padding:14px 16px;display:flex;align-items:center;gap:11px;
  border-bottom:1px solid var(--line)}
.tier{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  font-weight:900;font-size:15px;flex:0 0 auto;color:#0c0e14}
.tier-T0{background:linear-gradient(135deg,#ff6b6b,#c92a2a)}
.tier-T1{background:linear-gradient(135deg,#f5a623,#c26f00)}
.tier-T2{background:linear-gradient(135deg,#b072f0,#7028c0)}
.tier-T3{background:linear-gradient(135deg,#5b8cff,#1c6bcc)}
.lcard-hd .ln{font-size:15px;font-weight:700}
.lcard-hd .lm{font-size:11.5px;color:var(--muted);margin-top:2px}
.lcard-bd{padding:13px 16px 15px}
.lheroes{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.lheroes img{width:42px;height:42px;border-radius:8px;object-fit:cover;
  border:1.5px solid var(--line2)}
.ltxt{font-size:12.5px;color:var(--txt2);line-height:1.65}
.lcamps{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}

/* ============ 通用 ============ */
.empty{text-align:center;padding:54px 20px;color:var(--muted);font-size:13.5px}
.note{background:rgba(241,196,78,.07);border:1px solid rgba(241,196,78,.22);
  border-left:3px solid var(--gold);border-radius:10px;padding:13px 16px;
  font-size:12.5px;color:var(--txt2);line-height:1.7;margin-bottom:18px}
.note b{color:var(--gold)}
.btn{padding:10px 20px;border-radius:10px;border:1px solid var(--line2);
  background:var(--card2);cursor:pointer;font-size:13.5px;font-weight:600;transition:.16s}
.btn:hover{border-color:var(--gold2);color:var(--gold)}
.btn-p{background:linear-gradient(135deg,var(--gold),var(--gold2));
  border-color:var(--gold2);color:#1a1206;font-weight:800}
.btn-p:hover{color:#1a1206;filter:brightness(1.07)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;
  overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:11px 20px;font-size:14px;font-weight:600;color:var(--muted);
  cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;transition:.16s}
.tab:hover{color:var(--txt2)}
.tab.on{color:var(--gold);border-bottom-color:var(--gold)}

/* ============ 页脚 ============ */
.footer{border-top:1px solid var(--line);background:rgba(10,13,20,.6);padding:32px 22px;
  margin-top:48px;backdrop-filter:blur(6px)}
.footer-in{max-width:1320px;margin:0 auto;display:flex;gap:36px;flex-wrap:wrap}
.fcol h4{font-size:13px;color:var(--txt);margin-bottom:10px}
.fcol a,.fcol p{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px;
  transition:.15s}
.fcol a:hover{color:var(--gold)}
.copy{max-width:1320px;margin:0 auto;font-size:12px;color:var(--muted);
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 18px;text-align:center}

@media(max-width:768px){
  .hero h1{font-size:24px}
  .wrap{padding:22px 14px 48px}
  .topbar-in{padding:0 14px;gap:12px;height:56px}
  .logo-tag{display:none}
  .logo-mark{width:30px;height:30px;font-size:16px}
  .nav{gap:3px}
  .nav a{padding:7px 12px;font-size:13.5px;border-radius:9px}
  .tiles{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
  .tile{padding:16px 10px}
  .tile-ico{width:42px;height:42px;font-size:20px}
  .grid-hero{grid-template-columns:repeat(auto-fill,minmax(98px,1fr))}
  .grid-item{grid-template-columns:repeat(auto-fill,minmax(82px,1fr))}
  .modal-hd img{width:64px;height:64px}
}

/* ============ 玩法教程页（play.html） ============ */
.rules{list-style:none;padding:0;margin:0 0 4px}
.rules li{position:relative;padding:10px 0 10px 22px;border-bottom:1px dashed var(--line);font-size:13.5px;color:var(--txt2);line-height:1.7}
.rules li:before{content:"";position:absolute;left:4px;top:18px;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.rules li b{color:var(--gold)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:6px 0 12px}
.step{background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:16px}
.st-n{font-size:14px;font-weight:700;color:var(--gold);margin-bottom:8px}
.st-d{font-size:13px;color:var(--txt2);line-height:1.65}
.tip{font-size:13px;color:var(--muted);line-height:1.7;margin:10px 0 0}
.tip a,.rules a{color:var(--gold);text-decoration:none}
.tip a:hover,.rules a:hover{text-decoration:underline}
.players{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:10px}
.pcard-p{background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:14px}
.pc-pname{font-size:15px;font-weight:700;color:var(--txt);margin-bottom:8px}
.pc-pskill{font-size:12.5px;color:var(--txt2);line-height:1.6;margin-bottom:6px}
.pc-pskill b{color:var(--gold)}
@media(max-width:768px){ .steps{grid-template-columns:1fr} }