/* ============================================================================
   MOK 篮球社区 · 全站皮肤「热血争霸 · 纸红印」
   ----------------------------------------------------------------------------
   设计主张（源自 2026 争霸赛海报：奶油纸底 + 中国红 + 篮球橙 + 海报黑框）
   · 底色：海报纸面的暖奶油，整站像贴在球馆墙上的一张赛季海报的延伸
   · 唯一强调色：中国红 #C8332B —— 只给主按钮、品牌点、争霸赛、当前页高亮
   · 队色不变：M 队篮球橙 #EF7D1A、K 队压深青 #0F96B4（浅底上仍认得出）
   · 数字：全部加粗 + 微斜 + 等宽（tabular-nums），海报黑墨的力量感
   说明：本文件只改视觉，不改任何结构与交互逻辑。
   ========================================================================== */

:root {
  /* 覆盖全局色板 */
  --bg: #f7efe3;                        /* 暖奶油纸底 */
  --card: #fffcf6;                      /* 卡片：比纸亮半度 */
  --text: #2a2119;                      /* 深咖啡墨色 */
  --text-sub: #7a6c5c;                  /* 次级文字 */
  --text-faint: #a3947f;                /* 弱化文字 */
  --border: #e8dcc8;                    /* 暖色发丝线 */

  --brand: #c8332b;                     /* 中国红 = 主强调 */
  --brand-dark: #a3241e;
  --brand-soft: rgba(200, 51, 43, .09);

  --team-m: #ef7d1a;                    /* M 队：篮球橙 */
  --team-k: #0f96b4;                    /* K 队：压深青（海报暖底上的对比色） */

  --ink: #fff8ee;                       /* 彩色底上的浅色字（保证对比度） */
  --radius: 18px;
  --shadow: 0 2px 10px rgba(90, 62, 34, .06);
  --shadow-2: 0 10px 30px rgba(90, 62, 34, .14);
}

/* ---------- 基底：纸面上淡淡的印泥晕染 ---------- */
body {
  background:
    radial-gradient(1100px 480px at 50% -160px, rgba(200, 51, 43, .06), transparent 62%),
    radial-gradient(900px 440px at 90% 16vh, rgba(239, 125, 26, .05), transparent 60%),
    var(--bg);
  color: var(--text);
}

/* 数字统一用等宽 + 粗体：比分、场均、场次对得齐 */
.game-score, .rank-val, .rank-num, .stat-grid .num, .metric-row .v,
.pcard-stats b, .record-big, .cmp-table td, .stat-table td, .hero-tag {
  font-variant-numeric: tabular-nums;
}

