/* ==========================================================================
   德州牌局 · 共享样式表  /assets/site.css
   暗夜牌桌 × 电子记录台：锐利直角、1px 细线、精密网格、单一霓虹青锚点
   ========================================================================== */

/* ---------- 1. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,blockquote,dl,dd,details,summary,fieldset{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;border-spacing:0;width:100%}
:focus-visible{outline:2px solid #1BE3C6;outline-offset:2px}
::selection{background:#1BE3C6;color:#0A1210}

/* ---------- 2. Tokens ---------- */
:root{
  --ink:#0A1210;
  --ink-2:#0E2A23;
  --felt:#144034;
  --cyan:#1BE3C6;
  --violet:#7B4DFF;
  --orange:#FF7A2F;
  --paper:#EAF4F0;
  --muted:#8FA8A1;
  --line:#24352F;
  --white:#F4F8F6;

  --rail:132px;
  --shell:1240px;
  --gutter:clamp(20px,4.2vw,64px);
  --flow:clamp(18px,2.4vw,32px);

  --font-sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono","Courier New",monospace;

  --step-body:clamp(15px,1.05vw,16.5px);
  --dur:.18s;
}

/* ---------- 3. Base / 中文排版 ---------- */
body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background-color:var(--ink);
  background-image:
    linear-gradient(rgba(36,53,47,.5) 1px,transparent 1px),
    linear-gradient(90deg,rgba(36,53,47,.5) 1px,transparent 1px);
  background-size:88px 88px;
  color:var(--paper);
  font-family:var(--font-sans);
  font-size:var(--step-body);
  line-height:1.78;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body > *{position:relative}
main{display:block;flex:1 0 auto}
h1,h2,h3,h4,h5,h6{line-height:1.2;letter-spacing:-.02em;font-weight:800;text-wrap:balance}
p{text-wrap:pretty}
strong,b{font-weight:800;color:var(--white)}
em{font-style:normal;color:var(--cyan)}
hr{border:0;border-top:1px solid var(--line);margin:0}
code,kbd,samp,time,.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ---------- 4. Skip link ---------- */
.skip-link{
  position:absolute;
  left:14px;
  top:-72px;
  z-index:200;
  padding:11px 18px;
  background:var(--cyan);
  color:var(--ink);
  font-weight:800;
  letter-spacing:.04em;
  border:1px solid var(--cyan);
  transition:top var(--dur) ease;
}
.skip-link:focus{top:14px}

/* ---------- 5. Header ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:70;
  background:rgba(10,18,16,.96);
  border-bottom:1px solid var(--line);
}
.header-shell{
  max-width:var(--shell);
  margin:0 auto;
  padding:13px var(--gutter);
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:center;
  gap:clamp(16px,3vw,40px);
}
.brand{min-width:0}
.brand__link{
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:var(--paper);
}
.brand__mark{
  flex:0 0 auto;
  padding:6px 8px;
  border:1px solid var(--cyan);
  color:var(--cyan);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.22em;
  line-height:1;
}
.brand__text{
  font-size:15px;
  font-weight:800;
  letter-spacing:.06em;
  white-space:nowrap;
}
.header-note{
  justify-self:end;
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  white-space:nowrap;
}
.header-note::before{
  content:"";
  width:7px;
  height:7px;
  background:var(--cyan);
  flex:0 0 auto;
}
.header-cta{justify-self:end;white-space:nowrap}

.nav-toggle{
  display:none;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border:1px solid var(--line);
  color:var(--paper);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.18em;
  transition:border-color var(--dur) ease,color var(--dur) ease,background-color var(--dur) ease;
}
.nav-toggle__bars{
  width:18px;
  height:8px;
  flex:0 0 auto;
  background:
    linear-gradient(var(--cyan),var(--cyan)) 0 0/100% 1px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) 0 100%/100% 1px no-repeat;
}
.nav-toggle:hover{border-color:var(--cyan);color:var(--cyan)}
.nav-toggle[aria-expanded="true"]{border-color:var(--cyan);color:var(--cyan);background:rgba(27,227,198,.12)}

/* ---------- 6. Side command rail / bottom command bar ---------- */
.site-nav{
  position:fixed;
  inset:0 auto 0 0;
  width:var(--rail);
  z-index:80;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:26px 0 22px;
  background:var(--ink-2);
  border-right:1px solid var(--line);
  overflow-y:auto;
}
.site-nav__title{
  padding:0 18px 6px;
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.3em;
}
.site-nav__list{display:flex;flex-direction:column;gap:2px}
.site-nav__item{display:block}
.site-nav__link{
  display:grid;
  gap:3px;
  padding:11px 16px;
  border-left:2px solid transparent;
  color:var(--muted);
  transition:background-color var(--dur) ease,color var(--dur) ease,border-color var(--dur) ease;
}
.site-nav__index{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:11px;
  letter-spacing:.16em;
  color:inherit;
  opacity:.75;
}
.site-nav__label{font-size:13.5px;font-weight:700;letter-spacing:.04em}
.site-nav__link:hover{background:rgba(27,227,198,.07);color:var(--paper);border-left-color:var(--violet)}
.site-nav__link[aria-current="page"]{
  background:var(--cyan);
  color:var(--ink);
  border-left-color:var(--cyan);
}
.site-nav__link[aria-current="page"] .site-nav__index{opacity:.7}

