/* ============================================================
   至尊棋牌2026 · 共享样式表  /assets/site.css
   深夜牌桌：绒面深墨绿底 + 鎏金强调 + 等宽数字秩序感
   ============================================================ */

/* ---------- 1. 变量 ---------- */
:root{
  --felt:#0B1F1A;
  --ink:#14161A;
  --table:#12332A;
  --edge:#2A2F35;
  --gold:#C9A227;
  --gold-lit:#E8C86A;
  --red:#B7362F;
  --ivory:#F2EDE3;
  --slate:#8F9AA3;
  --glass:rgba(242,237,227,0.08);
  --glass-line:rgba(242,237,227,0.16);
  --rail-w:236px;
  --top-h:44px;
  --r:3px;
  --pad-x:clamp(20px,4vw,56px);
  --font-body:"Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --font-display:"Oswald","Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"PingFang SC",monospace;
}

/* ---------- 2. 重置 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  padding:var(--top-h) 0 0 var(--rail-w);
  background:var(--felt);
  color:var(--ivory);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    repeating-linear-gradient(118deg,rgba(242,237,227,.024) 0 1px,transparent 1px 8px),
    radial-gradient(120% 76% at 14% -6%,rgba(18,51,42,.9) 0%,rgba(11,31,26,0) 62%);
}
img,svg,video{display:block;max-width:100%}
body.is-locked{overflow:hidden}

/* ---------- 3. 中文排版与元素 ---------- */
h1,h2,h3,h4,h5{
  margin:0 0 .5em;
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.15;
  color:var(--ivory);
}
h1{font-size:clamp(34px,5.2vw,64px)}
h2{font-size:clamp(24px,3vw,34px)}
h3{font-size:clamp(19px,2vw,22px)}
h4{font-size:17px}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.2em}
a{color:var(--gold-lit);text-decoration:none;transition:color .2s ease}
a:hover{color:#fff}
strong,b{font-weight:700}
hr{border:0}
::selection{background:var(--gold);color:#101208}
:focus-visible{outline:2px solid var(--gold-lit);outline-offset:3px;border-radius:2px}
.mono,.num,time,code,.rail__idx,.footer__meta{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}
.num{font-weight:700}

/* ---------- 4. 跳转链接 ---------- */
.skip-link{
  position:fixed;
  top:-64px;
  left:16px;
  z-index:200;
  padding:10px 16px;
  background:var(--gold);
  color:#101208;
  font-weight:700;
  font-size:14px;
  letter-spacing:.04em;
  border-radius:2px;
  transition:top .2s ease;
}
.skip-link:focus{top:8px;color:#101208}

/* ---------- 5. 头部外壳 ---------- */
.site-header{position:relative;z-index:80}

/* 5.1 顶部窄带 */
.topbar{
  position:fixed;
  top:0;left:0;right:0;
  height:var(--top-h);
  z-index:70;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:0 20px;
  background:linear-gradient(180deg,#0d241e,#0a1a15);
  border-bottom:1px solid var(--edge);
  font-size:12px;
  color:var(--slate);
}
.topbar__left,.topbar__right{margin:0;display:flex;align-items:center;gap:12px}
.topbar__right{letter-spacing:.06em}
.topbar__chip{
  display:inline-block;
  padding:2px 8px;
  border:1px solid rgba(201,162,39,.4);
  border-radius:2px;
  color:var(--gold-lit);
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
}
.topbar__text{letter-spacing:.1em}

/* 5.2 品牌条（移动端） */
.brand-bar{
  display:none;
  align-items:center;
  gap:9px;
  text-decoration:none;
  color:var(--ivory);
}
.brand-bar__mark{
  width:26px;height:26px;
  display:grid;place-items:center;
  border:1px solid var(--gold);
  color:var(--gold);
  font-size:13px;
  font-weight:800;
  border-radius:2px;
}
.brand-bar__text{
  font-family:var(--font-display);
  font-weight:800;
  font-size:16px;
  letter-spacing:-.01em;
}

/* 5.3 汉堡按钮 */
.nav-toggle{
  display:none;
  padding:0;
  width:40px;height:40px;
  place-items:center;
  background:rgba(20,22,26,.7);
  border:1px solid var(--edge);
  border-radius:2px;
  cursor:pointer;
  color:var(--ivory);
}
.nav-toggle__bars{display:block;width:18px}
.nav-toggle__bars i{
  display:block;
  height:2px;
  margin:3px 0;
  background:var(--ivory);
  transition:transform .25s ease,opacity .2s ease;
}
.nav-toggle[aria-expanded="true"]{border-color:rgba(201,162,39,.6)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1){transform:translateY(5px) rotate(45deg);background:var(--gold-lit)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3){transform:translateY(-5px) rotate(-45deg);background:var(--gold-lit)}

/* 5.4 下载定位按钮（移动端） */
.download-pin{
  display:none;
  place-items:center;
  width:40px;height:40px;
  background:linear-gradient(180deg,var(--gold-lit),var(--gold));
  color:#16130a;
  border-radius:2px;
  font-weight:800;
  text-decoration:none;
  box-shadow:0 8px 20px rgba(201,162,39,.22);
}
.download-pin:hover{color:#16130a}
.download-pin__glyph{font-size:18px;line-height:1}

/* 5.5 左侧导航轨道 */
.rail{
  position:fixed;
  top:var(--top-h);
  left:0;
  bottom:0;
  z-index:100;
  width:var(--rail-w);
  display:flex;
  flex-direction:column;
  gap:20px;
  padding:26px 18px 22px;
  overflow-y:auto;
  background:
    linear-gradient(180deg,#0c221c 0%,#0a1a15 62%,#0b1f1a 100%);
  border-right:1px solid var(--edge);
}
.rail::after{
  content:"";
  position:absolute;
  top:0;right:-1px;bottom:0;
  width:1px;
  background:linear-gradient(180deg,rgba(201,162,39,.55),rgba(201,162,39,0) 45%,rgba(201,162,39,.25));
}
.rail__brand{
  display:flex;
  flex-direction:column;
  gap:3px;
  text-decoration:none;
  color:var(--ivory);
}
.rail__mark{
  width:36px;height:36px;
  display:grid;place-items:center;
  border:1px solid var(--gold);
  border-radius:2px;
  color:var(--gold);
  font-family:var(--font-display);
  font-weight:800;
  font-size:18px;
}
.rail__name{
  margin-top:8px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:19px;
  letter-spacing:-.01em;
}
.rail__sub{
  font-size:11px;
  letter-spacing:.14em;
  color:var(--slate);
}
.rail__list{
  list-style:none;
  margin:0;padding:0;
  display:flex;
  flex-direction:column;
  gap:1px;
}
.rail__link{
  position:relative;
  display:flex;
  align-items:baseline;
  gap:11px;
  padding:10px 12px 10px 16px;
  border-radius:2px;
  color:var(--slate);
  font-size:15px;
  font-weight:600;
  letter-spacing:.04em;
  text-decoration:none;
  transition:color .2s ease,background-color .2s ease,transform .2s ease;
}
.rail__link::before{
  content:"";
  position:absolute;
  left:0;top:9px;bottom:9px;
  width:2px;
  background:var(--gold);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .22s ease;
}
.rail__link:hover,.rail__link:focus-visible{
  color:var(--ivory);
  background:var(--glass);
  transform:translateX(3px);
}
.rail__link:hover::before,.rail__link:focus-visible::before{transform:scaleY(1)}
.rail__link[aria-current="page"]{
  color:var(--gold-lit);
  background:rgba(201,162,39,.09);
}
.rail__link[aria-current="page"]::before{transform:scaleY(1)}
.rail__link[aria-current="page"] .rail__idx{color:var(--gold)}
.rail__idx{font-size:11px;color:#5d6a72;letter-spacing:.08em}
.rail__label{flex:1}
.rail__foot{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.rail__cta{width:100%;justify-content:center}
.rail__note{
  margin:0;
  font-size:11px;
  letter-spacing:.06em;
  color:var(--slate);
  text-align:center;
}
.rail-scrim{display:none}

/* ---------- 6. 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  padding:.68em 1.2em;
  border:1px solid var(--edge);
  border-radius:2px;
  background:var(--table);
  color:var(--ivory);
  font-family:var(--font-body);
  font-size:14px;
  font-weight:700;
  letter-spacing:.04em;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  transition:transform .18s ease,background-color .2s ease,border-color .2s ease,color .2s ease;
}
.btn:hover{color:var(--ivory);border-color:rgba(201,162,39,.5);transform:translateY(-1px)}
.btn--gold{
  background:linear-gradient(180deg,var(--gold-lit),var(--gold));
  border-color:transparent;
  color:#16130a;
  box-shadow:0 8px 22px rgba(201,162,39,.2);
}
.btn--gold:hover{color:#16130a;box-shadow:0 10px 26px rgba(201,162,39,.3)}
.btn--ghost{background:var(--glass);border-color:var(--glass-line)}
.btn--block{width:100%;justify-content:center}

/* ---------- 7. 通用容器与章节 ---------- */
#main-content{position:relative;z-index:1;display:block}
.wrap{
  width:100%;
  max-width:1200px;
  margin-inline:auto;
  padding-inline:var(--pad-x);
}
.section{position:relative;padding-block:clamp(52px,7vw,104px)}
.section__head{max-width:64ch;margin-bottom:clamp(22px,3vw,38px)}
.section__num{
  display:inline-block;
  margin-bottom:10px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.22em;
  color:var(--gold);
}
.section__title{margin-bottom:.35em}
.section__lead{margin:0;color:var(--slate);font-size:17px;max-width:38em}
.lede{font-size:clamp(17px,1.6vw,19px);color:#D8D2C6;max-width:40em}
.prose{max-width:38em}
.prose p{color:#D9D3C7}
.divider{
  height:1px;
  margin:0;
  background:linear-gradient(90deg,rgba(201,162,39,.55),rgba(42,47,53,0));
}

/* ---------- 8. 网格 ---------- */
.grid{display:grid;gap:clamp(16px,2.2vw,28px)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(228px,1fr))}
.grid--split{grid-template-columns:1.15fr .85fr;align-items:start}
@media (max-width:900px){
  .grid--split{grid-template-columns:1fr}
}

/* ---------- 9. 卡片 ---------- */
.card{
  position:relative;
  padding:clamp(18px,2.2vw,26px);
  background:var(--table);
  border:1px solid var(--edge);
  border-radius:var(--r);
}
.card--solid{background:linear-gradient(180deg,#143a2f,#0f2b23)}
.card--glass{
  background:var(--glass);
  border-color:var(--glass-line);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.card__label{
  margin:0 0 8px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.16em;
  color:var(--slate);
}
.card__value{
  margin:0;
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:clamp(22px,2.6vw,30px);
  font-weight:700;
  line-height:1.2;
  color:var(--gold-lit);
}

/* ---------- 10. 图片容器 ---------- */
.media{
  position:relative;
  display:block;
  overflow:hidden;
  margin:0;
  border:1px solid var(--edge);
  border-radius:var(--r);
  background:linear-gradient(180deg,#12332A,#0B1F1A);
}
.media>img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.86) contrast(1.06);
}
.media--16x9{aspect-ratio:16/9}
.media--4x3{aspect-ratio:4/3}
.media--1x1{aspect-ratio:1/1}
.media--tall{aspect-ratio:3/4}
.media--placeholder::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    repeating-linear-gradient(45deg,rgba(242,237,227,.045) 0 6px,transparent 6px 14px),
    radial-gradient(90% 70% at 30% 10%,rgba(201,162,39,.12),transparent 70%);
}
.media__cap{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:10px 14px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--ivory);
  background:linear-gradient(180deg,rgba(11,31,26,0),rgba(11,31,26,.9));
}

/* ---------- 11. 标签与统计 ---------- */
.chip{
  display:inline-flex;
  align-items:center;
  gap:.45em;
  padding:.26em .7em;
  border:1px solid var(--edge);
  border-radius:999px;
  background:var(--glass);
  color:var(--slate);
  font-size:12px;
  letter-spacing:.08em;
}
.tag{
  display:inline-block;
  padding:.18em .6em;
  border:1px solid rgba(201,162,39,.35);
  border-radius:2px;
  background:rgba(201,162,39,.14);
  color:var(--gold-lit);
  font-size:12px;
  letter-spacing:.1em;
}
.tag--red{
  border-color:rgba(183,54,47,.5);
  background:rgba(183,54,47,.16);
  color:#F0A9A3;
}
.stat{display:flex;flex-direction:column;gap:5px}
.stat__num{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:clamp(26px,3.4vw,40px);
  font-weight:700;
  line-height:1;
  color:var(--gold-lit);
}
.stat__label{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.12em;
  color:var(--slate);
}
.arrow-link{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  padding-bottom:2px;
  border-bottom:1px solid rgba(201,162,39,.4);
  font-size:14px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--gold-lit);
  transition:gap .2s ease,color .2s ease;
}
.arrow-link::after{content:"→";transition:transform .2s ease}
.arrow-link:hover{gap:.8em;color:#fff}

/* ---------- 12. 面包屑 ---------- */
.crumbs{
  padding-block:14px;
  border-bottom:1px solid var(--edge);
  margin-bottom:clamp(20px,3vw,36px);
  font-size:12px;
  color:var(--slate);
}
.crumbs ol{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
  font-family:var(--font-mono);
  letter-spacing:.06em;
}
.crumbs li::after{content:"/";margin-left:8px;color:#3a4249}
.crumbs li:last-child::after{content:""}
.crumbs a{color:var(--slate)}
.crumbs a:hover{color:var(--gold-lit)}
.crumbs [aria-current="page"]{color:var(--ivory)}

/* ---------- 13. 页脚 ---------- */
.site-footer{
  position:relative;
  z-index:1;
  margin-top:clamp(48px,8vw,96px);
  background:var(--ink);
  border-top:1px solid var(--edge);
}
.site-footer::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:.75;
}
.footer__grid{
  max-width:1280px;
  margin-inline:auto;
  display:grid;
  grid-template-columns:1.5fr 1fr 1.1fr 1.3fr;
  gap:clamp(20px,3vw,44px);
  padding:clamp(40px,6vw,72px) var(--pad-x);
}
.footer__col{min-width:0}
.footer__mark{
  margin:0 0 6px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:20px;
  letter-spacing:-.01em;
  color:var(--ivory);
}
.footer__tag{margin:0 0 8px;color:var(--gold-lit);font-size:14px;letter-spacing:.06em}
.footer__tag--dim{color:var(--slate);font-size:13px;line-height:1.7;max-width:26em}
.footer__title{
  margin:0 0 14px;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.18em;
  color:var(--gold);
}
.footer__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:9px;
  font-size:14px;
}
.footer__list a{color:var(--slate);transition:color .2s ease,padding-left .2s ease}
.footer__list a:hover{color:var(--ivory);padding-left:4px}
.footer__contact{color:var(--slate);font-size:13px;line-height:1.6;word-break:break-word}
.footer__dim{color:#6f7a82;font-size:12px}
.footer__base{
  max-width:1280px;
  margin-inline:auto;
  padding:16px var(--pad-x) 28px;
  border-top:1px solid var(--edge);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 24px;
  font-size:12px;
  color:var(--slate);
}
.footer__base p{margin:0}
.footer__sign{color:var(--ivory);letter-spacing:.06em}
.footer__legal{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.footer__legal a{color:var(--slate)}
.footer__legal a:hover{color:var(--gold-lit)}
.footer__meta{letter-spacing:.08em}

/* ---------- 14. 动效与进度 ---------- */
.reveal{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .35s ease,transform .35s ease;
}
.reveal.is-in{opacity:1;transform:none}
.scroll-progress{
  position:fixed;
  top:0;left:0;
  z-index:200;
  width:100%;
  height:2px;
  transform:scaleX(0);
  transform-origin:left center;
  background:linear-gradient(90deg,var(--gold),var(--gold-lit));
  pointer-events:none;
}

/* ---------- 15. 响应式：平板与手机 ---------- */
@media (max-width:1024px){
  body{padding:56px 0 0 0}
  .topbar{display:none}
  .nav-toggle{
    display:grid;
    position:fixed;
    top:8px;left:12px;
    z-index:105;
  }
  .brand-bar{
    display:flex;
    position:fixed;
    top:0;left:60px;
    height:56px;
    z-index:90;
  }
  .download-pin{
    display:grid;
    position:fixed;
    top:8px;right:12px;
    z-index:95;
  }
  .rail{
    top:0;bottom:0;
    width:min(84vw,320px);
    padding:68px 18px 24px;
    z-index:100;
    transform:translateX(-102%);
    transition:transform .28s ease;
    box-shadow:18px 0 40px rgba(0,0,0,.4);
  }
  .rail[data-open]{transform:translateX(0)}
  .rail__link{padding:13px 14px 13px 18px;font-size:17px}
  .rail-scrim{
    display:block;
    position:fixed;
    inset:0;
    z-index:94;
    background:rgba(6,14,12,.66);
    opacity:0;
    visibility:hidden;
    transition:opacity .25s ease,visibility .25s ease;
  }
  .rail[data-open]~.rail-scrim{opacity:1;visibility:visible}
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:560px){
  .footer__grid{grid-template-columns:1fr;gap:28px}
  .footer__base{flex-direction:column;align-items:flex-start;gap:10px}
  .section{padding-block:clamp(40px,9vw,64px)}
}

/* ---------- 16. 降低动效偏好 ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}