/* 算球 SuanQiu · 全站设计系统精修层（ds.css）
   各页在自有 <style> 之后引入本文件，统一升级到生产级：
   层次(elevation)/焦点环/过渡/滚动条/排版渲染/图标/组件基线。保留既有「夜场草皮」绿金品牌。 */

:root {
  /* ===== 大厂级精修：中性化描边/表面，让绿色只在重点处出现（克制美学） ===== */
  --line: rgba(233, 250, 242, .10);      /* 中性细线，取代绿色霓虹描边 */
  --line-soft: rgba(233, 250, 242, .06);
  --line2: rgba(46, 227, 127, .38);      /* 绿色强调描边（重点元素保留） */
  --panel: rgba(233, 250, 242, .03);     /* 中性微浮表面 */
  --panel2: rgba(3, 16, 10, .55);
  --dim: #a6c0b4; --faint: #768b80;      /* 略中性的次级文字 */
  /* 精修 elevation 阴影（卡片从纯描边升级为有深度） */
  --e1: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .025);
  --e2: 0 10px 30px rgba(0, 0, 0, .38), 0 2px 8px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .03);
  --e3: 0 24px 70px rgba(0, 0, 0, .55);
  --glow-green: 0 0 0 1px rgba(46, 227, 127, .25), 0 6px 22px rgba(46, 227, 127, .14);
  /* 半径与动效 token */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px;
  --t-fast: .14s; --t: .22s; --ease: cubic-bezier(.4, 0, .2, 1);
  --focus: 0 0 0 2px #03100a, 0 0 0 4px var(--green);
  color-scheme: dark;
}

/* 卡片高级表面：自上而下微受光渐变 + 中性细线 + 层次阴影（大厂质感） */
.card, .board, .lpcol, .xgcard, .kpcol, .move, .cards .card, .totals .card {
  background: linear-gradient(180deg, rgba(233, 250, 242, .05), rgba(233, 250, 242, .018)) !important;
  border-color: var(--line) !important;
}

/* 排版渲染：抗锯齿 + 平滑滚动 + 等宽数字（数据台核心） */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
.num, table, .val, .pts, .rk, .pv, .lv, .vp, .xgnum, .kpstat { font-variant-numeric: tabular-nums; }

/* 标题质感：微调字距让大字更精致 */
h1, h2, .big, .brand { letter-spacing: -.01em; }

/* 卡片层次：全站卡片从纯描边升级为带阴影的实体面 */
.card, .board, .lpcol, .xgcard, .kpcol, .move, .totals .card, .cards .card {
  box-shadow: var(--e1);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}

/* 统一交互过渡（链接/按钮/筹码/行/卡片） */
a, button, .chip, .row, .sbchip, .btn, .pick, .lv, .fc, .tagx,
.nav, .back, .hero-cta, .actualcard, .lpcol, .xgcard { transition: all var(--t-fast) var(--ease); }

/* 焦点可见性（无障碍 CRITICAL：键盘导航清晰可见，鼠标点击不显示） */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible, .row:focus-visible {
  outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); position: relative; z-index: 1;
}

/* 可点元素统一手势 */
a, button, .row, .chip.link, [role="button"], summary { cursor: pointer; }

/* 自定义滚动条（细节质感，跨页一致） */
* { scrollbar-width: thin; scrollbar-color: rgba(46, 227, 127, .28) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(46, 227, 127, .22); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(46, 227, 127, .4); background-clip: padding-box; }

/* SVG 图标系统：替代 emoji，跨平台一致、可主题化 */
.ico { width: 1.05em; height: 1.05em; stroke: currentColor; stroke-width: 1.9; fill: none;
  stroke-linecap: round; stroke-linejoin: round; vertical-align: -.18em; flex: none; }
.ico-sm { width: 14px; height: 14px; }
.ico-lg { width: 20px; height: 20px; }

/* 导航筹码：从 emoji 行升级为图标+文字的胶囊（更克制、更专业） */
.navchip, a.chip.link, a.nav {
  display: inline-flex; align-items: center; gap: 6px; line-height: 1;
}

/* 顶部导航条：玻璃质感粘顶（提升入口质感 + 滚动时仍可达） */
.ds-stickynav { position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px);
  background: linear-gradient(180deg, rgba(3, 16, 10, .92), rgba(3, 16, 10, .7)); }

/* 按钮基线精修 */
.btn { box-shadow: var(--e1); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* 行 hover 的细微位移（数据台列表更有反馈） */
.row:hover { transform: none; }

/* 可访问性：尊重用户的减少动效设置 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* 焦点之战 hero CTA 与卡片悬停的轻微抬升（质感） */
.hero-cta:hover { transform: translateY(-1px); box-shadow: var(--e2); }
.lpcol:hover, .xgcard:hover, .kpcol:hover { box-shadow: var(--e2); }

/* ===== 全站统一品牌顶栏（mountTopbar 渲染，所有页面一致） ===== */
.ds-topbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 11px clamp(16px, 3vw, 24px);
  border-bottom: 1px solid var(--line); }
