/* ============================================================================
 * px-row-fix-1006AZ5.css  ——  球员评分页排版修正
 * ========================================================================== */

/* ══════════════ 1006AZ5：防止「位置」被压成竖排 ══════════════ */

div[class*="min-w-0"][class*="flex-1"] > div[class*="mt-0.5"] > span {
  flex-shrink: 0;
  white-space: nowrap;
}

span[class*="rounded"][class*="bg-white/5"] {
  flex-shrink: 0;
  white-space: nowrap;
  display: inline-block;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  max-width: none;
  width: auto;
}

@media (max-width: 430px) {
  span[class*="rounded"][class*="bg-white/5"] {
    padding-left: 3px; padding-right: 3px;
    font-size: 10px; line-height: 1.45; letter-spacing: 0;
  }
  div[class*="min-w-0"][class*="flex-1"] > div[class*="mt-0.5"] { gap: 4px; }
}

@media (max-width: 360px) {
  span[class*="rounded"][class*="bg-white/5"] {
    padding-left: 2px; padding-right: 2px; font-size: 9px;
  }
}

/* ============================================================================
 * 1006AZ7：把「最近时间」挪出第二行，避免和右侧「平均分」重叠
 * ============================================================================
 *
 * 【用户需求】2026-10-07：
 *   「时间和评分重叠了」「我要第二张图的效果，把时间的位置改变一下，只要是不遮挡就可以」
 *   「比例还是变了」← 上一版把框撑高了
 *
 * 【上一版为什么把框撑高 —— 真凶找到了】
 *   1006AZ6 里我写了这行：
 *       div[...text-right] > div[...text-xs] { margin-bottom: 15px; }
 *   `margin-bottom` 会**参与父元素高度计算** ⇒ 右侧那块整体往下撑 15px
 *   ⇒ **行高必然变大**。虽然时间用的是 position:absolute（不占位），
 *   但我自己加的 margin 又把高度补回来了。这是我的疏漏，不是页面本身的问题。
 *
 * 【这一版的做法】
 *   ① 时间继续用 position:absolute 挪到右下角（绝对定位不占位，不影响行高）
 *   ② 右侧「平均分」改用 **transform: translateY(-15px)** 上移
 *      ★ transform **不参与高度计算** ⇒ 视觉上让开了，布局尺寸一动不动
 *        这正是 margin 和 transform 的关键区别，也是上一版撑高的根因。
 *   ③ 行外框 position:relative 作为定位参照
 *
 * 【兼容性说明】
 *   ⚠ 第 ③ 条依赖 `:has()`。微信 X5 内核对 :has() 支持存疑，
 *     若不支持则时间会退回「最近的祖先定位」而位置偏移。
 *   ⇒ 兜底：额外给所有球员行按钮的父级 div 一个通用 relative 规则作为备用。
 * ========================================================================== */

/* ---- 1. 行外框成为定位参照 ---- */
div[class*="rounded-2xl"][class*="overflow-hidden"][class*="border"]:has(button[class*="py-3"]) {
  position: relative;
}

/* ---- 2. 「最近时间」钉到右下角 ---- */
div[class*="min-w-0"][class*="flex-1"] > div[class*="mt-0.5"] > span:last-child {
  position: absolute;
  right: 10px;
  bottom: 6px;
  margin: 0;
  font-size: 10px;
  line-height: 1.3;
  color: var(--color-text-secondary, #64748b);
  background: rgba(6, 13, 28, 0.72);
  padding: 1px 5px;
  border-radius: 6px;
  pointer-events: none;
  z-index: 1;
}

/* ---- 3. 右侧「平均分」整块上移让位 ----
   ★ 用 transform 而不是 margin —— transform 不影响布局高度，
     这样「让开位置」和「不撑高框」才能同时成立。 */
div[class*="shrink-0"][class*="text-right"] {
  transform: translateY(-13px);
}

/* ---- 4. 第二行右侧留一点余量，防止文字伸到时间块底下 ----
   只加内边距不加外边距，横向收窄不改变高度。 */
div[class*="min-w-0"][class*="flex-1"] > div[class*="mt-0.5"] {
  padding-right: 6px;
}

/* ---- 5. 窄屏微调 ---- */
@media (max-width: 430px) {
  div[class*="min-w-0"][class*="flex-1"] > div[class*="mt-0.5"] > span:last-child {
    font-size: 9px; right: 8px; bottom: 5px;
  }
  div[class*="shrink-0"][class*="text-right"] { transform: translateY(-12px); }
}