/* ============================================================
   ninesifu.cn · assets/css/lakers.css
   色域②：紫金。必须挂在 .ns-lakers 作用域下
   禁止被 tokens.css 的浅色 token 覆盖；禁止外溢到全局
   只允许被首页 #lakers 视窗与 /articles/* 的 Hero 引入
   ============================================================ */
.ns-lakers {
  --lk-purple:      #552583;  /* 品牌紫 · 区块底 / 强调 */
  --lk-purple-deep: #3B1A5C;  /* 深紫 · 长文 Hero 底 14.11:1 PASS */
  --lk-gold:        #FDB927;  /* 品牌金 · 只能在深底上用作文字/图形 6.14:1 on 紫 PASS */
  --lk-gold-ink:    #8A5A00;  /* 金墨 · 浅底上唯一合法的「金」4.92:1 PASS */

  /* 紫底文字层 */
  --lk-on:          #FFFFFF;  /* 主文字 10.61:1 PASS */
  --lk-on-soft:     #F7F5F2;  /* 近白 9.75:1 PASS */
  --lk-on-2:        #CFC2DC;  /* 次级 白 72% 6.27:1 PASS（推荐值） */
  --lk-on-2-min:    #BBA8CD;  /* 次级硬下限 白 60% 4.85:1 PASS */
  --lk-on-3:        #A287BB;  /* 三级 白 45% 3.40:1 PASS 仅限非文本 */

  /* 紫底线条与数据填充 */
  --lk-line:        rgba(255,255,255,.15);
  --lk-line-strong: rgba(255,255,255,.35);
  --lk-win:         #FDB927;  /* 胜 · 实心圆 6.14:1 PASS */
  --lk-loss:        #E4E4E7;  /* 负 · 圆环描边 8.36:1 PASS */
  --lk-pending:     #A287BB;  /* 未打 · 虚线圆环 3.40:1 PASS */

  --lk-shadow: 0 2px 4px rgba(20,4,40,.18), 0 16px 40px rgba(20,4,40,.16);
  --lk-radius: 14px;
}

/* 浅色区要用「金色感」只能取 --lk-gold-ink。
   --lk-gold 定义在 .ns-lakers 作用域内，浅色区拿不到这个变量，
   误写 var(--lk-gold) 会解析为无效值并回落 currentColor，错误会立刻暴露。 */

/* ---------------- 倒计时卡片（全站唯一视觉高潮） ---------------- */
.ns-count-card {
  position: relative;
  max-width: var(--ns-container);
  margin-inline: auto;
  background: var(--lk-purple);
  color: var(--lk-on);
  border-radius: var(--lk-radius);
  box-shadow: var(--lk-shadow);
  padding: 24px;
  overflow: hidden;
}
@media (min-width: 768px) { .ns-count-card { padding: 32px; } }

/* 网点纹理：内联 SVG pattern，opacity .06，禁止渐变/发光 */
.ns-count-card__texture {
  position: absolute; inset: 0;
  opacity: .06; pointer-events: none;
}
.ns-count-card__inner { position: relative; }

.ns-count-card__eyebrow {
  font-size: var(--fs-micro); font-weight: 500; letter-spacing: .06em;
  color: var(--lk-on-2);
}
.ns-count-card__match {
  margin-top: var(--ns-s-2);
  font-size: var(--fs-h2); font-weight: 500; line-height: 1.3; color: var(--lk-on);
}
.ns-count-card__when {
  margin-top: 6px; font-size: var(--fs-sm); color: var(--lk-on-2); line-height: 1.6;
  font-variant-numeric: tabular-nums;
}
.ns-count-card__where { font-size: var(--fs-sm); color: var(--lk-on-2); line-height: 1.6; }

.ns-count {
  margin-top: var(--ns-s-6);
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--ns-s-3);
  color: var(--lk-gold);
  font-size: var(--fs-count); font-weight: 500; line-height: 1.05;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
.ns-count__days { font-size: 18px; font-weight: 400; color: var(--lk-on-2); letter-spacing: 0; }
.ns-count__unit { font-size: 18px; font-weight: 400; color: var(--lk-on-2); letter-spacing: 0; }
.ns-count--score { color: var(--lk-on); }

.ns-count-card__rows { margin-top: var(--ns-s-6); display: grid; gap: var(--ns-s-3); }
.ns-count-card__row {
  display: flex; align-items: center; gap: var(--ns-s-3); flex-wrap: wrap;
  font-size: var(--fs-sm); color: var(--lk-on-2);
}
.ns-count-card__row dt {
  flex: 0 0 auto; min-width: 5.5em; margin: 0;
  font-size: var(--fs-micro); font-weight: 500; letter-spacing: .06em;
}
.ns-count-card__row dd { margin: 0; display: flex; align-items: center; gap: var(--ns-s-2); flex-wrap: wrap; }

.ns-focus-chip {
  display: inline-flex; align-items: center;
  padding: 4px 8px; border-radius: var(--ns-radius-sm);
  background: rgba(255,255,255,.12); color: #FFFFFF;
  font-size: var(--fs-micro); font-weight: 500; line-height: 1.5;
}

