/*
 * HTML 计分板样式。移植自 D:\playcs\Scoreboard（Svelte 参考实现，
 * 原始组件源码从 build/bundle.js.map 的 sourcesContent 还原）。
 *
 * 与参考实现的差异：
 *  - 参考的 CSS 全是绝对像素（它跑在固定尺寸 web view 里）。这里保留同一套
 *    设计稿数值，但整块用 --sb-scale 做统一缩放，避免像底栏那样受 --hx/--hy
 *    双轴脱钩的影响（见 TASK-web-hud.md「已知问题：宽高比适配」）。
 *  - 去掉 Money 列（CS:S 的 m_iAccount 受 PVS 裁剪，队友数据不可靠）。
 *  - 去掉 Assists 列（CS:S 引擎里不存在助攻统计）与 Score 列
 *    （GetPlayerScore() 在 CS:S 就等于击杀数，和 K 列重复）。
 *    三者的列宽 class（.c64 / .c46）都留着，将来要加回来只需改渲染。
 *  - 修掉参考的一个 bug：它 CT 区块显示的是 T 的比分（分数与队名取自不同队伍）。
 */

@font-face {
  font-family: "Stratum2";
  src: url("../fonts/stratum2light.ttf") format("truetype");
  font-weight: 100;
  font-display: swap;
}
@font-face {
  font-family: "Stratum2";
  src: url("../fonts/stratum2regular.ttf") format("truetype");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Stratum2";
  src: url("../fonts/stratum2medium.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Stratum2";
  src: url("../fonts/stratum2bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

/* 缩放锚点：外层负责定位与 --sb-scale，内层是 960px 设计稿 */
#web-scoreboard {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
#web-scoreboard[hidden] {
  display: none !important;
}

.sb-scale {
  transform: scale(var(--sb-scale, 1));
  transform-origin: center center;
}

.sb-root {
  /* 列宽同时被玩家行和列头引用，改一处两边一起动，避免再对不齐 */
  --sb-col-status: 26px;
  --sb-col-ping: 36px;
  --sb-col-level: 28px;
  --sb-row-h: 26px;
  --sb-row-gap: 2px;
  /* 每队不滚动时最多显示几人；超出走滚动条（webScoreboard.js 里同名常量要跟着改） */
  --sb-rows: 10;

  box-sizing: border-box;
  width: 960px;
  /* 下内边距和 .sb-header 的 padding-top 对称。没有它的话，最后一个子元素的
     margin-bottom 会从这里的底边塌陷出去，面板底部就贴边了。 */
  padding: 0 20px 22px;
  background-color: #131313f0;
  /* Stratum2 无中文字形，中文玩家名回落到系统字体 */
  font-family: Stratum2, "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  font-weight: 300;
  letter-spacing: 0;
  color: #d0d0d0;
  user-select: none;
}
/* 末尾区块（没观战者时是 T 队）的下边距交给 .sb-root 的 padding-bottom */
.sb-root > *:last-child {
  margin-bottom: 0;
}

/* ---------- 顶部：地图 / 时间 / 服务器名 ---------- */

.sb-header {
  color: #979492;
  margin-bottom: 8px;
  padding-top: 22px;
}
.sb-gameinfo {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.sb-gametype {
  width: 36px;
  height: 24px;
  flex: 0 0 auto;
  opacity: 0.7;
  background: url("sb/casual.svg") no-repeat center / contain;
}
.sb-mapname,
.sb-maptime {
  padding-top: 2px;
  margin-left: 5px;
  font-size: 15px;
  font-weight: 700;
  width: 100%;
}
.sb-maptime {
  text-align: end;
  white-space: nowrap;
}
.sb-divider {
  border-bottom: 1px solid currentColor;
  color: #42413f;
  margin-top: 5px;
  margin-bottom: 12px;
}
.sb-servername {
  text-align: end;
  font-size: 12px;
  margin-bottom: 24px;
}

/* ---------- 列头 ---------- */

/*
 * 列头要和玩家行对齐，所以左边距 = 队伍信息列的实际宽度（.sb-logo-wrap 的
 * 121px 减去 -20px 外边距 = 101px），右边距 = 滚动条槽宽（见 .sb-players）。
 */
.sb-labels-wrap {
  display: flex;
  margin-left: 101px;
  margin-bottom: 2px;
  margin-right: 10px;
}
/*
 * 占满一整个 ping 列格，图标居中。左边距 = 状态列宽度（.sb-status 的 26px，
 * 注意它覆盖了 .sb-item 的 36px —— 同特异度、后定义者胜）。
 */
.sb-ping-icon {
  width: var(--sb-col-ping);
  height: 16px;
  flex: 0 0 auto;
  margin-left: var(--sb-col-status);
  opacity: 0.9;
  background: url("sb/ping.svg") no-repeat center center;
  background-size: 16px 16px;
}
.sb-labels {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: flex-end;
}
.sb-label {
  font-size: 12px;
  color: #bebebe;
  text-align: center;
  width: 36px;
}
.sb-label.c64 { width: 64px; }
.sb-label.c46 { width: 46px; }

/* ---------- 队伍区块 ---------- */

.sb-team {
  display: flex;
  margin-bottom: 24px;
}
.sb-team.is-ct { color: #b5d4ee; }
.sb-team.is-t { color: #ead18a; }

.sb-teaminfo-col {
  flex: 0 0 auto;
}
.sb-logo-wrap {
  margin-left: -20px;
  width: 121px;
}
.sb-logo {
  width: 81px;
  height: 81px;
  opacity: 0.5;
  margin-left: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.sb-team.is-ct .sb-logo { background-image: url("sb/ct_logo.svg"); }
.sb-team.is-t .sb-logo { background-image: url("sb/t_logo.svg"); }

.sb-teaminfo {
  width: 81px;
  text-align: center;
}
/* 比分压在队标上方 */
.sb-teaminfo.sb-score {
  position: relative;
  width: 121px;
  height: 81px;
  margin-top: -81px;
  font-size: 64px;
  line-height: 76px;
  font-weight: 700;
  letter-spacing: -3px;
  text-shadow: 0 2px 3px black;
}
.sb-caption { font-size: 12px; }
.sb-uppercase { text-transform: uppercase; }
/* COUNTER-TERRORISTS 在 81px 宽里靠连字符自然折行成两行 */
.sb-teamname {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.15;
}
.sb-alive {
  margin-top: 2px;
  opacity: 0.6;
  letter-spacing: 0.4px;
}

/* ---------- 玩家行 ---------- */

.sb-players {
  position: relative; /* 让玩家行的 offsetTop 相对名单区，自动滚到本地玩家时要用 */
  width: 100%;
  min-width: 0;
  /*
   * 固定高度而非 max-height：不足 10 人时下方留空，整块高度恒定，
   * 计分板不会随人数进出而伸缩（CS2 也是这个行为）。
   */
  height: calc(var(--sb-rows) * (var(--sb-row-h) + var(--sb-row-gap)));
  /* 用 scroll 而非 auto：始终占住 10px 槽宽，人数变化时列头不会跟着左右跳 */
  overflow-y: scroll;
}
.sb-players::-webkit-scrollbar { width: 10px; }
/* 轨道保持全透明：滚动槽是常驻的，只有滑块出现才代表「还有人没显示」 */
.sb-players::-webkit-scrollbar-track { background-color: transparent; }
/*
 * 比参考实现（0.068）明显：游戏内没有鼠标指针，滑块是玩家判断
 * 「下面还有人、可以滚轮翻」的唯一提示。
 */
.sb-players::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.28);
  border-radius: 5px;
}

.sb-player {
  display: flex;
  margin-top: var(--sb-row-gap);
  height: var(--sb-row-h);
  background-color: #ffffff26;
}
.sb-player.is-dead {
  background-color: transparent;
}
/* 死亡行只淡化文字/头像，状态图标保持原色（红骷髅、白骷髅才看得清） */
.sb-player.is-dead .sb-ping,
.sb-player.is-dead .sb-level,
.sb-player.is-dead .sb-avatar,
.sb-player.is-dead .sb-clan,
.sb-player.is-dead .sb-name,
.sb-player.is-dead .sb-cells.is-right {
  opacity: 0.3;
}
.sb-team.is-ct .sb-player.is-local { background-color: #85b2d852; }
.sb-team.is-t .sb-player.is-local { background-color: #ead18a4d; }
.sb-player.is-savior { box-shadow: inset 3px 0 0 #f0c84a; }
/* 必须盖过后面的 .sb-item { width:36px }，否则三字被挤成竖排只露出「救」 */
.sb-item.sb-savior-tag {
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  margin-left: 6px;
  padding: 0 6px;
  height: 16px;
  line-height: 16px;
  font-size: 11px;
  font-weight: 700;
  color: #131313;
  background: #f0c84a;
  border-radius: 2px;
  letter-spacing: 0;
  white-space: nowrap;
  writing-mode: horizontal-tb;
  overflow: visible;
  text-align: center;
}

.sb-cells {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
}
.sb-cells.is-left { justify-content: flex-start; }
.sb-cells.is-right { justify-content: flex-end; }

.sb-item {
  width: 36px;
  flex: 0 0 auto;
  text-align: center;
  font-size: 14px;
}
.sb-item.c64 { width: 64px; }
.sb-item.c46 { width: 46px; }

/* 注意：和 .sb-item 同特异度，靠「后定义者胜」把 36px 覆盖成 26px */
.sb-status {
  width: var(--sb-col-status);
  height: var(--sb-row-h);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.sb-status.is-dead { background-image: url("sb/dead.svg"); }
.sb-status.is-nemesis { background-image: url("sb/nemesis.svg"); }
.sb-status.is-dominated { background-image: url("sb/dominated.svg"); }
.sb-status.is-vip { background-image: url("sb/vip.svg"); }
.sb-status.is-bomb { background-image: url("sb/bomb.svg"); }
.sb-status.is-defuser { background-image: url("sb/defuser.svg"); }

/* 字号沿用 .sb-item 的 14px，和 K / D 列一致 */
.sb-ping {
  width: var(--sb-col-ping);
  color: #bebebe;
  text-transform: uppercase;
}

/*
 * Profile 等级图标。用大厅那套现成素材 lobby/images/profile_rank/{1..40}.png
 * （64×64），和原 VGUI 计分板的 profile_rank/%d 材质同源。
 * URL 在 webScoreboard.js 里设置：游戏走 hud.data 的 blob，预览走 lobby/images/profile_rank。
 */
.sb-level {
  width: var(--sb-col-level);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sb-level-icon {
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
/* 没有账号头像时回落到阵营剪影（跟参考一致） */
.sb-avatar {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 1px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.sb-team.is-ct .sb-avatar { background-image: url("sb/avatar-ct.png"); }
.sb-team.is-t .sb-avatar { background-image: url("sb/avatar-terrorist.png"); }
.sb-clan {
  flex: 0 0 auto;
  width: max-content;
  white-space: nowrap;
  font-weight: 700;
  margin-left: 8px;
  margin-right: -3px;
  font-size: 14px;
}
.sb-name {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  text-align: start;
  margin-left: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 统计格底色：存活行才加，死亡行留空（跟参考一致） */
.sb-item.is-hl { background-color: #ffffff12; }
.sb-item.is-hl2 { background-color: #ffffff26; }
.sb-item.is-hl,
.sb-item.is-hl2 {
  height: 26px;
  line-height: 26px;
}
.sb-mvp {
  color: #f0c84a;
  white-space: nowrap;
}

/* ---------- 观战行 ---------- */

.sb-spectator {
  display: flex;
  margin-bottom: 24px;
  margin-left: 127px;
  color: #d0d0d0;
}
.sb-spectator .sb-player {
  background-color: transparent;
  opacity: 0.3;
  width: 100%;
  min-width: 0;
}
.sb-spectator .sb-name { margin-left: 28px; }