/* =====================================================================
   theme-fc.css —— FC 风 v2 共享设计系统（从主页 screens-home.css 提炼）。
   电竞 / EA Sports FC Mobile 风：棱角几何（clip-path 斜切）、电光绿能量、
   Saira Condensed 粗斜体。除阵容页（TACTICS LAB）与比赛页外的各屏复用。
   用法：<section> 上加 .fc-screen，内部用 .fc-* 组件；屏内细节样式写各屏
   自己的 css。字体已由 index.html 引入（Saira Condensed / Saira / Noto Sans SC）。
   ===================================================================== */

:root {
  --fc-ink: #04070d;
  --fc-txt: #eaf1fb;
  --fc-txt-dim: #90a0bc;
  --fc-txt-faint: #5d6c8a;
  --fc-panel: rgba(12, 18, 32, 0.72);
  --fc-panel2: rgba(16, 24, 42, 0.9);
  --fc-stroke: rgba(120, 150, 200, 0.16);
  --fc-stroke-hi: rgba(120, 150, 200, 0.35);
  --fc-energy: #15e371;
  --fc-energy2: #7dffb0;
  --fc-cyan: #2bc7f0;
  --fc-gold: #f5c451;
  --fc-rose: #fb4d6a;
  --fc-d: 'Saira Condensed', 'Noto Sans SC', system-ui, sans-serif; /* 显示/数字 */
  --fc-f: 'Saira', 'Noto Sans SC', system-ui, sans-serif;           /* 标签/正文 */
}

/* ---- 屏基底 ---- */
.fc-screen {
  font-family: var(--fc-f);
  color: var(--fc-txt);
  background: var(--fc-ink);
  overflow: hidden;
}
.fc-screen b, .fc-screen i { font-style: normal; }
.fc-screen button { font-family: inherit; cursor: pointer; color: inherit; }

/* ---- 背景层组（静态版，无粒子；从底到顶叠在 .fc-bg 容器里） ---- */
.fc-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.fc-bg-base {
  position: absolute; inset: 0;
  background:
    radial-gradient(820px 620px at 14% 2%, rgba(21, 227, 113, 0.14), transparent 55%),
    radial-gradient(820px 640px at 90% 6%, rgba(43, 199, 240, 0.14), transparent 52%),
    var(--fc-bgimg, none) center/cover no-repeat,
    linear-gradient(180deg, #04070d 0%, #070d18 55%, #04070f 100%);
}
/* gpt-image-2 生成的各屏氛围底图（--fc-bgimg 由各 #screen-* 注入，竖/横分别覆盖） */
#screen-auth, #screen-boot { --fc-bgimg: url("https://d1u4k7xc6u3yed.cloudfront.net/agent-soccer/assets/ui/bg_login.webp"); }
#screen-settlement { --fc-bgimg: url("https://d1u4k7xc6u3yed.cloudfront.net/agent-soccer/assets/ui/bg_settlement.webp"); }
#screen-team, #screen-coding, #screen-customize,
#screen-history, #screen-leaderboard, #screen-worldcup { --fc-bgimg: url("https://d1u4k7xc6u3yed.cloudfront.net/agent-soccer/assets/ui/bg_menu.webp"); }
body.landscape #screen-team, body.landscape #screen-coding, body.landscape #screen-customize,
body.landscape #screen-history, body.landscape #screen-leaderboard, body.landscape #screen-worldcup {
  --fc-bgimg: url("https://d1u4k7xc6u3yed.cloudfront.net/agent-soccer/assets/ui/bg_menu_land.webp");
}
.fc-bg-hatch {
  position: absolute; inset: 0; opacity: .5;
  background: repeating-linear-gradient(125deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 9px);
}
.fc-bg-wedge {
  position: absolute; top: -20%; left: -12%; width: 62%; height: 140%;
  background: linear-gradient(150deg, rgba(21, 227, 113, 0.12), transparent 58%);
  clip-path: polygon(0 0, 100% 0, 62% 100%, 0 100%);
  filter: blur(10px);
}
.fc-bg-scan {
  position: absolute; inset: 0; opacity: .25;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px);
}
.fc-bg-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(125% 105% at 50% 36%, transparent 50%, rgba(2, 4, 9, 0.78) 100%);
}

/* ---- 玻璃卡（右上+左下斜切） ---- */
.fc-card {
  background: var(--fc-panel);
  border: 1px solid var(--fc-stroke);
  backdrop-filter: blur(12px);
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.4);
}

/* ---- 标题（压缩斜体 + 电光绿短杠） ---- */
.fc-title {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--fc-d);
  font-style: italic;
  font-weight: 800;
  font-size: 44px;
  letter-spacing: 2px;
  color: var(--fc-txt);
  text-transform: uppercase;
}
.fc-title::before {
  content: "";
  width: 12px; height: 0.85em;
  background: linear-gradient(180deg, var(--fc-energy), var(--fc-cyan));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%);
  box-shadow: 0 0 16px rgba(21, 227, 113, 0.5);
}
/* 标题前缀图标（替代曾经的 emoji 前缀，紧跟绿色楔形条之后）。 */
.fc-title-ico {
  flex: none;
  width: 1.05em; height: 1.05em;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .55));
  margin-right: -2px;
}
.fc-subtitle {
  font-family: var(--fc-d); font-style: italic; font-weight: 700;
  font-size: 26px; letter-spacing: 2px; color: var(--fc-txt-dim);
}