.brandlink { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; flex: none; }
.logomark { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-weight: 900; font-size: 21px;
  background: linear-gradient(135deg, var(--green), #16a356); color: #03200f; box-shadow: 0 0 0 1px rgba(46, 227, 127, .3), 0 6px 18px rgba(46, 227, 127, .18); }
.brandtxt { display: flex; flex-direction: column; font-weight: 900; font-size: 18px; line-height: 1.18; letter-spacing: .3px;
  background: var(--grad, linear-gradient(92deg, #f0c33c, #2ee37f 55%, #38d6d0)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brandtxt small { font-size: 11.5px; font-weight: 500; color: var(--faint); -webkit-text-fill-color: var(--faint); letter-spacing: 0; }
.topnav { display: flex; gap: 5px; flex-wrap: wrap; }
.navchip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 10px; white-space: nowrap;
  font-size: 12.5px; color: var(--dim); text-decoration: none; border: 1px solid transparent; }
.navchip:hover { color: var(--text); background: rgba(46, 227, 127, .08); border-color: var(--line); }
.navchip .ico { color: var(--faint); }
.navchip:hover .ico { color: var(--green); }
.navchip.active { color: var(--text); background: rgba(46, 227, 127, .12); border-color: var(--line2); }
.navchip.active .ico { color: var(--green); }
.navchip.accent { color: var(--gold); } .navchip.accent .ico { color: var(--gold); }
.navchip.accent:hover, .navchip.accent.active { background: rgba(240, 195, 60, .1); border-color: rgba(240, 195, 60, .4); }
.topbar-meta { margin-left: auto; color: var(--dim); font-size: 12.5px; text-align: right; }
@media (max-width: 820px) {
  .topnav .navchip span { display: none; }
  /* 移动端触控目标 ≥44px（无障碍 CRITICAL） */
  .topnav .navchip { padding: 0; width: 44px; height: 44px; justify-content: center; }
  .topnav .navchip .ico { width: 20px; height: 20px; }
  .topnav { gap: 2px; }
  .topbar-meta { width: 100%; margin-left: 0; text-align: left; }
}

/* ===== 移动端通用精修（≤640px）：触控友好 + 舒适间距 ===== */
@media (max-width: 640px) {
  .ds-topbar { padding: 10px 14px; gap: 10px; }
  /* 链接型筹码增大点按区域 */
  a.chip, .chip.link, a.navchip, .btn { min-height: 40px; display: inline-flex; align-items: center; }
  /* 列表行点按更舒适 */
  .row { padding-top: 14px; padding-bottom: 14px; }
  /* 卡片内边距与圆角更克制，避免拥挤 */
  .card, .board, .lpcol, .xgcard, .kpcol { border-radius: 14px; }
  /* 标题在窄屏收紧行高 */
  h1, h2, .big { line-height: 1.25; }
}

/* ===== 大厂级排版与质感精修（全站，2026-06-15）===== */
/* 1) 标题层级：更强的字重对比 + 收紧字距（Linear/Vercel 式克制有力） */
h1, .brand { font-weight: 900; letter-spacing: -.015em; }
h2 { font-weight: 800; letter-spacing: -.01em; }
h2.big, .big { font-weight: 850; letter-spacing: -.012em; }

/* 2) 小标签/kicker：克制字距（CJK 安全，避免中文被拉散） */
.sec-title, .card h3 { letter-spacing: .04em; }

/* 3) 卡片：1px 顶部高光 + 更柔的圆角，营造受光实体感 */
.card, .board, .lpcol, .xgcard, .kpcol, .move, .cards .card, .totals .card {
  border-radius: 16px;
  position: relative;
}
.card::before, .board::before, .lpcol::before, .xgcard::before, .kpcol::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; border-radius: 16px 16px 0 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10) 30%, rgba(255,255,255,.10) 70%, transparent);
  pointer-events: none;
}

/* 4) 数据强调：大数字更紧凑有力（记分板/指标卡） */
.totals .n, .cards .n, .card .n, .num.big, .bigscore, .bignum { letter-spacing: -.02em; font-feature-settings: "tnum" 1; }

/* 5) 链接/筹码 hover 的细腻反馈 */
a.chip.link:hover, .navchip:hover { transform: translateY(-1px); }

/* 6) 分隔与留白：表格行/卡片间距更舒展（呼吸感是大厂审美的核心） */
table th { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; opacity: .85; }
.mv, .diag { border-radius: 0 12px 12px 0; }

/* 7) 选区与细节色 */
::selection { background: rgba(46,227,127,.85); color: #03200f; }