/* ---------- 7. Layout containers ---------- */
.section{
  max-width:var(--shell);
  margin:0 auto;
  padding:clamp(56px,7vw,116px) var(--gutter);
  width:100%;
}
.section--tight{padding-top:clamp(32px,4vw,64px);padding-bottom:clamp(32px,4vw,64px)}
.section__head{
  display:grid;
  gap:14px;
  border-top:1px solid var(--line);
  padding-top:clamp(18px,2.4vw,30px);
}
.section__index{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:clamp(52px,7.4vw,112px);
  font-weight:800;
  line-height:.86;
  letter-spacing:-.04em;
  color:rgba(143,168,161,.28);
  transition:color .32s ease;
}
[data-reveal].is-visible .section__index{color:var(--cyan)}
.section__title{
  font-size:clamp(26px,3.6vw,44px);
  font-weight:900;
  letter-spacing:-.02em;
}
.section__desc{
  max-width:34em;
  color:var(--muted);
  font-size:var(--step-body);
}
.lede{
  max-width:30em;
  font-size:clamp(17px,2vw,21px);
  line-height:1.7;
  color:var(--paper);
}
.prose{max-width:36em;line-height:1.85}
.prose p + p{margin-top:1.15em}
.prose h2{margin-top:2.2em;font-size:clamp(20px,2.4vw,24px)}
.prose h3{margin-top:1.8em;font-size:clamp(17px,2vw,20px);color:var(--cyan)}
.prose ul,.prose ol{margin-top:1em;display:grid;gap:.55em}
.prose ul li{padding-left:1.1em;position:relative}
.prose ul li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:8px;
  height:1px;
  background:var(--cyan);
}
.prose ol{counter-reset:item}
.prose ol li{padding-left:2.1em;position:relative}
.prose ol li::before{
  counter-increment:item;
  content:counter(item,decimal-leading-zero);
  position:absolute;
  left:0;
  top:.1em;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--muted);
  letter-spacing:.08em;
}
.prose a{border-bottom:1px solid var(--cyan);color:var(--paper)}
.prose a:hover{color:var(--cyan)}
.divider{border:0;border-top:1px solid var(--line);margin:0}