/* ---- 棱角按钮（左上+右下斜切） ---- */
.fc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 34px;
  background: var(--fc-panel2);
  border: 1px solid var(--fc-stroke);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  font-family: var(--fc-d); font-style: italic; font-weight: 700;
  font-size: 27px; letter-spacing: 2px;
  color: var(--fc-txt);
  transition: .16s;
  user-select: none;
}
.fc-btn:hover { color: var(--fc-energy); box-shadow: 0 0 18px rgba(21, 227, 113, 0.3); transform: translateX(2px); }
.fc-btn:active { transform: translateX(2px) scale(0.985); }
.fc-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; transform: none; }

.fc-btn-primary {
  background: linear-gradient(160deg, var(--fc-energy), #0aa14e);
  border-color: rgba(21, 227, 113, 0.7);
  color: #03140a;
  box-shadow: 0 12px 30px rgba(21, 227, 113, 0.32);
}
.fc-btn-primary:hover { color: #03140a; box-shadow: 0 12px 36px rgba(21, 227, 113, 0.5); }

.fc-btn-danger { border-color: rgba(251, 77, 106, 0.5); color: var(--fc-rose); }
.fc-btn-danger:hover { color: var(--fc-rose); box-shadow: 0 0 18px rgba(251, 77, 106, 0.35); }

.fc-btn-ghost { background: transparent; }

/* ---- 输入 ---- */
.fc-input {
  background: rgba(6, 10, 20, 0.8);
  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);
  color: var(--fc-txt);
  font-family: var(--fc-f);
  padding: 14px 18px;
  font-size: 27px;
  outline: none;
  transition: .16s;
}
.fc-input:focus { border-color: rgba(21, 227, 113, 0.55); box-shadow: 0 0 0 3px rgba(21, 227, 113, 0.12); }

/* ---- 徽章 ---- */
.fc-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 14px;
  font-family: var(--fc-d); font-style: italic; font-weight: 700;
  font-size: 21px; letter-spacing: 1px;
  border: 1px solid var(--fc-stroke);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  background: var(--fc-panel2);
  color: var(--fc-txt-dim);
}
.fc-badge-energy { color: var(--fc-energy); border-color: rgba(21, 227, 113, 0.4); background: rgba(21, 227, 113, 0.1); }
.fc-badge-gold { color: var(--fc-gold); border-color: rgba(245, 196, 81, 0.4); background: rgba(245, 196, 81, 0.1); }
.fc-badge-cyan { color: var(--fc-cyan); border-color: rgba(43, 199, 240, 0.4); background: rgba(43, 199, 240, 0.1); }
.fc-badge-rose { color: var(--fc-rose); border-color: rgba(251, 77, 106, 0.4); background: rgba(251, 77, 106, 0.1); }

/* ---- 进度/数值条（右下小斜切） ---- */
.fc-bar {
  height: 14px;
  background: rgba(6, 10, 20, 0.85);
  border: 1px solid var(--fc-stroke);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
  overflow: hidden;
}
.fc-bar > i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--fc-energy), var(--fc-cyan));
  box-shadow: 0 0 12px rgba(21, 227, 113, 0.45);
  transition: width .8s cubic-bezier(.2, .8, .2, 1);
}
.fc-bar > i.gold { background: linear-gradient(90deg, #d8a31b, var(--fc-gold)); box-shadow: 0 0 12px rgba(245, 196, 81, 0.45); }

/* ---- 列表行 ---- */
.fc-row {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 20px;
  background: var(--fc-panel2);
  border: 1px solid transparent;
  border-left: 3px solid var(--fc-stroke);
  transition: .14s;
}
.fc-row:hover { border-left-color: var(--fc-energy); background: rgba(21, 227, 113, 0.06); transform: translateX(3px); }
.fc-row.selected { border-left-color: var(--fc-energy); background: rgba(21, 227, 113, 0.1); box-shadow: inset 0 0 16px rgba(21, 227, 113, 0.06); }

/* ---- 页签（棱角，选中电光绿填充） ---- */
.fc-tabs { display: flex; gap: 10px; }
.fc-tab {
  padding: 12px 30px;
  background: var(--fc-panel2);
  border: 1px solid var(--fc-stroke);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  font-family: var(--fc-d); font-style: italic; font-weight: 700;
  font-size: 25px; letter-spacing: 2px;
  color: var(--fc-txt-dim);
  transition: .16s;
}
.fc-tab:hover { color: var(--fc-energy); }
.fc-tab.active {
  background: linear-gradient(160deg, var(--fc-energy), #0aa14e);
  border-color: rgba(21, 227, 113, 0.7);
  color: #03140a;
  box-shadow: 0 8px 22px rgba(21, 227, 113, 0.3);
}

/* ---- 国旗图（本地 https://d1u4k7xc6u3yed.cloudfront.net/agent-soccer/assets/flags/<iso>.png，countries.js flagSrc()） ---- */
.fc-flag {
  width: 56px; height: 38px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  background: #0a1020;
  flex: none;
}
.fc-flag-sm { width: 40px; height: 27px; }
.fc-flag-lg { width: 84px; height: 56px; }

/* ---- 空状态 ---- */
.fc-empty {
  text-align: center;
  color: var(--fc-txt-faint);
  font-family: var(--fc-d); font-style: italic;
  font-size: 28px; letter-spacing: 2px;
  padding: 40px 10px;
}

/* ---- 滚动条 ---- */
.fc-screen ::-webkit-scrollbar { width: 8px; height: 8px; }
.fc-screen ::-webkit-scrollbar-thumb { background: rgba(21, 227, 113, 0.25); }
.fc-screen ::-webkit-scrollbar-thumb:hover { background: rgba(21, 227, 113, 0.45); }

/* ---- 动效弱化 ---- */
@media (prefers-reduced-motion: reduce) {
  .fc-btn, .fc-row, .fc-bar > i, .fc-tab { transition: none; }
}