/* =====================================================================
   screens-worldcup.css —— 世界杯预测屏（#screen-worldcup, wcx-*）FC 风 v2。
   复用 theme-fc.css 共享组件（.fc-screen/.fc-bg/.fc-title/.fc-btn/.fc-tabs/
   .fc-row/.fc-badge/.fc-flag/.fc-empty），令牌取 :root 的 --fc-*。
   要点：
   - 国旗一律图片（countries.js flagSrc → <img class="fc-flag wcx-flag">），
     缺图回退 emoji（.wcx-flag-emoji），由 worldcup.js flagEl() 生成。
   - 战绩条 = 一排棱角徽章：命中电光绿大字 / 成功率青 / 奖励金。
   - 比赛卡四态：完赛比分大字（Saira Condensed 斜体）+ 命中(绿)/未中(玫红)
     徽章；今明三按钮（待确认金色呼吸 / 已选电光绿 / 其余灰）；已锁定；未开放。
   - 竖版 1080x1920 默认；横版 1920x1080（body.landscape）赛程两列网格，
     日期组头 / 排行行 / 空态横跨整行。
   ===================================================================== */

/* ---------------- 布局骨架 ---------------- */
#screen-worldcup .wcx-app {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column;
  gap: 22px;
  padding: 48px 44px 32px;
  min-height: 0;
}

/* ---- 顶栏：标题 + 副题 + 刷新/返回 ---- */
.wcx-top { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }
.wcx-head { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.wcx-title { font-size: 54px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wcx-sub {
  font-family: var(--fc-d); font-style: italic; font-weight: 700;
  font-size: 24px; letter-spacing: 6px;
  color: var(--fc-cyan);
  white-space: nowrap;
  padding-left: 26px; /* 与 fc-title::before 短杠对齐 */
}
.wcx-act { padding: 14px 30px; font-size: 26px; flex: 0 0 auto; }
/* 邀请好友：金色描边变体（fc-btn 之上，与排行榜页 .lb2-gold 同款语言） */
.wcx-gold { color: var(--fc-gold); border-color: rgba(245, 196, 81, 0.45); }
.wcx-gold:hover { color: var(--fc-gold); box-shadow: 0 0 18px rgba(245, 196, 81, 0.35); }

/* ---------------- 我的战绩条（棱角徽章排；me 为 null 时 .hidden） ---------------- */
.wcx-mystats { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; flex: 0 0 auto; }
.wcx-stat {
  display: inline-flex; align-items: center;
  padding: 10px 22px;
  background: var(--fc-panel2);
  border: 1px solid var(--fc-stroke);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  font-family: var(--fc-d); font-style: italic; font-weight: 700;
  font-size: 25px; letter-spacing: 1px;
  color: var(--fc-txt-dim);
  white-space: nowrap;
}
/* 命中数：电光绿大字 */
.wcx-stat.hit {
  font-size: 31px;
  color: var(--fc-energy);
  border-color: rgba(21, 227, 113, 0.45);
  background: rgba(21, 227, 113, 0.1);
  text-shadow: 0 0 14px rgba(21, 227, 113, 0.45);
}
/* 成功率：青色 */
.wcx-stat.acc {
  color: var(--fc-cyan);
  border-color: rgba(43, 199, 240, 0.4);
  background: rgba(43, 199, 240, 0.08);
}
/* 奖励：金色 */
.wcx-stat.bonus {
  color: var(--fc-gold);
  border-color: rgba(245, 196, 81, 0.4);
  background: rgba(245, 196, 81, 0.08);
}

/* ---------------- 页签（fc-tabs，竖版两枚平分整行） ---------------- */
.wcx-tabs { flex: 0 0 auto; }
.wcx-tabs .fc-tab { flex: 1 1 0; text-align: center; }

/* ---------------- 列说明行（排行页签用；赛程页签留空 → 折叠） ---------------- */
.wcx-colhead {
  flex: 0 0 auto;
  padding: 0 10px;
  font-family: var(--fc-d); font-style: italic; font-weight: 600;
  font-size: 22px; letter-spacing: 2px;
  color: var(--fc-txt-faint);
}
.wcx-colhead:empty { display: none; }

/* ---------------- 列表容器（玻璃面板，右上/左下斜切） ---------------- */
.wcx-list {
  position: relative;   /* 子元素 offsetTop 以列表为基准 → 打开自动滚到「今天」 */
  display: flex; flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  padding: 16px;
  background: rgba(8, 13, 24, 0.55);
  border: 1px solid var(--fc-stroke);
  backdrop-filter: blur(10px);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}

/* ---------------- 顶部玩法/奖励说明（赛程页签列表首行，一行细条） ---------------- */
.wcx-rules {
  flex: 0 0 auto;
  margin: 0 4px 2px;
  padding: 12px 18px;
  background: rgba(43, 199, 240, 0.07);
  border: 1px solid rgba(43, 199, 240, 0.28);
  border-left: 3px solid var(--fc-cyan);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  font-size: 22px; line-height: 1.45; letter-spacing: 0.5px;
  color: var(--fc-txt-dim);
}

/* ---------------- 日期分组头（电光绿斜体 + 能量短杠 + 右延伸线） ---------------- */
.wcx-datehead {
  display: flex; align-items: center; gap: 16px;
  flex: 0 0 auto;
  margin: 12px 6px 0;
  font-family: var(--fc-d); font-style: italic; font-weight: 800;
  font-size: 29px; letter-spacing: 2px;
  color: var(--fc-energy);
  text-shadow: 0 0 14px rgba(21, 227, 113, 0.35);
}
.wcx-datehead::before {
  content: "";
  width: 10px; height: 0.8em;
  background: linear-gradient(180deg, var(--fc-energy), var(--fc-cyan));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%);
  box-shadow: 0 0 12px rgba(21, 227, 113, 0.5);
}
.wcx-datehead::after {
  content: "";
  flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(21, 227, 113, 0.45), var(--fc-stroke) 55%, transparent);
}