/* ---------- 8. Grid ---------- */
.grid{display:grid;gap:clamp(20px,2.8vw,40px)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--asym{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.grid--offset{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.stack{display:grid;gap:clamp(16px,2vw,26px)}
.stack--wide{gap:clamp(32px,4vw,56px)}

/* ---------- 9. Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 20px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--paper);
  font-size:14px;
  font-weight:700;
  letter-spacing:.05em;
  line-height:1.2;
  cursor:pointer;
  transition:background-color var(--dur) ease,color var(--dur) ease,border-color var(--dur) ease,transform var(--dur) ease;
}
.btn:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-1px)}
.btn--primary{background:var(--cyan);border-color:var(--cyan);color:var(--ink)}
.btn--primary:hover{background:var(--white);border-color:var(--white);color:var(--ink)}
.btn--ghost{background:transparent;color:var(--muted)}
.btn--ghost:hover{color:var(--cyan);border-color:var(--cyan)}
.btn--block{display:flex;width:100%}

/* ---------- 10. Cards / stats / tags ---------- */
.card{
  background:var(--ink-2);
  border:1px solid var(--line);
  padding:clamp(20px,2.4vw,32px);
  display:grid;
  gap:12px;
  align-content:start;
  transition:transform .2s ease,border-color .2s ease,background-color .2s ease;
}
.card:hover{transform:translateY(-4px);border-color:var(--cyan)}
.card--felt{background:var(--felt)}
.card--light{background:var(--white);color:var(--ink);border-color:var(--white)}
.card--light .card__label{color:var(--felt)}
.card--light .card__text,.card--light .card__meta{color:#3C544D}
.card__label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.24em;
  color:var(--muted);
}
.card__title{font-size:clamp(18px,2.1vw,22px);font-weight:800;letter-spacing:-.01em}
.card__text{color:var(--muted);font-size:15px}
.card__meta{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--muted);
  border-top:1px solid var(--line);
  padding-top:12px;
}
.card--light .card__meta{border-top-color:#CBDCD6}

.stat{display:grid;gap:8px;align-content:start}
.stat__value{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:clamp(30px,4.2vw,52px);
  font-weight:800;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--cyan);
}
.stat__label{
  font-size:12px;
  letter-spacing:.18em;
  color:var(--muted);
  text-transform:uppercase;
}
.tag{
  display:inline-block;
  padding:4px 9px;
  border:1px solid var(--line);
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.12em;
  line-height:1.5;
}
.tag--cyan{border-color:rgba(27,227,198,.55);color:var(--cyan)}
.tag--violet{border-color:rgba(123,77,255,.6);color:#B49CFF}
.tag--orange{border-color:rgba(255,122,47,.6);color:var(--orange)}

/* ---------- 11. Breadcrumbs ---------- */
.breadcrumbs{max-width:var(--shell);margin:0 auto;padding:clamp(18px,2.4vw,30px) var(--gutter) 0}
.breadcrumbs__list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.12em;
  color:var(--muted);
}
.breadcrumbs__item{display:inline-flex;align-items:center;gap:10px}
.breadcrumbs__link{color:var(--muted);border-bottom:1px solid transparent;transition:color var(--dur) ease,border-color var(--dur) ease}
.breadcrumbs__link:hover{color:var(--cyan);border-bottom-color:var(--cyan)}
.breadcrumbs__sep{color:var(--line)}
.breadcrumbs__item[aria-current="page"]{color:var(--paper)}

/* ---------- 12. Image containers ---------- */
.figure{display:grid;gap:12px}
.media-frame{
  position:relative;
  overflow:hidden;
  background:var(--felt);
  border:1px solid var(--line);
  aspect-ratio:16/10;
}
.media-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.94) contrast(1.04);
}
.media-frame--wide{aspect-ratio:21/9}
.media-frame--tall{aspect-ratio:3/4}
.media-frame--square{aspect-ratio:1/1}
.media-frame--fill{aspect-ratio:auto;height:100%}
.figure__caption{
  font-size:12.5px;
  line-height:1.7;
  color:var(--muted);
  border-left:1px solid var(--line);
  padding-left:12px;
}

/* ---------- 13. Tables ---------- */
.table-wrap{
  overflow-x:auto;
  border:1px solid var(--line);
  background:var(--ink-2);
}
.data-table{width:100%;min-width:560px;font-size:14px}
.data-table caption{
  caption-side:top;
  text-align:left;
  padding:14px 16px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.16em;
  color:var(--muted);
  border-bottom:1px solid var(--line);
}
.data-table th{
  text-align:left;
  padding:12px 16px;
  background:var(--felt);
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.1em;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.data-table td{
  padding:12px 16px;
  border-bottom:1px solid var(--line);
  color:var(--paper);
  vertical-align:top;
}
.data-table tbody tr{transition:background-color .18s ease}
.data-table tbody tr:hover{background:var(--felt)}
.data-table td.num,.data-table th.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:right}
.data-table tbody tr:last-child td{border-bottom:0}

/* ---------- 14. Details / FAQ ---------- */
.faq-item{
  border:1px solid var(--line);
  background:var(--ink-2);
}
.faq-item + .faq-item{border-top:0}
.faq-item__summary{
  display:flex;
  gap:16px;
  align-items:baseline;
  padding:16px 20px;
  cursor:pointer;
  font-weight:700;
  list-style:none;
  transition:color var(--dur) ease,background-color var(--dur) ease;
}
.faq-item__summary::-webkit-details-marker{display:none}
.faq-item__summary::before{
  content:"+";
  font-family:var(--font-mono);
  color:var(--cyan);
  flex:0 0 auto;
}
.faq-item[open] > .faq-item__summary{color:var(--cyan);background:rgba(27,227,198,.06)}
.faq-item[open] > .faq-item__summary::before{content:"−"}
.faq-item__summary:hover{color:var(--cyan)}
.faq-item__body{padding:0 20px 18px 48px;color:var(--muted);max-width:44em}

