/* =====================================================================
   screens-history-fc.css —— 战报记录屏（hist- 前缀，FC 风）。
   共享组件来自 theme-fc.css（fc-screen/fc-bg/fc-title/fc-btn/fc-row/
   fc-badge/fc-card/fc-empty）；版式语言对齐排行榜（screens-lbst-fc.css
   的 lb2-）：竖版（1080x1920，默认）整列纵排，横版（body.landscape，
   1920x1080）列表居中加宽 ~1400px。
   ===================================================================== */

.hist-app {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column;
  gap: 26px;
  padding: 56px 44px 40px;
}

/* ---- 顶栏：标题占满左侧，右侧刷新 / 返回 ---- */
.hist-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hist-top .fc-title { flex: 1 1 auto; font-size: 54px; }
.hist-top .fc-btn { padding: 13px 26px; font-size: 25px; }

/* ---- 列表容器 ---- */
.hist-list {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding: 14px;
  background: rgba(8, 13, 26, 0.5);
  border: 1px solid var(--fc-stroke);
}

/* ---- 战报行（history.js 以 .fc-row.hist-row 生成，可点开详情） ---- */
.hist-row { cursor: pointer; gap: 18px; padding: 18px 22px; flex: none; }

/* 时间（M月d日 HH:mm） */
.hist-time {
  flex: none; width: 210px;
  font-family: var(--fc-d); font-style: italic; font-weight: 600;
  font-size: 24px; letter-spacing: 1px;
  color: var(--fc-txt-dim);
}

/* 类型徽章（fc-badge 之上定宽对齐两列） */
.hist-kind { flex: none; min-width: 130px; justify-content: center; }

/* 对阵：我方名（电光绿）· 比分大字 · 对方名 */
.hist-vs {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  gap: 22px;
  overflow: hidden;
}
.hist-name {
  max-width: 38%;
  font-size: 29px; font-weight: 600;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.hist-name.me { color: var(--fc-energy); text-shadow: 0 0 12px rgba(21, 227, 113, 0.25); }
.hist-name.opp { color: var(--fc-txt); }

/* 比分（Saira Condensed 斜体大字，按我的视角胜负着色） */
.hist-score {
  flex: none;
  font-family: var(--fc-d); font-style: italic; font-weight: 800;
  font-size: 42px; line-height: 1; letter-spacing: 2px;
  white-space: nowrap;
}
.hist-score.win { color: var(--fc-energy); text-shadow: 0 0 14px rgba(21, 227, 113, 0.35); }
.hist-score.draw { color: #c9d4e8; text-shadow: 0 0 14px rgba(201, 212, 232, 0.3); }
.hist-score.lose { color: var(--fc-rose); text-shadow: 0 0 14px rgba(251, 77, 106, 0.35); }

/* 胜负徽章：胜=绿 W / 平=银 D / 负=红 L（斜切小方块） */
.hist-wdl {
  flex: none; width: 54px; height: 54px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--fc-d); font-style: italic; font-weight: 800;
  font-size: 30px; line-height: 1;
  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);
}
.hist-wdl.win { color: #03140a; background: linear-gradient(160deg, var(--fc-energy), #0aa14e); border-color: rgba(21, 227, 113, 0.7); box-shadow: 0 0 14px rgba(21, 227, 113, 0.35); }
.hist-wdl.draw { color: #0b1322; background: linear-gradient(160deg, #e6edf8, #9fb0cb); border-color: rgba(201, 212, 232, 0.7); box-shadow: 0 0 12px rgba(201, 212, 232, 0.25); }
.hist-wdl.lose { color: #1c060b; background: linear-gradient(160deg, var(--fc-rose), #b81f3d); border-color: rgba(251, 77, 106, 0.7); box-shadow: 0 0 14px rgba(251, 77, 106, 0.3); }

/* ---- 状态行 ---- */
.hist-status { min-height: 32px; font-size: 24px; color: var(--fc-txt-dim); }

/* =====================================================================
   详情浮层（history.js 动态创建，挂在 #screen-history 内随舞台缩放）
   ===================================================================== */

.hist-mask {
  position: absolute; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  background: rgba(2, 5, 10, 0.66);
  backdrop-filter: blur(5px);
}
.hist-card {
  width: min(840px, calc(100% - 72px));
  padding: 44px 48px 38px;
  display: flex; flex-direction: column; align-items: center;
  gap: 26px;
}

/* 头部：小标题 + 类型徽章 + 时间 */
.hist-d-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; }
.hist-d-title {
  font-family: var(--fc-d); font-style: italic; font-weight: 700;
  font-size: 26px; letter-spacing: 2px;
  color: var(--fc-txt-dim); text-transform: uppercase;
}
.hist-d-time {
  font-family: var(--fc-d); font-style: italic; font-weight: 600;
  font-size: 24px; color: var(--fc-txt-faint);
}

/* 对阵 + 大比分 */
.hist-d-vs {
  display: flex; align-items: center; justify-content: center;
  gap: 30px;
  max-width: 100%;
}
.hist-d-vs .hist-name { max-width: 240px; font-size: 34px; }
.hist-score.big { font-size: 88px; letter-spacing: 4px; }

/* 胜负行（复用 st.win/lose/draw 文案） */
.hist-d-res {
  font-family: var(--fc-d); font-style: italic; font-weight: 800;
  font-size: 32px; letter-spacing: 3px;
}
.hist-d-res.win { color: var(--fc-energy); }
.hist-d-res.draw { color: #c9d4e8; }
.hist-d-res.lose { color: var(--fc-rose); }

/* 状态行（拉取中 / 失败） */
.hist-d-status { min-height: 30px; font-size: 23px; color: var(--fc-txt-dim); text-align: center; }
.hist-d-status.err { color: var(--fc-rose); }

/* 按钮行：▶ 回放 / 关闭 */
.hist-d-actions { display: flex; gap: 20px; }
.hist-d-actions .fc-btn { min-width: 220px; }

/* 回放按钮拉取中转圈（fc-btn 之上） */
.fc-btn.loading::after {
  content: "";
  width: 22px; height: 22px; flex: none;
  border: 3px solid rgba(3, 20, 10, 0.3);
  border-top-color: #03140a;
  border-radius: 50%;
  animation: hist-spin 0.8s linear infinite;
}
@keyframes hist-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .fc-btn.loading::after { animation: none; }
}

/* =====================================================================
   ★ PC 横屏（1920x1080）—— 仅 body.landscape 下生效（https://d1u4k7xc6u3yed.cloudfront.net/agent-soccer/js/app.js fitStage）。
   竖版规则不动，以下全部是追加覆盖：整列居中、最大宽 1400。
   ===================================================================== */

body.landscape #screen-history .hist-app {
  gap: 18px;
  padding: 36px 0 26px;
}
body.landscape #screen-history .hist-app > * {
  width: min(1400px, calc(100% - 96px));
  margin-left: auto;
  margin-right: auto;
}
body.landscape #screen-history .hist-top .fc-title { font-size: 46px; }
body.landscape #screen-history .hist-row { gap: 26px; padding: 14px 30px; }
body.landscape #screen-history .hist-time { width: 230px; }
body.landscape #screen-history .hist-status { min-height: 26px; font-size: 20px; }