/* ---------------- 比赛卡（左侧能量竖线 + 右上斜切） ---------------- */
.wcx-match {
  display: flex; flex-direction: column; gap: 10px;
  flex: 0 0 auto;
  padding: 16px 24px 20px;
  background: var(--fc-panel2);
  border: 1px solid var(--fc-stroke);
  border-left: 3px solid rgba(21, 227, 113, 0.4);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  transition: background .14s, border-color .14s;
}
.wcx-match:hover { background: rgba(21, 227, 113, 0.05); }
/* 已完赛卡降亮度，左线熄灭 */
.wcx-match.done { background: rgba(9, 14, 24, 0.78); border-left-color: var(--fc-stroke); }
.wcx-match.done:hover { background: rgba(9, 14, 24, 0.78); }

/* 小字行：stage 徽章 + 开球时间 HH:mm */
.wcx-meta { display: flex; align-items: center; gap: 14px; }
.wcx-stage {
  font-family: var(--fc-d); font-style: italic; font-weight: 700;
  font-size: 21px; letter-spacing: 1px;
  color: var(--fc-cyan);
  background: rgba(43, 199, 240, 0.1);
  border: 1px solid rgba(43, 199, 240, 0.35);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  padding: 2px 16px;
  white-space: nowrap;
}
.wcx-stage:empty { display: none; }
.wcx-time {
  font-family: var(--fc-d); font-weight: 600;
  font-size: 23px; letter-spacing: 2px;
  color: var(--fc-txt-dim);
}

