/* =====================================================================
   赛前过渡层（matchmaking overlay，前缀 ml-）—— FC 电竞风。
   DOM 由 https://d1u4k7xc6u3yed.cloudfront.net/agent-soccer/js/screens/match.js 动态创建，作为 #screen-match 最后一个子节点
   盖在画布 / HUD / 视频特写之上：
     VS 大卡（我方国旗+队名 vs 问号剪影「匹配中…」）
     + 电光绿能量条（loading 扫光 / reveal 充满）
     + 轮播战术贴士 + 取消按钮；错误态换为错误文案 + 返回主页。
   状态类（挂在 .ml-overlay 上，js 状态机驱动）：
     （默认）     loading：匹配中
     .ml-reveal   对手名翻出（~0.85s）→ 即将开赛
     .ml-error    失败/超时：隐藏能量条/贴士/取消，显示 .ml-errbox
     .ml-hide     渐隐退场（pointer-events 穿透，回放控件即刻可用）
   横竖双朝向：竖版 1080x1920 纵向居中列；body.landscape（1920x1080）
   拉宽 VS 卡间距、收紧纵向节奏。
   ===================================================================== */

.ml-overlay {
  position: absolute; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 80% at 50% 18%, #11331f 0%, #07140d 55%, #04090d 100%);
  pointer-events: auto;
  opacity: 1;
  transition: opacity .38s ease; /* FADE_MS 与 js 对齐 */
}
/* 斜纹 + 扫描线氛围层（与 theme-fc 背景组同语言，纯装饰） */
.ml-overlay::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(115deg,
    transparent 0 46px, rgba(0, 229, 168, 0.04) 46px 48px);
}
.ml-overlay::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg,
    transparent 0 5px, rgba(0, 0, 0, 0.16) 5px 6px);
}
.ml-overlay.ml-hide { opacity: 0; pointer-events: none; }

.ml-panel {
  position: relative; z-index: 1;
  width: 940px; max-width: 94%;
  display: flex; flex-direction: column; align-items: center;
  gap: 46px;
}

/* ---- 顶部小标题 ---- */
.ml-kicker {
  font: 800 34px/1 'Saira', 'Noto Sans SC', sans-serif;
  letter-spacing: .5em; text-indent: .5em; /* 抵消末字符间距，视觉居中 */
  text-transform: uppercase;
  color: #7ef0c2; text-shadow: 0 0 18px rgba(0, 229, 168, 0.55);
}

