/* px-lineup-1006.css —— 配套 px-lineup-1006.js
 * 主站是深色主题（--pitch-900 = rgb(6,13,28)），这里全部按深色底 + 浅色字走。
 * 只加新类名 px-lu-*，不覆盖任何既有 class。
 *
 * ★★ 1006N-4 结构（用户 2026-10-06 定稿）：
 *    卡片自带的外框（React 渲染的 result 色框：border + rounded-3xl + p-1）
 *    ┌────────────────────────────────────────┐  ← 这个框是 App 自己的，白拿
 *    │ ┌────────────────────────────────────┐ │
 *    │ │ 比分区（App 自带，bg-pitch-900）      │ │
 *    │ └────────────────────────────────────┘ │
 *    │ ┌ px-lu-wrap ───────────────────────┐ │  ← 我们加的，**不画边框**
 *    │ │ img.px-lu-duel  对比条（已抠底透明） │ │
 *    │ │ div.px-lu-row   对手阵容 … 4-1-1-4 › │ │
 *    │ └────────────────────────────────────┘ │
 *    └────────────────────────────────────────┘
 *    ⇒ 「比分 + 对比条 + 对手阵容」三样在同一个框里；
 *      卡片底部的 meta 行（时间/vs/详情）在框外，不受影响。
 */

/* ---------------- 我们的面板（不带边框，框由 App 外框提供） ---------------- */
.px-lu-wrap{
  margin-top:4px;
  border-radius:20px;
  background:#060d1c;              /* = App 的 bg-pitch-900，和比分区同色 */
  overflow:hidden;                 /* 让对比条跟着圆角裁切 */
  box-shadow:0 10px 15px -3px rgba(0,0,0,.4), 0 4px 6px -4px rgba(0,0,0,.4);
}
/* 对比条：canvas 已把深绿底色抠成透明，这里只要铺满整宽 */
.px-lu-duel{ display:block; width:100%; height:auto; }

/* ---------------- 「对手阵容」入口行 ---------------- */
.px-lu-row{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px;
  cursor:pointer;
  transition:background .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.px-lu-row:hover{ background:rgba(56,189,248,.09); }

.px-lu-thumb{
  flex:0 0 auto; width:38px; height:38px; border-radius:10px;
  object-fit:cover; object-position:50% 46%;
  background:#101c33; border:1px solid rgba(255,255,255,.10);
  display:block;
}
.px-lu-txt{ min-width:0; flex:1 1 auto; }
.px-lu-t{ font-size:14px; font-weight:600; color:#e2e8f0; line-height:1.25; }
.px-lu-s{ margin-top:1px; font-size:11.5px; color:#64748b; line-height:1.3; }
.px-lu-f{
  flex:0 0 auto;
  font-size:13px; font-weight:700; line-height:1;
  color:#fff; background:#1a9c4e;
  border-radius:8px; padding:5px 9px;
  letter-spacing:.4px; font-variant-numeric:tabular-nums;
}
.px-lu-c{ flex:0 0 auto; color:#475569; font-size:18px; line-height:1; margin-top:-2px; }
.px-lu-row:hover .px-lu-c{ color:#7dd3fc; }

/* ---------------- 整图弹层 ---------------- */
.px-lu-lb{
  position:fixed; inset:0; z-index:2147483000;
  display:none; align-items:flex-start; justify-content:center;
  background:#020617;
  padding:14px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.px-lu-lb.on{ display:flex; }
html.px-lu-open, html.px-lu-open body{ overflow:hidden; }

.px-lu-box{
  width:100%; max-width:520px;
  display:flex; flex-direction:column; gap:14px;
  margin:auto;
}
.px-lu-fig{ display:flex; flex-direction:column; gap:6px; }
.px-lu-cap{
  font-size:12px; color:#94a3b8; letter-spacing:.4px;
  text-align:center;
}
.px-lu-full{
  width:100%; height:auto; display:block;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 50px rgba(0,0,0,.55);
  background:#0b1220;
}

.px-lu-x{
  position:fixed; top:12px; right:12px;
  width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(15,23,42,.72);
  color:#e2e8f0; font-size:24px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.px-lu-x:hover{ border-color:rgba(56,189,248,.55); color:#7dd3fc; }

@media (max-width:400px){
  .px-lu-thumb{ width:34px; height:34px; }
  .px-lu-t{ font-size:13.5px; }
  .px-lu-s{ font-size:11px; }
  .px-lu-f{ font-size:12px; padding:4px 8px; }
}

/* ---------------- 1006Q：卡片「最外围的框子」统一成绿色 ---------------- */
/* 用户 2026-10-06 15:4x 三次确认：
 *   「把框的颜色都改成这样的绿色」→「这里有红色的 灰色的，都改成绿色的」→「最外围的框子」
 *
 * App 是**按比赛结果**给卡片最外框上色的（Tailwind 原子类，见下），所以三种结果三种颜色：
 *   胜 → border-rose-500/35    + bg-rose-500/[0.07]      红
 *   负 → border-emerald-500/35 + bg-emerald-500/[0.07]   绿  ← 用户要的就是这个绿
 *   平 → border-white/15       + bg-white/[0.04]         灰
 * 这里把三种**一律**改成「负」那种绿：
 *   边框 emerald-500 @35%  → rgba(16,185,129,.35)
 *   底衬 emerald-500 @7%   → 只体现在 p-1 那 4px 内圈，不会盖住里面任何内容
 *
 * ★为什么用 !important 而不是改 App 的 bundle：
 *   项目约定是「dist/ 加独立 CSS/JS + index.html 追加引用」，主站是打包产物，不碰 React bundle。
 * ★为什么选择器写这么宽（.border 和 [class*=] 都写）：
 *   App 以后若把 rose 换成 red、或改成别的绿，这条规则**照样压得住**，不用再改一次。
 * ★1006AD（2026-10-06 19:4x）用户改成方案A：
 *   「整个框内都要网页的底色，杂色都去掉」→ 描边保留，只去掉框内那层淡青底衬。
 *   即把 background-color 由 emerald 7% 改成 transparent，边框一字未动。
 *   回滚：cp /opt/poxiao/client/dist/assets/px-lineup-1006.css.bak_1006AD_20261006_193842 /opt/poxiao/client/dist/assets/px-lineup-1006.css 并把 index.html 的版本号改回 1006R
 * ★范围严格限定在卡片外框：button.group.block 里的 div.rounded-3xl.border
 *   （实测全站 100 个 div.rounded-3xl 恰好就是 100 张卡片的外框，不会误伤别处）。 */
button.group.block div.rounded-3xl.border,
button.group.block div.rounded-3xl[class*="border-rose-"],
button.group.block div.rounded-3xl[class*="border-emerald-"],
button.group.block div.rounded-3xl[class*="border-white/"]{
  border-color: rgba(16,185,129,.35) !important;
  background-color: transparent !important;
}