/* 近期走势点位（形状 + 颜色 + 文字三重编码，禁用 emoji） */
.ns-form { display: inline-flex; align-items: center; gap: 8px; }
.ns-form__dot {
  width: 10px; height: 10px; border-radius: 999px;
  box-sizing: border-box; flex: 0 0 10px;
}
.ns-form__dot--win    { background: var(--lk-win); border: 0; }
.ns-form__dot--loss   { background: transparent; border: 2px solid var(--lk-loss); }
.ns-form__dot--pending{ background: transparent; border: 1.5px dashed var(--lk-pending); }
.ns-form__text { font-size: var(--fs-caption); color: var(--lk-on-2); font-variant-numeric: tabular-nums; }

.ns-count-card__footnote { margin-top: var(--ns-s-4); font-size: var(--fs-caption); color: var(--lk-on-2); }

/* 加载骨架（紫底） */
.ns-count-card__skeleton { background: #6E4696; }

/* 失败态（紫底上的次按钮） */
.ns-btn--on-purple {
  background: transparent; border: 1px solid var(--lk-on-2); color: #FFFFFF;
}
.ns-btn--on-purple:hover { background: rgba(255,255,255,.10); border-color: var(--lk-on); }

/* ---------------- Scorebox 手风琴（浅色区） ---------------- */
.ns-scorebox { display: grid; gap: 8px; }
.ns-acc__item {
  background: var(--ns-surface);
  border: 1px solid var(--ns-border);
  border-radius: var(--ns-radius);
  box-shadow: var(--ns-shadow-1);
}
.ns-acc__item:nth-child(even) { background: var(--ns-row-alt); }
.ns-acc__h { margin: 0; font-size: inherit; font-weight: inherit; }
.ns-acc__trigger {
  appearance: none; -webkit-appearance: none;
  width: 100%; cursor: pointer; text-align: left;
  display: grid; align-items: center; gap: var(--ns-s-3);
  grid-template-columns: 16px 128px minmax(0, 1fr) auto;
  min-height: 48px; padding: 12px 16px;
  background: transparent; border: 0; border-radius: var(--ns-radius);
  color: var(--ns-text); font-family: inherit; font-size: var(--fs-sm);
}
.ns-acc__trigger:hover { background: var(--ns-bg); }
.ns-acc__item:hover { border-color: var(--ns-border-strong); }
.ns-acc__trigger:focus-visible { outline: 2px solid var(--ns-focus-ring); outline-offset: -2px; }
.ns-acc__chevron { width: 16px; height: 16px; color: var(--ns-text-2); transition: transform .2s ease; }
.ns-acc__trigger[aria-expanded="true"] .ns-acc__chevron { transform: rotate(90deg); }
.ns-acc__date { font-weight: 500; font-variant-numeric: tabular-nums; }
.ns-acc__home { font-size: var(--fs-caption); color: var(--ns-text-2); }
.ns-acc__line { font-size: var(--fs-body); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ns-acc__team { color: var(--ns-text-2); font-weight: 400; }

.ns-acc__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .22s cubic-bezier(.2,.8,.2,1), opacity .22s ease;
  opacity: 0;
}
.ns-acc__panel > .ns-acc__inner { overflow: hidden; min-height: 0; }
.ns-acc__item.is-open .ns-acc__panel { grid-template-rows: 1fr; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ns-acc__panel { transition: none; } }

.ns-acc__content {
  padding: 16px;
  border-top: 1px dashed var(--ns-border);
  display: grid; gap: var(--ns-s-5);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .ns-acc__content { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .ns-acc__content { grid-template-columns: repeat(4, 1fr); } }

.ns-acc__blocktitle {
  font-size: var(--fs-micro); font-weight: 500; letter-spacing: .06em;
  color: var(--ns-text-2); margin-bottom: var(--ns-s-2);
}
.ns-acc__dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px var(--ns-s-3); font-size: var(--fs-sm); }
.ns-acc__dl dt { margin: 0; color: var(--ns-text-2); }
.ns-acc__dl dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.ns-acc__note { grid-column: 1 / -1; font-size: var(--fs-caption); color: var(--ns-text-2); }
.ns-acc__stats-empty { font-size: var(--fs-sm); color: var(--ns-text-2); }

/* 移动端：折叠行改两行布局 */
@media (max-width: 767px) {
  .ns-acc__trigger {
    grid-template-columns: 16px 1fr auto;
    grid-template-areas: "chev date res" "chev line line";
    row-gap: 4px; min-height: 64px;
  }
  .ns-acc__chevron { grid-area: chev; }
  .ns-acc__date-wrap { grid-area: date; display: flex; align-items: center; gap: 6px; }
  .ns-acc__result { grid-area: res; }
  .ns-acc__line { grid-area: line; font-size: var(--fs-sm); }
}

/* 展开全部 / 渐进披露 */
.ns-disclosure { margin-top: var(--ns-s-4); display: flex; align-items: center; gap: var(--ns-s-3); flex-wrap: wrap; }
.ns-truncated-note { font-size: var(--fs-caption); color: var(--ns-text-2); }

/* ---------------- 湖人引导语 ---------------- */
.ns-lakers-lead {
  max-width: var(--ns-container); margin: 0 auto var(--ns-s-8);
  font-size: var(--fs-sm); color: var(--ns-text-2);
}