/* ============================================================
   ninesifu.cn · assets/css/base.css
   reset + 排版基线 + 无障碍基建（焦点环 / skip link / reduced-motion）
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--ns-border-strong) var(--ns-bg);
}

body {
  margin: 0;
  background: var(--ns-bg);
  color: var(--ns-text);
  font-family: var(--ns-font-sans);
  font-size: var(--fs-body);
  line-height: 1.75;
  font-weight: 400;
  /* 中西混排：禁止 break-all（会切碎英文单词） */
  word-break: normal;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: 500; }
h1 { font-size: var(--fs-h1); line-height: 1.25; letter-spacing: -0.018em; }
h2 { font-size: var(--fs-h2); line-height: 1.35; letter-spacing: -0.010em; }
h3 { font-size: var(--fs-h3); line-height: 1.45; }
h4 { font-size: var(--fs-h4); line-height: 1.5;  letter-spacing: 0.005em; }

p  { margin: 0; }

a { color: var(--ns-accent); text-decoration: none; }
a:hover { color: var(--ns-accent-hover); }

img, svg { max-width: 100%; }

/* 数字类（比分 / 倒计时 / 金额 / 日期）一律等宽，防跳动 */
.num, .ns-score, .ns-count, .ns-table td, .ns-table th,
time, .ns-meta { font-variant-numeric: tabular-nums; }

/* 中文强调一律 <strong>（字重 500），禁止 <em> 伪斜体 */
strong, b { font-weight: 500; }
em { font-style: normal; }

ul, ol { margin: 0; padding: 0; }
hr { border: 0; border-top: 1px solid var(--ns-border-on-bg); margin: var(--ns-s-8) 0; }

/* ---------- 全局焦点环（禁止 outline:none 而不给替代） ---------- */
:focus-visible {
  outline: 2px solid var(--ns-focus-ring);
  outline-offset: 2px;
  border-radius: inherit;
}
/* 紫金色域内部的焦点环换金色（6.14:1 on 紫） */
.ns-lakers :focus-visible { outline-color: var(--ns-focus-inverse); }

/* ---------- 跳过导航 ---------- */
.ns-skip {
  position: absolute; left: var(--ns-s-4); top: -60px;
  z-index: 200;
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 10px 16px; border-radius: var(--ns-radius);
  background: var(--ns-surface-2); color: var(--ns-text);
  border: 1px solid var(--ns-border-strong);
  font-size: var(--fs-sm); font-weight: 500;
  box-shadow: var(--ns-shadow-2);
  transition: top .16s ease;
}
.ns-skip:focus { top: var(--ns-s-4); }

/* ---------- 工具类 ---------- */
.ns-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }

.ns-container {
  width: 100%; max-width: var(--ns-container);
  margin-inline: auto;
  padding-inline: 20px;
}
@media (min-width: 768px) { .ns-container { padding-inline: 24px; } }

.ns-lead { font-size: var(--fs-lead); line-height: 1.7; color: var(--ns-text-2); }
.ns-meta { font-size: var(--fs-caption); color: var(--ns-text-2); line-height: 1.6; }

/* ---------- 减弱动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 骨架屏 pulse ---------- */
@keyframes ns-pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.ns-skeleton {
  background: var(--ns-skeleton);
  border-radius: var(--ns-radius-sm);
  animation: ns-pulse 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .ns-skeleton { animation: none; }
}