a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* ---------- 顶部导航：纸面磨砂 ---------- */
.site-header {
  background: rgba(255, 252, 246, .86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.site-logo { font-weight: 800; letter-spacing: .5px; color: var(--text); }
.logo-dot { color: var(--brand); }

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after { background: var(--text); }

.nav-links a { color: var(--text-sub); font-weight: 500; }
.nav-links a:active { background: rgba(200, 51, 43, .06); }
.nav-links a[aria-current="page"] { color: var(--brand); }

/* ---------- 布局 / 卡片 ---------- */
.page-title { color: var(--text); }
.page-sub { color: var(--text-sub); }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* 栏目标题：红色小竖条 = 「这一节开始了」（海报红杠的呼应） */
.section-title {
  font-weight: 800;
  letter-spacing: .3px;
  justify-content: flex-start;
  gap: 9px;
}
.section-title::before {
  content: "";
  width: 4px;
  height: 15px;
  border-radius: 2px;
  flex: 0 0 auto;
  background: linear-gradient(to bottom, var(--brand), #e05a3a);
}
.section-title .more { margin-left: auto; color: var(--text-faint); font-weight: 400; }
.section-title .more:hover { color: var(--brand); }
.section-note { color: var(--text-faint); }

/* ---------- 公告 ---------- */
.announce-item + .announce-item { border-top: 1px solid var(--border); }
.announce-date { color: var(--text-faint); }
.announce-title { color: var(--text); font-weight: 600; }
.announce-content { color: var(--text-sub); }

/* ---------- 比赛卡 ---------- */
.game-card { border-radius: 12px; }
.game-card:active { background: rgba(200, 51, 43, .04); }
.game-card + .game-card { border-top: 1px solid var(--border); }
.game-meta { color: var(--text-faint); }

.game-score {
  font-size: 21px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: .5px;
  color: var(--text);
}
.game-score .dash { color: var(--text-faint); font-style: normal; }

.team-badge {
  color: var(--ink);
  font-weight: 800;
  font-style: italic;
}
.team-badge.team-m { background: var(--team-m); box-shadow: 0 2px 10px rgba(239, 125, 26, .3); }
.team-badge.team-k { background: var(--team-k); box-shadow: 0 2px 10px rgba(15, 150, 180, .28); }
.team-name { color: var(--text-sub); }

/* ---------- 榜单 Tab / 阶段切换条 ---------- */
.rank-tabs {
  background: rgba(90, 62, 34, .05);
  border: 1px solid var(--border);
}
.rank-tab { color: var(--text-sub); }
.rank-tab.is-active {
  background: var(--brand-soft);
  border: 1px solid rgba(200, 51, 43, .45);
  color: var(--brand);
  font-weight: 700;
  box-shadow: none;
}

.stage-tab {
  background: transparent;
  color: var(--text-sub);
}
.stage-tab.is-active {
  background: var(--brand-soft);
  border-color: rgba(200, 51, 43, .45);
  color: var(--brand);
  font-weight: 700;
}
.stage-num { color: var(--text-faint); }
.stage-tab.is-active .stage-num { color: var(--brand); opacity: .75; }

/* 争霸赛 = 中国红（和海报同一个红）；季后赛 = 青墨 */
.stage-chip.stage-playoff { background: rgba(15, 150, 180, .1); color: var(--team-k); }
.stage-chip.stage-cup { background: var(--brand-soft); color: var(--brand); border: 1px solid rgba(200, 51, 43, .3); }

/* ---------- 排行榜 ---------- */
.rank-num {
  background: rgba(90, 62, 34, .06);
  color: var(--text-faint);
  font-style: italic;
  font-weight: 800;
}
.rank-item:nth-child(1) .rank-num { background: rgba(239, 125, 26, .16); color: #c96a10; }
.rank-item:nth-child(2) .rank-num { background: rgba(90, 62, 34, .1); color: #6f6152; }
.rank-item:nth-child(3) .rank-num { background: rgba(90, 62, 34, .07); color: #85745f; }

.rank-name { color: var(--text); }
.rank-sub { color: var(--text-faint); }
.rank-val {
  font-style: italic;
  font-weight: 800;
  color: var(--text);
}
.rank-item:nth-child(1) .rank-val { color: #c96a10; }
.rank-hint { border-top-color: var(--border); color: var(--text-faint); }

/* ---------- 球员卡 / 球员详情 ---------- */
.pcard {
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.pcard:active { border-color: rgba(15, 150, 180, .5); }
.pcard-name { color: var(--text); }
.pcard-stats { border-top-color: var(--border); }
.pcard-stats b { color: var(--text); }
.pcard-stats > span:first-child b { color: #c96a10; }

.player-hero {
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.player-hero-name { color: var(--text); }
.player-hero-meta { color: var(--text-sub); }

.team-chip { color: var(--ink); font-weight: 700; }
.team-chip.team-m { background: var(--team-m); }
.team-chip.team-k { background: var(--team-k); }
.team-chip.team-x { background: var(--text-faint); }

.stat-grid .num { color: #c96a10; font-weight: 800; font-style: italic; }
.stat-grid .lbl { color: var(--text-sub); }
.stat-line { color: var(--text-sub); }

/* ---------- 表格（技术统计 / 比分） ---------- */
.stat-table th { color: var(--text-sub); border-bottom-color: var(--border); }
.stat-table td { border-bottom-color: var(--border); }
.stat-table .hl { color: #c96a10; }
.cmp-table th, .cmp-table td { border-bottom-color: var(--border); }
.cmp-table thead th { color: var(--text-faint); }
.delta-pos { color: var(--brand); }
.delta-neg { color: #1f8a5d; }
.delta-flat { color: var(--text-faint); }

/* ---------- 接龙 ---------- */
.sg-lg { background: rgba(90, 62, 34, .04); }
.sg-chip { background: rgba(90, 62, 34, .05); color: var(--text); }
.sg-chip.is-me { color: var(--ink); }
.sg-me { color: var(--brand); }
.sg-title { color: var(--text); }

/* 主按钮：中国红，像海报上盖下去的一方印 */
.btn {
  background: linear-gradient(180deg, #d6453a 0%, var(--brand) 100%);
  color: var(--ink);
  box-shadow: 0 5px 16px rgba(200, 51, 43, .26), inset 0 1px 0 rgba(255, 255, 255, .22);
  font-weight: 700;
}
.btn:active { filter: brightness(.94); }
.btn.disabled { background: rgba(90, 62, 34, .08); color: var(--text-faint); box-shadow: none; }
.btn.ghost {
  background: rgba(255, 252, 246, .6);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border);
}
.btn.ghost:active { background: rgba(200, 51, 43, .06); }

/* 次要按钮：描边青，和主操作区分开 */
.btn.secondary {
  background: rgba(15, 150, 180, .07);
  color: var(--team-k);
  box-shadow: inset 0 0 0 1px rgba(15, 150, 180, .4);
}
.btn.secondary:active { background: rgba(15, 150, 180, .13); }
/* 取消报名：不是主操作，做成描边就行，一整块灰会把版面压沉 */
.btn-leave { background: transparent; color: var(--text-sub); box-shadow: inset 0 0 0 1px var(--border); }
.btn-leave:active { background: rgba(90, 62, 34, .05); }
.btn-hint { color: var(--text-faint); }

/* ---------- 球队页 ---------- */
.team-switch button { background: rgba(90, 62, 34, .05); color: var(--text-sub); }
.team-switch button.on[data-team="M"] { background: var(--team-m); border-color: var(--team-m); color: var(--ink); }
.team-switch button.on[data-team="K"] { background: var(--team-k); border-color: var(--team-k); color: var(--ink); }

.record-big { color: var(--text); font-style: italic; font-weight: 800; }
.record-sub { color: var(--text-sub); }
.metric-row { border-bottom-color: var(--border); }
.metric-row .k { color: var(--text-sub); }
.form-item { border-bottom-color: var(--border); }
.form-res { color: var(--ink); font-weight: 700; }
.form-res.w { background: var(--team-m); }
.form-res.l { background: rgba(90, 62, 34, .14); color: var(--text-sub); }
.form-opp { color: var(--text-sub); }

/* ---------- 骨架屏 ---------- */
.sk { background: rgba(90, 62, 34, .08); }
.sk::after {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .5) 50%,
    rgba(255, 255, 255, 0) 100%
  );
}
.sk-pcard { background: var(--card); border: 1px solid var(--border); box-shadow: none; }

/* ---------- 空态 ---------- */
.empty { color: var(--text-faint); }
.empty::before {
  background-color: rgba(90, 62, 34, .05);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3947f' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M8.5 13.5c1 1.2 2.2 1.8 3.5 1.8s2.5-.6 3.5-1.8'/%3E%3C/svg%3E");
}

/* ---------- 身份选择弹层 ---------- */
.id-mask { background: rgba(42, 33, 25, .55); }
.id-sheet {
  background: var(--card);
  border: 1px solid var(--border);
  border-bottom: 0;
  box-shadow: 0 -18px 50px rgba(42, 33, 25, .3);
}
.id-title { color: var(--text); }
.id-sub, .id-team { color: var(--text-faint); }
.id-item:active { background: rgba(200, 51, 43, .05); }
.id-name { color: var(--text); }
.id-cancel { background: rgba(90, 62, 34, .06); color: var(--text-sub); }

/* ---------- 评论区 ---------- */
.cmt-count { color: var(--text-faint); }
.cmt-item { border-bottom-color: var(--border); }
.cmt-chip { background: rgba(90, 62, 34, .06); color: var(--text-faint); }
.cmt-text { color: var(--text); }
.cmt-compose { border-top-color: var(--border); }
.cmt-me { background: rgba(239, 125, 26, .06); border-color: rgba(239, 125, 26, .3); color: var(--text); }
.cmt-change { color: var(--text-faint); }
.cmt-compose textarea {
  background: rgba(255, 252, 246, .8);
  border-color: var(--border);
  color: var(--text);
}
.cmt-compose textarea::placeholder { color: var(--text-faint); }
.cmt-compose textarea:focus { border-color: rgba(200, 51, 43, .5); }

/* ---------- 表单（后台 / 月费页共用） ---------- */
input, select, textarea {
  background: #fffdfa;
  border-color: var(--border);
  color: var(--text);
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input:focus, select:focus, textarea:focus { border-color: rgba(200, 51, 43, .5); outline: none; }
option { background: #fffcf6; color: var(--text); }

/* ---------- 页脚 ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  color: var(--text-faint);
  margin-top: 26px;
  padding-top: 18px;
}
.footer-admin { color: var(--text-faint); }
.footer-admin:active { background: rgba(90, 62, 34, .06); }

/* ---------- 桌面端：内容限宽，视线不散 ---------- */
@media (min-width: 720px) {
  .page { max-width: 680px; }
}

/* ---------- 尊重「减少动效」 ---------- */
@media (prefers-reduced-motion: reduce) {
  img.avatar, main.page { animation: none; }
}

/* ============================================================================
   球员能力雷达（五边形）
   ----------------------------------------------------------------------------
   结构：SVG 雷达图 + 五条横向量条 + 一句判词。
   为什么两套表达并存：雷达图看形状一眼认人，横条给准确数字（手机上尤其
   比五个角的数字好读），判词负责把数据翻译成人话「他擅长什么」。
   ============================================================================ */
.skill-card { overflow: hidden; }
.skill-card .section-title .section-note {
  margin-left: auto;
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
}

.skill-radar {
  display: block;
  width: 100%;
  max-width: 330px;
  height: auto;
  margin: 2px auto 4px;
}

/* 五条维度条 */
.skill-bars { display: grid; gap: 9px; margin-top: 6px; }
.skill-bar-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 46px 46px;
  gap: 9px;
  align-items: center;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.skill-bar-name { color: var(--text); }
.skill-bar-track {
  height: 7px;
  border-radius: 999px;
  background: rgba(90, 62, 34, .1);
  overflow: hidden;
}
.skill-bar-track i {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width .55s cubic-bezier(.2, .8, .3, 1);
}
.skill-bar-val { text-align: right; color: var(--text); font-weight: 700; }
.skill-bar-val small { margin-left: 2px; font-size: 9.5px; font-weight: 400; color: var(--text-faint); }
.skill-bar-raw { text-align: right; color: var(--text-faint); font-size: 11.5px; }

/* 判词：这人擅长什么 */
.skill-verdict {
  margin-top: 15px;
  padding: 13px 14px;
  border-radius: 14px;
  border: 1px solid rgba(15, 150, 180, .22);
  background: rgba(15, 150, 180, .06);
}
.skill-verdict.tone-good { border-color: rgba(239, 125, 26, .3); background: rgba(239, 125, 26, .08); }
.skill-verdict.tone-early { border-color: var(--border); background: rgba(90, 62, 34, .05); }

.skill-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 9px; }
.skill-tag {
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .3px;
}
.tone-steady .skill-tag { background: var(--team-k); }
.tone-early .skill-tag { background: #b3a48e; color: var(--text); }

.skill-note { font-size: 13px; line-height: 1.6; color: var(--text); }
.skill-line {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* 小屏再把维度条缩一点，别挤成两行 */
@media (max-width: 359px) {
  .skill-bar-row { grid-template-columns: 28px minmax(0, 1fr) 40px; }
  .skill-bar-raw { display: none; }
}

/* 桌面上雷达图可以再大一点，图形细节（顶点、网格）看得更清 */
@media (min-width: 720px) {
  .skill-radar { max-width: 380px; }
}