/* ==========================================================================
   体育足球视觉层
   --------------------------------------------------------------------------
   给整站加足球场景的视觉语言：
     · 草茵条纹（草坪剪草的深浅条）
     · 球场中圈与边线（极淡的球场标线）
     · 球门网格（禁区/net 质感）
     · 皮革球面暗纹（球体的六边格）
   全部用 CSS 渐变与伪元素实现，不依赖图片，不增加请求。
   挂在 <body> 上，用 body::before / body::after 做全局层。
   ========================================================================== */

/* ---------- 1. 全局球场底纹 ---------- */
body {
  position: relative;
  background-color: var(--paper);
  background-image:
    /* 草茵条纹：交替的深浅绿 */
    repeating-linear-gradient(
      90deg,
      rgba(20, 122, 74, .028) 0,
      rgba(20, 122, 74, .028) 64px,
      rgba(0, 0, 0, 0) 64px,
      rgba(0, 0, 0, 0) 128px
    ),
    /* 极淡的纵向光晕，模拟球场照明 */
    radial-gradient(120% 60% at 50% 0%, rgba(20, 122, 74, .045), rgba(0, 0, 0, 0) 62%);
  background-attachment: fixed, fixed;
}

/* 球场标线层：中圈 + 边线 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    /* 中圈 */
    radial-gradient(circle at 50% 46%, rgba(20, 122, 74, .05) 0 168px, rgba(0, 0, 0, 0) 169px),
    /* 中线 */
    linear-gradient(90deg, rgba(0, 0, 0, 0) calc(50% - 1px), rgba(20, 122, 74, .05) calc(50% - 1px),
                    rgba(20, 122, 74, .05) calc(50% + 1px), rgba(0, 0, 0, 0) calc(50% + 1px)),
    /* 禁区弧 */
    radial-gradient(circle at 12% 46%, rgba(20, 122, 74, .04) 0 96px, rgba(0, 0, 0, 0) 97px);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 100% 100%, 100% 100%, 100% 100%;
  opacity: .9;
}

/* 内容层要浮到球场纹理之上。
   注意：只给 body 的直接子元素加 z-index 会影响 fixed 定位的弹窗，
   所以改用 :where() 保持 0 优先级，并且不动 position:fixed 的元素。 */
body > :where(header, main, footer, nav, section, div, img, script) {
  position: relative;
  z-index: 1;
}
body > :where([style*="fixed"], .app-dialog, .modal, .to-top) {
  z-index: auto;
}

/* ---------- 2. 板块层的体育质感 ---------- */
/* 浅底板块：加一层草茵斜纹 */
.section--bg {
  background-color: var(--canvas);
  background-image:
    repeating-linear-gradient(
      62deg,
      rgba(20, 122, 74, .022) 0,
      rgba(20, 122, 74, .022) 30px,
      rgba(0, 0, 0, 0) 30px,
      rgba(0, 0, 0, 0) 60px
    );
}

/* 深底板块：加球门网格（禁区的网） */
.section--ink {
  background-color: var(--dark);
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .022) 0 1px, rgba(0, 0, 0, 0) 1px 26px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .022) 0 1px, rgba(0, 0, 0, 0) 1px 26px);
}

/* ---------- 3. 卡片：球场边线质感 ---------- */
.card,
.lg-team,
.sp-team,
.sp-player,
.post,
.channel-card {
  position: relative;
  overflow: hidden;
}
/* 卡片左侧的联赛色条改为「边线 + 角旗」的观感 */
.card::after,
.lg-team::after,
.sp-team::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 46px;
  height: 46px;
  pointer-events: none;
  opacity: .1;
  background:
    linear-gradient(225deg, rgba(20, 122, 74, .5) 0 50%, rgba(0, 0, 0, 0) 50%);
}

/* ---------- 4. 比分与数字：更「记分牌」 ---------- */
.tk-score, .sp-tk-score, .sp-latest-score,
.mini-crest, .sp-num, .badge, .sp-badge {
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}

/* ---------- 5. 顶部比分条：像球场边 LED 屏 ---------- */
.sp-ticker {
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .014) 0 2px, rgba(0, 0, 0, 0) 2px 5px),
    linear-gradient(180deg, #10261a, #0a1c12);
  border-bottom: 1px solid rgba(217, 242, 75, .16);
  box-shadow: inset 0 -1px 0 rgba(217, 242, 75, .08);
}

/* ---------- 6. 英雄区：球场灯光 ---------- */
.cover {
  background-image:
    radial-gradient(90% 70% at 22% 0%, rgba(217, 242, 75, .1), rgba(0, 0, 0, 0) 60%),
    linear-gradient(180deg, rgba(8, 26, 17, .55), rgba(8, 26, 17, .82));
}

/* ---------- 7. 页脚：深色草坪 ---------- */
.site-footer {
  background-color: var(--dark);
  background-image:
    repeating-linear-gradient(76deg, rgba(255, 255, 255, .014) 0 26px, rgba(0, 0, 0, 0) 26px 52px),
    linear-gradient(180deg, #0a1c12, #071410);
}

/* ---------- 8. 球员/队徽的圆形「图钉」感 ---------- */
.sp-player-face {
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--line-strong);
}
.sp-crest {
  box-shadow: 0 1px 3px rgba(10, 30, 20, .18);
}

/* ---------- 9. 焦点态：球场黄线 ---------- */
:focus-visible {
  outline-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(217, 242, 75, .22);
}

/* ---------- 10. 减少动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  body { background-attachment: scroll, scroll; }
}