/* ---------- 15. Footer ---------- */
.site-footer{
  margin-top:clamp(48px,7vw,110px);
  background:var(--ink-2);
  border-top:1px solid var(--line);
}
.footer-shell{
  max-width:var(--shell);
  margin:0 auto;
  padding:clamp(40px,5vw,72px) var(--gutter) clamp(24px,3vw,40px);
  display:grid;
  gap:clamp(28px,4vw,48px);
}
.footer-brand{display:grid;gap:12px;border-left:2px solid var(--cyan);padding-left:18px}
.footer-brand__mark{
  font-size:clamp(18px,2.2vw,22px);
  font-weight:900;
  letter-spacing:.02em;
  color:var(--paper);
}
.footer-brand__desc{max-width:32em;color:var(--muted);font-size:14.5px}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,3vw,40px);
}
.footer-col{display:grid;gap:14px;align-content:start}
.footer-col__title{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.24em;
  color:var(--cyan);
}
.footer-col__list{display:grid;gap:10px}
.footer-col__item{display:block}
.footer-link{
  display:inline-block;
  color:var(--muted);
  font-size:14.5px;
  border-bottom:1px solid transparent;
  transition:color var(--dur) ease,border-color var(--dur) ease;
}
.footer-link:hover{color:var(--cyan);border-bottom-color:var(--cyan)}
.footer-contact{display:grid;gap:10px}
.footer-contact__row{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;align-items:baseline}
.footer-contact__label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  color:var(--muted);
}
.footer-contact__value{font-size:14.5px;color:var(--paper);word-break:break-word}
.footer-service{
  border-top:1px solid var(--line);
  padding-top:clamp(20px,2.6vw,28px);
  max-width:62em;
  color:var(--muted);
  font-size:13.5px;
  line-height:1.85;
}
.footer-note{
  color:var(--muted);
  font-size:13px;
  border-left:1px solid var(--violet);
  padding-left:12px;
}
.footer-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px 28px;
  align-items:baseline;
  border-top:1px solid var(--line);
  padding-top:18px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  color:var(--muted);
}
.footer-meta__item{font-variant-numeric:tabular-nums}
.footer-icp{color:var(--paper)}

/* ---------- 16. Scroll progress (JS 注入) ---------- */
.scroll-progress{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:2px;
  z-index:120;
  transform:scaleX(0);
  transform-origin:0 50%;
  background:linear-gradient(90deg,var(--cyan),var(--violet));
  pointer-events:none;
}

/* ---------- 17. Reveal ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .4s ease,transform .4s ease;
}
[data-reveal].is-visible{opacity:1;transform:none}

/* ---------- 18. Desktop rail offset ---------- */
@media (min-width:1100px){
  body{padding-left:var(--rail)}
  .scroll-progress{left:var(--rail)}
}

/* ---------- 19. Tablet / small desktop ---------- */
@media (max-width:1099px){
  .nav-toggle{display:inline-flex}
  .header-shell{grid-template-columns:1fr auto auto}
  .header-note{display:none}

  .site-nav{
    inset:auto 0 0 0;
    width:auto;
    max-height:82vh;
    padding:18px var(--gutter) calc(20px + env(safe-area-inset-bottom));
    border-right:0;
    border-top:1px solid var(--line);
    background:var(--ink-2);
    transform:translateY(104%);
    opacity:0;
    visibility:hidden;
    overflow-y:auto;
    transition:transform .22s ease,opacity .22s ease,visibility .22s linear;
  }
  .site-nav[data-open]{
    transform:translateY(0);
    opacity:1;
    visibility:visible;
  }
  .site-nav__title{padding:0 0 10px}
  .site-nav__list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .site-nav__item{background:var(--ink-2)}
  .site-nav__link{
    padding:14px 16px;
    border-left:0;
    border-bottom:0;
  }
  .site-nav__link:hover{border-left:0}
  .site-nav__link[aria-current="page"]{border-left:0}

  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- 20. Mobile ---------- */
@media (max-width:760px){
  :root{--rail:0px}
  .header-shell{grid-template-columns:1fr auto;gap:14px}
  .header-cta{display:none}
  .brand__text{font-size:14px}
  .grid--2,.grid--3,.grid--4,.grid--asym,.grid--offset{grid-template-columns:minmax(0,1fr)}
  .footer-grid{grid-template-columns:minmax(0,1fr)}
  .footer-meta{flex-direction:column;gap:8px}
  .data-table{min-width:520px}
  .faq-item__body{padding-left:20px}
}

@media (max-width:440px){
  .site-nav__list{grid-template-columns:minmax(0,1fr)}
}

/* ---------- 21. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1;transform:none}
  .card:hover{transform:none}
  .btn:hover{transform:none}
  .site-nav{transition:none}
}

/* ---------- 22. Print ---------- */
@media print{
  body{background:var(--white);color:#0A1210}
  .site-header,.site-nav,.scroll-progress,.skip-link{display:none}
  body{padding-left:0}
}