/* 两队 + 中间状态区 */
.wcx-row {
  display: grid;
  grid-template-columns: 1fr minmax(360px, auto) 1fr;
  align-items: center; gap: 14px;
}
.wcx-team { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
/* 图片国旗（fc-flag 的加大版） */
.wcx-flag { width: 96px; height: 64px; }
/* 缺图回退 emoji（盒子同尺寸，居中） */
.wcx-flag-emoji {
  font-size: 56px; line-height: 64px; flex: none;
  font-style: normal;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}
.wcx-tname {
  font-weight: 700; font-size: 27px; color: var(--fc-txt);
  max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.wcx-mid { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }

/* ---- 状态①已完赛：比分大字（Saira Condensed 斜体）+ 命中(绿)/未中(玫红)徽章 ---- */
.wcx-score {
  font-family: var(--fc-d); font-style: italic; font-weight: 800;
  font-size: 64px; line-height: 1; letter-spacing: 4px;
  color: #fff;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
  padding-right: 4px; /* 斜体收尾不被裁 */
}
.wcx-result {
  font-family: var(--fc-d); font-style: italic; font-weight: 700;
  font-size: 21px; letter-spacing: 1px;
  padding: 4px 18px; white-space: nowrap;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.wcx-result.hit {
  color: var(--fc-energy);
  background: rgba(21, 227, 113, 0.12);
  border: 1px solid rgba(21, 227, 113, 0.45);
  text-shadow: 0 0 12px rgba(21, 227, 113, 0.4);
}
.wcx-result.miss {
  color: var(--fc-rose);
  background: rgba(251, 77, 106, 0.1);
  border: 1px solid rgba(251, 77, 106, 0.4);
}

/* ---- 状态②③：主胜/平/客胜 三连（棱角按钮 或 锁定后的只读项） ---- */
.wcx-picks { display: flex; gap: 12px; }
.wcx-pick {
  min-width: 118px;
  padding: 12px 18px;
  font-family: var(--fc-d); font-style: italic; font-weight: 700;
  font-size: 25px; letter-spacing: 1px;
  text-align: center; white-space: nowrap;
  color: var(--fc-txt);
  background: var(--fc-panel);
  border: 1px solid var(--fc-stroke-hi);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: .15s;
  user-select: none;
}
button.wcx-pick { cursor: pointer; }
button.wcx-pick:hover {
  color: var(--fc-energy);
  border-color: rgba(21, 227, 113, 0.55);
  box-shadow: 0 0 16px rgba(21, 227, 113, 0.3);
}
span.wcx-pick { cursor: default; }
/* 待确认项：金色填充 + 呼吸光晕（再点一次提交） */
.wcx-pick.confirming {
  color: #221703; font-weight: 800;
  background: linear-gradient(160deg, #ffd984, var(--fc-gold) 45%, #c98f1f);
  border-color: rgba(245, 196, 81, 0.85);
  animation: wcx-pulse 0.9s ease-in-out infinite;
}
@keyframes wcx-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(245, 196, 81, 0.35); }
  50% { box-shadow: 0 0 28px rgba(245, 196, 81, 0.7); }
}
/* 我选中并锁定的项：电光绿实底 */
.wcx-pick.picked {
  color: #03140a; font-weight: 800;
  background: linear-gradient(160deg, var(--fc-energy), #0aa14e);
  border-color: rgba(21, 227, 113, 0.7);
  box-shadow: 0 0 18px rgba(21, 227, 113, 0.35);
}
/* 确认态中「已选」高亮项：电光绿描边 + 微光（区别于灰掉的其余两项） */
.wcx-pick.sel {
  color: var(--fc-energy); font-weight: 800;
  border-color: rgba(21, 227, 113, 0.7);
  background: rgba(21, 227, 113, 0.12);
  box-shadow: 0 0 16px rgba(21, 227, 113, 0.3);
}
button.wcx-pick.sel:hover { color: var(--fc-energy); border-color: rgba(21, 227, 113, 0.7); }

/* ---- 确认态：已选回显 + 显式「确认预测」主按钮 + 取消重选 ---- */
.wcx-sellabel {
  font-family: var(--fc-d); font-style: italic; font-weight: 700;
  font-size: 22px; letter-spacing: 1px;
  color: var(--fc-energy);
  text-shadow: 0 0 12px rgba(21, 227, 113, 0.4);
}
.wcx-cta { display: flex; align-items: stretch; gap: 12px; width: 100%; }
/* 提交按钮：全宽撑满、金色呼吸光晕，第一眼就是「提交」 */
.wcx-submit {
  flex: 1 1 auto;
  padding: 14px 24px;
  font-size: 27px; letter-spacing: 2px;
  animation: wcx-pulse 0.9s ease-in-out infinite;
}
.wcx-cancel {
  flex: 0 0 auto;
  padding: 14px 20px;
  font-size: 22px; letter-spacing: 1px;
  color: var(--fc-txt-dim);
}
.wcx-cancel:hover { color: var(--fc-txt); }
/* 其余两项灰掉 */
.wcx-pick.off { opacity: 0.32; }
button.wcx-pick.off:hover { color: var(--fc-txt); border-color: var(--fc-stroke-hi); box-shadow: none; }

/* ---- 预测人数分布条（卡底整行）：三段堆叠条 主胜绿/平银灰/客胜青 +
   各段小字人数（与按钮列 home/draw/away 顺序对位）。m.picks 不存在时
   worldcup.js 不渲染该节点（旧服务端整条隐藏）；合计 0 → .empty 均分灰条
   + 「暂无预测」小字（居中）。 ---- */
.wcx-dist { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.wcx-dist-bar {
  display: flex; gap: 2px;
  height: 10px;
  background: rgba(255, 255, 255, 0.05);
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}
/* 各段宽度由 worldcup.js 按人数占比写 flex-grow（0 人段自然塌为 0 宽） */
.wcx-seg { flex: 0 1 auto; min-width: 0; }
.wcx-seg.home { background: linear-gradient(90deg, rgba(21, 227, 113, 0.9), rgba(21, 227, 113, 0.55)); }
.wcx-seg.draw { background: rgba(205, 216, 236, 0.4); }
.wcx-seg.away { background: linear-gradient(90deg, rgba(43, 199, 240, 0.55), rgba(43, 199, 240, 0.9)); }
.wcx-dist.empty .wcx-seg { background: rgba(255, 255, 255, 0.09); }
.wcx-dist-nums {
  display: flex; justify-content: space-between; gap: 10px;
  font-family: var(--fc-d); font-style: italic; font-weight: 600;
  font-size: 19px; letter-spacing: 1px; line-height: 1;
  color: var(--fc-txt-faint);
}
.wcx-dn.home { color: var(--fc-energy); }
.wcx-dn.draw { color: var(--fc-txt-dim); }
.wcx-dn.away { color: var(--fc-cyan); }
.wcx-dist.empty .wcx-dist-nums { justify-content: center; }
.wcx-dn.none { color: var(--fc-txt-faint); }

/* 确认提示（仅一次不可修改）/ 已锁定 / 未开放或已截止 */
.wcx-hint { font-size: 20px; color: var(--fc-gold); white-space: nowrap; letter-spacing: 1px; }
.wcx-lockbadge {
  font-family: var(--fc-d); font-style: italic; font-weight: 600;
  font-size: 20px; letter-spacing: 2px;
  color: var(--fc-txt-faint);
}
.wcx-closed {
  font-family: var(--fc-d); font-style: italic; font-weight: 600;
  font-size: 24px; letter-spacing: 1px;
  color: var(--fc-txt-faint);
  padding: 18px 0;
}

/* ---------------- 预测排行页签（fc-row + wcx-r* 列） ---------------- */
.wcx-rrow { gap: 18px; padding: 16px 24px; flex: none; }
.wcx-rank {
  flex: none; width: 64px; text-align: center;
  font-family: var(--fc-d); font-style: italic; font-weight: 800;
  font-size: 30px;
  color: var(--fc-txt-faint);
}
.wcx-rank.r1 { font-size: 40px; color: #ffd75e; text-shadow: 0 0 16px rgba(255, 215, 94, 0.55); }
.wcx-rank.r2 { font-size: 35px; color: #d7e2f2; text-shadow: 0 0 12px rgba(200, 220, 255, 0.45); }
.wcx-rank.r3 { font-size: 32px; color: #e8995c; text-shadow: 0 0 12px rgba(230, 153, 92, 0.45); }
/* 排行小国旗：emoji 回退 / 无旗占位（撑住列对齐） */
.wcx-flag-emoji.sm { font-size: 32px; line-height: 27px; }
.wcx-flag-ph { width: 40px; height: 27px; flex: none; }
.wcx-rmain { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; overflow: hidden; }
.wcx-rname {
  font-weight: 700; font-size: 27px; color: var(--fc-txt);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.wcx-rrec { flex: none; min-width: 110px; text-align: right; font-size: 23px; color: var(--fc-txt-dim); }
.wcx-acc {
  flex: none; min-width: 110px; text-align: right;
  font-family: var(--fc-d); font-style: italic; font-weight: 700;
  font-size: 27px; color: var(--fc-cyan);
}
.wcx-rval {
  flex: none; min-width: 84px; text-align: right;
  font-family: var(--fc-d); font-style: italic; font-weight: 800;
  font-size: 34px; color: var(--fc-energy);
  text-shadow: 0 0 12px rgba(21, 227, 113, 0.4);
}
/* 我的行：金色左线 + 淡金底（盖过 fc-row hover 的绿） */
.wcx-me, .wcx-me:hover {
  border-left-color: var(--fc-gold);
  background: rgba(245, 196, 81, 0.08);
  box-shadow: inset 0 0 16px rgba(245, 196, 81, 0.06);
}

/* ---------------- 状态行 ---------------- */
.wcx-status {
  flex: 0 0 auto;
  min-height: 36px;
  text-align: center;
  font-size: 25px; letter-spacing: 1px;
  color: var(--fc-gold);
}

/* ---------------- 动效弱化 ---------------- */
@media (prefers-reduced-motion: reduce) {
  .wcx-pick, .wcx-match { transition: none; }
  .wcx-pick.confirming { animation: none; box-shadow: 0 0 18px rgba(245, 196, 81, 0.5); }
  .wcx-submit { animation: none; box-shadow: 0 0 18px rgba(245, 196, 81, 0.5); }
}

/* =====================================================================
   ★ 横版 1920x1080（body.landscape，由 https://d1u4k7xc6u3yed.cloudfront.net/agent-soccer/js/app.js fitStage() 切换）。
   赛程列表两列网格（日期组头 / 排行行 / 空态横跨整行），整体字号收紧。
   ===================================================================== */
body.landscape #screen-worldcup .wcx-app { padding: 32px 64px 24px; gap: 16px; }
body.landscape #screen-worldcup .wcx-title { font-size: 44px; }
body.landscape #screen-worldcup .wcx-sub { font-size: 20px; letter-spacing: 5px; }
body.landscape #screen-worldcup .wcx-act { padding: 11px 26px; font-size: 23px; }
body.landscape #screen-worldcup .wcx-stat { padding: 8px 20px; font-size: 23px; }
body.landscape #screen-worldcup .wcx-stat.hit { font-size: 28px; }
body.landscape #screen-worldcup .wcx-tabs .fc-tab { flex: 0 0 auto; padding: 10px 46px; }
body.landscape #screen-worldcup .wcx-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
  align-content: start;
}
body.landscape #screen-worldcup .wcx-rules,
body.landscape #screen-worldcup .wcx-datehead,
body.landscape #screen-worldcup .wcx-list .fc-empty,
body.landscape #screen-worldcup .wcx-list .fc-row { grid-column: 1 / -1; }
body.landscape #screen-worldcup .wcx-rules { padding: 10px 16px; font-size: 20px; }
body.landscape #screen-worldcup .wcx-submit { padding: 11px 20px; font-size: 23px; }
body.landscape #screen-worldcup .wcx-cancel { padding: 11px 16px; font-size: 20px; }
body.landscape #screen-worldcup .wcx-sellabel { font-size: 20px; }
body.landscape #screen-worldcup .wcx-row { grid-template-columns: 1fr minmax(320px, auto) 1fr; }
body.landscape #screen-worldcup .wcx-match { padding: 13px 20px 16px; }
body.landscape #screen-worldcup .wcx-flag { width: 72px; height: 48px; }
body.landscape #screen-worldcup .wcx-flag-emoji { font-size: 42px; line-height: 48px; }
body.landscape #screen-worldcup .wcx-tname { font-size: 24px; }
body.landscape #screen-worldcup .wcx-score { font-size: 50px; letter-spacing: 3px; }
body.landscape #screen-worldcup .wcx-pick { min-width: 100px; padding: 9px 14px; font-size: 22px; }
/* 横版两列网格卡内更紧：分布条收薄、数字字号收小 */
body.landscape #screen-worldcup .wcx-dist { gap: 4px; margin-top: 0; }
body.landscape #screen-worldcup .wcx-dist-bar { height: 8px; }
body.landscape #screen-worldcup .wcx-dist-nums { font-size: 17px; }
body.landscape #screen-worldcup .wcx-rrow { padding: 12px 24px; }
body.landscape #screen-worldcup .wcx-status { min-height: 30px; font-size: 22px; }