/* ---- VS 大卡 ---- */
.ml-vsrow { display: flex; align-items: center; justify-content: center; gap: 52px; width: 100%; }
.ml-team { display: flex; flex-direction: column; align-items: center; gap: 18px; flex: 1 1 0; min-width: 0; }
.ml-disc {
  width: 220px; height: 220px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #11281c, #0a1a13);
  border: 3px solid rgba(0, 229, 168, 0.4);
  box-shadow: 0 0 44px rgba(0, 229, 168, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.ml-flag { width: 132px; height: auto; border-radius: 8px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.65); }
.ml-disc-fallback { font-size: 96px; line-height: 1; }
.ml-name {
  font: 800 52px/1.15 'Saira Condensed', 'Noto Sans SC', sans-serif; font-style: italic;
  color: #fff; text-align: center;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ml-sub { font: 700 24px/1 'Saira', sans-serif; letter-spacing: .4em; text-indent: .4em; color: #5b7a6c; }
.ml-vs {
  flex: 0 0 auto;
  font: 800 100px/1 'Saira Condensed', sans-serif; font-style: italic;
  color: #00e5a8; text-shadow: 0 0 32px rgba(0, 229, 168, 0.65);
}

/* 对手未知态：虚线问号剪影 + 呼吸光、「匹配中…」灰字 */
.ml-disc-q { border-style: dashed; border-color: #39584a; animation: mlQPulse 1.6s ease-in-out infinite; }
.ml-q { font: 800 120px/1 'Saira Condensed', sans-serif; color: #39584a; }
.ml-away .ml-name { color: #7e93a8; font-size: 40px; letter-spacing: .1em; }

/* reveal：对手名翻出 + 剪影点亮（金）+ 能量条充满 + 「对手就位」 */
.ml-overlay.ml-reveal .ml-away .ml-name {
  color: #fff; font-size: 52px; letter-spacing: 0;
  animation: mlReveal .6s cubic-bezier(.2, .9, .3, 1.25);
}
.ml-overlay.ml-reveal .ml-disc-q {
  border-style: solid; border-color: rgba(255, 211, 90, 0.6);
  box-shadow: 0 0 44px rgba(255, 211, 90, 0.3), inset 0 0 30px rgba(0, 0, 0, 0.55);
  animation: none;
}
.ml-overlay.ml-reveal .ml-q { color: #ffd35a; }

@keyframes mlReveal {
  0%   { transform: rotateX(90deg); opacity: 0; }
  60%  { transform: rotateX(-12deg); opacity: 1; }
  100% { transform: rotateX(0deg); }
}
@keyframes mlQPulse {
  0%, 100% { box-shadow: 0 0 24px rgba(0, 229, 168, 0.10), inset 0 0 30px rgba(0, 0, 0, 0.55); }
  50%      { box-shadow: 0 0 56px rgba(0, 229, 168, 0.30), inset 0 0 30px rgba(0, 0, 0, 0.55); }
}

/* ---- 电光绿能量条 ---- */
.ml-bar {
  position: relative; width: 640px; max-width: 80%; height: 14px;
  border-radius: 7px; background: #0c1f16;
  border: 1px solid rgba(0, 229, 168, 0.25); overflow: hidden;
}
.ml-bar i {
  position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; border-radius: 7px;
  background: linear-gradient(90deg, transparent, #00e5a8, #aef9dd);
  box-shadow: 0 0 24px rgba(0, 229, 168, 0.65);
  animation: mlSweep 1.3s linear infinite;
}
@keyframes mlSweep { to { left: 100%; } }
.ml-overlay.ml-reveal .ml-bar i { animation: none; left: 0; width: 100%; }

/* 「对手就位！」：reveal 才显示 */
.ml-found {
  display: none;
  font: 700 30px/1 'Noto Sans SC', sans-serif; letter-spacing: .2em; text-indent: .2em;
  color: #ffd35a; text-shadow: 0 0 16px rgba(255, 211, 90, 0.4);
}
.ml-overlay.ml-reveal .ml-found { display: block; animation: mlReveal .5s ease; }

/* ---- 轮播战术贴士 ---- */
.ml-tipbox {
  display: flex; align-items: center; gap: 20px;
  min-height: 76px; max-width: 880px; padding: 18px 30px;
  background: rgba(11, 22, 15, 0.85);
  border: 1px solid #1d3a2c; border-left: 4px solid #00e5a8;
}
.ml-tiplabel { font: 800 24px/1 'Saira', sans-serif; letter-spacing: .3em; color: #00e5a8; white-space: nowrap; }
.ml-tiptext { font: 500 28px/1.5 'Noto Sans SC', sans-serif; color: #cfe8da; }
.ml-tip-in { animation: mlTipIn .45s ease; }
@keyframes mlTipIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- 取消按钮（匹配中可退出；reveal 后隐藏避免误触） ---- */
.ml-cancel {
  margin-top: 4px; padding: 18px 64px;
  font: 700 30px/1 'Noto Sans SC', sans-serif;
  color: #9fb8aa; background: transparent;
  border: 1px solid #2c4a3a;
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  cursor: pointer;
}
.ml-cancel:hover { color: #fff; border-color: #00e5a8; }
.ml-overlay.ml-reveal .ml-cancel { visibility: hidden; }

/* ---- 错误态：文案 + 返回主页（loading 元素整体隐藏，绝不卡死） ---- */
.ml-errbox { display: none; flex-direction: column; align-items: center; gap: 30px; }
.ml-errmsg {
  font: 600 34px/1.5 'Noto Sans SC', sans-serif;
  color: #ff8d80; text-align: center; max-width: 860px;
}
.ml-back {
  padding: 20px 80px;
  font: 800 32px/1 'Noto Sans SC', sans-serif;
  color: #04140c; background: linear-gradient(135deg, #00e5a8, #5dffce);
  border: 0; clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  box-shadow: 0 0 30px rgba(0, 229, 168, 0.35);
  cursor: pointer;
}
.ml-overlay.ml-error .ml-bar,
.ml-overlay.ml-error .ml-tipbox,
.ml-overlay.ml-error .ml-cancel,
.ml-overlay.ml-error .ml-found { display: none; }
.ml-overlay.ml-error .ml-errbox { display: flex; }

/* ---- 横版（body.landscape，1920x1080）：拉宽 VS 卡、收紧纵向节奏 ---- */
body.landscape .ml-panel { width: 1460px; gap: 34px; }
body.landscape .ml-vsrow { gap: 130px; }
body.landscape .ml-disc { width: 230px; height: 230px; }
body.landscape .ml-tipbox { max-width: 1160px; }
body.landscape .ml-kicker { font-size: 30px; }

/* ---- 减少动态效果偏好：停掉装饰动画（reveal/淡出由 js 定时器推进，不受影响） ---- */
@media (prefers-reduced-motion: reduce) {
  .ml-bar i, .ml-disc-q, .ml-tip-in, .ml-found,
  .ml-overlay.ml-reveal .ml-away .ml-name { animation: none !important; }
}