:root{
  --title-height: 50px;
  --content-max-width: 1500px;
  --tabs-height: 48px; /* 新增：顶部 tabs 条高度（按需调整） */
}
/* 给页面顶部留出标题 + tabs 的空间，保证 .container 不会被覆盖 */
body{
  font-family:Arial, Helvetica, sans-serif;

  padding:0px;
  padding-top: calc(var(--title-height) + var(--tabs-height) + var(--banner-height) + 20px);
  background:#0f1011;
}

    /* 主容器：左右两栏的弹性布局，gap 控制列间距 */
    .container{
        max-width:1500px;
  /* 为 tabs + title 留出空间，左右两个区域整体下移 */
  margin: calc(var(--title-height) + var(--tabs-height) - 122px) auto 0;
  display:flex;
  gap:15px;
  align-items:flex-start;
    }

    /* 左 1/6，右 5/6（注释说,布局意(） */
    .left{flex:0 0 20%;min-width:330px;color: #e4e4e4;background:#1f2122;padding:12px;box-sizing:border-box; position:relative;}
    .right{
      flex:1;
      color: #e6e6e6;
      background:#1f2122;
      padding:10px;
      box-sizing:border-box;
      min-height:50vh;
      overflow:auto;

      display:flex;
      flex-direction:column; /* 允许 header 在上，groups 在下 */
    }

    /* header：按钮 和 标题 同一行，左右分散 */
    .right-header{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:18px;
      margin-bottom:10px;
    }
    .right-header h3{margin:0;color:#e6e6e6;}/* 分组结果文字 */

    /* groups 靠右排列，内部项目仍允许换行 */
    .groups{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      justify-content:flex-start; /* 内容靠左（从右对齐改为左对齐） */
      align-items:flex-start; 
    }

    /* 左侧控件垂直排列并保持间距 */
    .controls-row{display:flex;flex-direction:column;gap:10px}
    /* label 占一行，便于布局 */
    label{display:block}

    /* 文本输入框样式：
       - 宽度 100%，可垂直缩放
       - 最小高度对应约 3 行文本，最大高度限制避免占满页面
       - 修复 calc 写法为合法表达式，保证浏览器解析 */
    textarea{
      width:100%;
      min-height:72px;
      padding:8px;
      box-sizing:border-box;
      resize:vertical;
      line-height:35px;
      max-height: calc(1.35em * 20 + 18px); /* 限制最大高度，避免太高 */
      overflow:auto;
      background:#37393a;
      color: #e0e0e0;
     
    }

    /* 右侧分组排列样式，允许换行 */
    
    .group{border:1px solid #3d3d3d;border-radius: 4px;padding:8px;min-width:180px;color: #ffdca3;font-size:13px}

    /* 小提示文字样式 */
    .hint{color:#424242;margin-top:6px;font-size:13px}
    button{padding:6px 10px}

 

    /* 新增：页面上方主标题样式（白色背景的深色容器可改用 .right > h2） */
    h2.site-title{
  color: #e0e0e0;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  margin: 0 0 12px 0;
  line-height: 1.2;
  padding: 5px 0;
  
  width: 100%;          /* 使标题宽度与 .right 一致 */
  box-sizing: border-box;
}
/* 新增：置于 .container 上方，但与 .right 同宽并左对齐 */
.title-row{
  position: fixed;
  top: calc(var(--tabs-height) + 200px); /* 放在 tabs 下方 */
  left:50%;
  transform: translateX(-50%);
  z-index:1100;
  height: var(--title-height);
  width: calc(100% - 0px);
  max-width: var(--content-max-width);
  
  display:flex;
  gap:1px;
  align-items:center;
  box-sizing:border-box;
}

/* 让标题与右侧信息同行，左对齐标题，右对齐作者/信息 */
.title-row .title-wrap{
  display: flex;
  align-items: center;
  justify-content: space-between; /* 左右两端对齐 */
  gap: 12px;
  padding: 0 20px; /* 与页面左右内边距保持一致 */
  box-sizing: border-box;
  width: 100%;
}

/* 标题占据剩余空间，超出时截断 */
.title-row .title-wrap h2.site-title{
  margin: 0;
  padding: 6px 180px;
  flex: 1 1 auto;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 右侧信息固定尺寸并靠右 */
.title-row .title-right{
  flex: 0 0 auto;
  margin: 0 0 0 16px;
  white-space: nowrap;
  color: #fcad02;
  font-size: 14px;
  align-self: center;
  margin-right: 90px; /* 自动占据剩余空间，使其靠右 */
}
/* 开始/停止 圆形立体按钮（含三角/正方形图标） */
.btn-toggle{
      width:40px;
      height:40px;
      border-radius:50%;
      border:0;
      display:inline-flex;
      align-items:center;
      justify-content:center;

      background: linear-gradient(135deg, #ffeeaa 0%, #854203 100%);
      background-color: #bea850;
      color:#222;
      cursor:pointer;
      box-shadow: 0 6px 0 rgba(0,0,0,0.12), inset 0 -4px 0 rgba(0,0,0,0.12);
      transition: background .12s, transform .06s, box-shadow .06s;
      position:relative;
      padding:0;
    }
    .btn-toggle:active{ transform: translateY(2px); box-shadow: 0 3px 0 rgba(0,0,0,0.12); }

    /* 图标：默认为三角（播放） */
    .btn-toggle::before{
      content: "";
      display:block;
      width:0;
      height:0;
      border-left:12px solid #ffffff; /* 三角颜色 */
      border-top:8px solid transparent;
      border-bottom:8px solid transparent;
    }

    /* 运行中（停止状态）红色外观 + 正方形图标 */
    .btn-toggle.running{
      background: linear-gradient(135deg, #fc6666 0%, #530000 100%);
      background-color: #ff7070;
      color:#fff;
      box-shadow: 0 6px 0 rgba(0,0,0,0.18), inset 0 -4px 0 rgba(0,0,0,0.12);
    }
    .btn-toggle.running::before{
      border-left: none;
      border-top: none;
      border-bottom: none;
      width:12px;
      height:12px;
      background:#ffffff; /* 正方形颜色 */
      border-radius:2px;
    }
    .btn-save{
      gap:28px;
  padding:6px 10px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,0.06);
  background:transparent;
  color:inherit;
  cursor:pointer;
  font-weight:600;
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.btn-save:hover{
  background: rgba(46,156,255,0.06);
  box-shadow: 0 8px 18px rgba(46,156,255,0.06);
  transform: translateY(-2px);
}
.btn-save:active{ transform: translateY(0); box-shadow:none; }

/* 让 toggle-wrap 内元素水平排列并有小间距，便于把保存按钮放到开始按钮旁 */
.toggle-wrap{
  margin-right: 34px;
  display:flex;
  align-items:center;
  gap:28px; /* 缩小间距以便按钮紧邻 */
}


.btn-load{
  padding:6px 10px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,0.04);
  background:transparent;
  color:inherit;
  cursor:pointer;
  font-weight:600;
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.btn-load:hover{
  background: rgba(46,156,255,0.06);
  box-shadow: 0 8px 18px rgba(46,156,255,0.04);
  transform: translateY(-2px);
}
.btn-load:active{ transform: translateY(0); box-shadow:none; }

/* 确保按钮紧挨开始按钮，缩小 toggle-wrap 间距 */
.toggle-wrap{ display:flex;align-items:center;gap:8px;margin-left:24px; }
/* 与现有 .btn-ghost 保持兼容（若已有样式会生效） */
    /* 无障碍隐藏文本（保留可被屏幕阅读器识别） */
    .visually-hidden{
      position:absolute!important;
      width:1px;height:1px;
      padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
    }

    /* 按钮与旁边文字的容器：让文字在按钮右侧且垂直居中 */
    .toggle-wrap{ margin-left: 24px; display:flex; align-items:center; gap:10px; } /* 向右移动 24px，按需调整 */
   .toggle-label{ color:#e6e6e6; font-size:24px; user-select:none; }

   /* 选手项样式：圆角固定宽度标签 */
    /* 翻转滚动效果：3D 纵向翻滚（每个选手项的前后面） */
    .group ul { /* 保持竖向排列 */
      list-style: none;
      margin: 8px 0 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .group li {
      width: 100%;
      height: 30px;
      box-sizing: border-box;
      perspective: 800px; /* 为子元素提供 3D 视角 */
      overflow: visible;
    }
    .group li .flip {
      position: relative;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      transition: transform 420ms cubic-bezier(.2,.9,.3,1); /* 平滑合理速度 */
      transform-origin: center center;
      display: block;
    }
    .group li .flip.flipping {
      transform: rotateX(-180deg);
    }
    
    .group li .flip .face.back {
      transform: rotateX(180deg);
    }
    /* 序号框（左侧固定宽度）*/
  
    .group li .flip .face {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start; /* 从左开始排列：序号框在最左，名字在右 */
      padding: 2px 0px;
      box-sizing: border-box;
      backface-visibility: hidden;
      border-radius: 4px;
      background: #414141;
      color: #e6e6e6;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 14px;
    }
    /* 序号框（左侧固定宽度）*/
    .group li .face .player-no{
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;            /* 与之前 flex 基准一致 */
  height:28px;
  min-width:26px;
  margin:0;              /* 清除可能的外边距，避免被推移 */
  background:#696969;
  color:#202020;
  font-weight:600;
  border-radius:4px;
  box-sizing:border-box;
  flex:0 0 auto;        /* 不参与流式伸缩 */
}
   /* 选手姓名区域，确保左对齐并占剩余空间 */
   .group li .face .player-name{
  margin-left: 40px;     /* >= player-no 宽度 + 间距（26 + 8~10） */
  padding-right: 54px;   /* 保持为 avatar 留位 */
  text-align:left;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

   /* 使分组结果里的头像靠近选手名的右侧边框 */
.group li .face { position: relative; } /* 确保定位上下文 */
.group li .face .player-name { padding-right: 4px; /* 为头像留出空间（avatar 宽度 + 间距）*/ }

.group li .face .avatar-dropdown{
  position: absolute;
  right: 0px;               /* 距离名字右边框的间距，可调为 4/6/10px */
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: right;
  pointer-events: auto;
}

/* 调整分组内头像尺寸（按需修改） */
.group li .face .player-avatar{
  width:28px !important;
  height:28px !important;
  min-width:28px !important;
  padding:0 !important;
  box-sizing:border-box !important;
  border-radius:50% !important;
  font-size:13px !important;
  line-height:28px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
    .icon{ width:30px;height:30px;display:inline-block;vertical-align:middle; }
.icon-large{ width:30px;height:30px; }
.icon-btn{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:0; background:transparent; color:inherit; cursor:pointer; }
.icon-muted{ color:#9aa0a6; } /* 次级色 */

label{display:block}
    /* 当 label 与图标并列时的容器：图标在左，label 在右，间距可调 */
    .label-icon{ display:inline-flex; align-items:center; gap:0px; }
    .label-icon label{ display:inline-block; margin:0;white-space:nowrap;  } 
    .label-icon{ display:flex; align-items:center; gap:12px; } /* 缩小图标与内容间距 */
    .hint{color:#666;margin-top:0px;font-size:13px;margin-left:58px;} /* 向右移动 18px，按需调整数值 */

 /* 折叠左侧菜单：按钮样式（改为独占一行） */
.collapse-btn{
  border:0;
  background:transparent;
  color:inherit;
  padding:6px;
  display:flex;
  align-items:center;
  justify-content:flex-end; /* 默认箭头靠右（在按钮行内） */
  cursor:pointer;
  width:100%;                /* 占据整行，和选手名单不在同一行 */
  margin-bottom:8px;
}
.collapse-btn svg{ width:30px;height:30px; transition: transform .18s ease; }

/* 收起时箭头靠左（按钮仍占一行） */
.left.collapsed .collapse-btn{
  justify-content:center;
}
/* 折叠时箭头旋转视觉效果 */
.left.collapsed .collapse-btn svg{ transform: rotate(180deg); }
/* 收起时箭头保持在左侧内部位置 */
.left.collapsed .collapse-btn{
  left:8px;
  right:auto;
  top:8px;
}

 /* 折叠后左侧宽度只留图标列（80px），隐藏文字控件 */
 .left.collapsed{
   flex:0 0 80px;
   min-width:80px;
   padding:8px;
   overflow:visible;
 }
 /* 折叠时隐藏 label / 文本框 / hint / 输入控件，只保留图标 */
 .left.collapsed .label-icon label,
 .left.collapsed textarea,
 .left.collapsed .hint,
 .left.collapsed .label-icon input,
 .left.collapsed #playersListPreview,
 .left.collapsed .players-list-preview,
 .left.collapsed #applyList{
   display:none;
 }
 /* 折叠时把图标居中堆叠（保留原来间距较大时的视觉） */
 .left.collapsed .label-icon{
   display:flex;
   justify-content:flex-start;
   gap:0;
   padding:6px 0;
 }
 .left.collapsed .icon{ margin:0; }
 /* 折叠时把收起箭头方向反转（靠 .left.collapsed 触发） */
 .left.collapsed .collapse-btn svg{ transform: rotate(180deg);justify-content:center; }

 /* 单项折叠样式：只保留图标 */
  .label-icon.collapsed{ justify-content:center; gap:0; }
  .label-icon.collapsed label,
  .label-icon.collapsed input,
  .label-icon.collapsed textarea,
  .label-icon.collapsed button{ display:none; }
  /* 让 svg 看起来像可点击控件 */
  .label-icon svg{ cursor:pointer; }
  .label-icon svg:focus{ outline:2px solid rgba(255,255,255,0.08); outline-offset:3px; }
  /* 小提示在折叠时也居中显示图标列时的对齐（可选） */
  .left.collapsed .label-icon{ padding:6px 0; }
    /* 统一左侧菜单内所有图标尺寸，展开/收起保持一致 */
    .left .label-icon svg,
    .left .label-icon .icon {
      width: 30px !important;
      height: 30px !important;
      display: inline-block;
      vertical-align: middle;
    }
    /* collapse 按钮使用同一尺寸，保持视觉一致 */
    .left .collapse-btn svg {
      width: 30px !important;
      height: 30px !important;
    }

    .label-icon{
  display:flex;
  align-items:center;
  gap:34px;            /* 图标与后面模块的间距（按需增大/减小） */
  width:100%;
  box-sizing:border-box;
}
.label-icon svg{ flex:0 0 auto; }      /* 图标固定尺寸 */
.label-icon label{
  flex:0 0 auto;
  white-space:nowrap;      /* 标签不换行 */
  margin:0;
}

/* 输入框占剩余空间并允许收缩（关键：min-width:0） */
.label-icon input[type="text"],

.label-icon textarea{
  flex:1 1 auto;
  min-width:0;             /* 允许在 flex 容器内缩小，避免换行 */
  width: auto;
  margin-left:0px;
  background:#323335;
  color:#e0e0e0;
  border:1px solid #444;
  padding:6px;
  border-radius:4px;
  box-sizing:border-box;
}
/* 内层：把 label 和 input 放在一起，内部间距小 */
.label-icon .label-pair{
  display:flex;
  align-items:center;
  gap:0px;             /* label 和 input 之间更紧密 */
  flex:1 1 auto;       /* 占据剩余空间，使输入框伸缩 */
  min-width:0;         /* 避免在 flex 中换行 */
}
.label-icon .label-pair label{ margin:0; white-space:nowrap; }
.label-icon .label-pair input[type="text"], .label-icon .label-pair textarea{
  margin-left:0;
  flex:1 1 auto;
  min-width:0;
  box-sizing:border-box;
}
/* 首行为“分组标题”：让标签与输入框更靠近 */
.controls-row > .label-icon:nth-of-type(1){
  gap:40px; /* 原来是 8px，改为 24px（按需设为 16/24/32） */
  align-items:center;
}

/* 进一步微调：缩小 label 到 input 的间隙（防止被全局 margin 覆盖） */
.controls-row > .label-icon:nth-of-type(1) label{
  margin-right:0px;
}
/* 如果输入框有内联样式 margin-left:0，可用下面规则覆盖以保证距离 */
#groupTitle{
  margin-left:0px !important;
  width:100%;
  box-sizing:border-box;
}

/* 弹窗样式：避免相互重叠，简洁暗色系 */
#avoidModal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
#avoidModal.show{ display:flex; }
#avoidModal .overlay{
  position:absolute; inset:0; background:rgba(0,0,0,0.45);
}
#avoidModal .dialog{
  position:relative;
  background:#1f2224;
  color:#e6e6e6;
  width:520px;
  max-width:94%;
  border-radius:8px;
  padding:12px;
  box-sizing:border-box;
  box-shadow:0 10px 30px rgba(0,0,0,0.6);
  z-index:2;
}
#avoidModal .dialog h4{ margin:0 0 8px 0; font-size:16px; }
#avoidModal .players-list{
  max-height:280px; overflow:auto; padding:6px; border:1px solid #333; border-radius:6px; background:#151616;
  display:flex; flex-direction:column; gap:6px;
}
#avoidModal .players-list label{ display:flex; gap:8px; align-items:center; padding:4px 6px; border-radius:4px; cursor:pointer; }
#avoidModal .constraints{
  margin-top:10px; font-size:13px; color:#cfcfcf;
}
#avoidModal .constraint-item{ display:flex; gap:8px; align-items:center; justify-content:space-between; padding:6px; background:#111; border-radius:6px; margin-top:6px; }
#avoidModal .dialog .actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:10px; }
#avoidModal .dialog button{ padding:6px 10px; border-radius:4px; border:0; cursor:pointer; }
#avoidModal .dialog .btn-primary{ background:#2e9cff; color:#fff; }
#avoidModal .dialog .btn-ghost{ background:transparent; color:#cfcfcf; border:1px solid #2c2c2c; }
#avoidModal .small-muted{ font-size:12px; color:#9aa0a6; margin-top:6px; }

#constraintPasswordModal{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:2100;
}
#constraintPasswordModal.show{ display:flex; }
#constraintPasswordModal .password-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,0.45); }
#constraintPasswordModal .password-dialog{
  position:relative; z-index:2; width:340px; max-width:92%; background:#1f2224; color:#e6e6e6;
  border-radius:8px; padding:14px 12px; box-sizing:border-box; box-shadow:0 10px 30px rgba(0,0,0,0.6);
}
#constraintPasswordModal .password-dialog h4{ margin:0 0 8px; font-size:16px; }
#constraintPasswordModal .password-dialog p{ margin:0 0 10px; color:#c7c7c7; font-size:13px; }
#constraintPasswordModal .password-dialog input{
  width:100%; box-sizing:border-box; background:#111315; color:#f0f0f0; border:1px solid #36383a;
  border-radius:6px; padding:8px 10px; outline:none;
}
#constraintPasswordModal .password-dialog .actions button{ padding:6px 10px; border-radius:4px; border:0; cursor:pointer; }
#constraintPasswordModal .password-dialog .btn-primary{ background:#2e9cff; color:#fff; }
#constraintPasswordModal .password-dialog .btn-ghost{ background:transparent; color:#cfcfcf; border:1px solid #2c2c2c; }

/* 选手头像与下拉菜单 */
.group li .flip .face {
  /* ...existing code... */
  padding: 2px 8px; /* 右侧保留原有内边距，左侧让头像有空间 */
}
/* 头像圆形 */
.player-avatar{
  width:23px;
  height:28px;
  min-width:28px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  color:#fff;
  background:#292929;
  margin-right:10px;
  flex:0 0 auto;
  box-sizing:border-box;
  font-size:14px;
  user-select:none;
  margin-right: 0 !important; /* 清除原有右外边距 */
  right: auto !important;
}

/* 头像容器含下拉 */
.avatar-dropdown{ position:relative; display:inline-flex; align-items:center; }

/* 下拉按钮样式（小箭头） */
.avatar-toggle{
  background:transparent;
  border:0;
  color:inherit;
  margin-left:6px;
  cursor:pointer;
  padding:2px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* 下拉菜单 */
.avatar-menu{
  position:absolute;
  top: calc(100% + 6px);
  right:0;
  background:#1a1d1e;
  border:1px solid #333;
  border-radius:6px;
  padding:0px;
  min-width:180px;
  box-shadow:0 6px 18px rgba(0,0,0,0.5);
  z-index:1200;
  display:none;
  flex-direction:column;
  gap:6px;
}
.avatar-menu.show{ display:flex; }

/* 单个选项 */
.avatar-menu button{
  display:flex;
  align-items:center;
  gap:8px;
  padding:0px;
  background:transparent;
  border:0;
  color:#e6e6e6;
  cursor:pointer;
  text-align:left;
  border-radius:4px;
}
.avatar-option{
  width:23px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#444;color:#fff;font-weight:500;
}
/* players-area: textarea + narrow avatar column */
.label-icon.players-area { overflow: visible !important; position: relative !important; }
.label-icon.players-area textarea{
  flex:1 1 auto;
  min-width:0;
  box-sizing:border-box;
}

/* 预览列：绝对定位在 players-area 内，按行对齐 textarea */
#playersListPreview {
  width: 64px !important;              /* 增大预览列宽，保证头像完整可见 */
  top: 0 !important;
  right: 0 !important;
  pointer-events: auto !important;
  box-sizing: border-box !important;
  overflow-x: visible !important;     /* 允许水平溢出 */
  overflow-y: hidden !important;      /* 仅垂直裁切 */
}

/* 每行靠右但不要把头像推出可见区域 */
#playersListPreview .player-row{
  right: 8px !important;              /* 把头像整体向左移动，避开滚动条 */
  left: auto !important;
  overflow: visible !important;
  padding-right: 0 !important;
}

/* 头像尺寸与内外边距固定，取消左右内填充导致的裁切 */
#playersListPreview .player-avatar{
  width:26px !important;
  height:26px !important;
  min-width:26px !important;
  padding:0 !important;
  margin:0 !important;
  box-sizing:border-box !important;
  border-radius:50% !important;
  overflow: visible !important;
}

#playersListPreview .avatar-menu{
  position:absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index:1200;
  display:none;
}

#playersListPreview .player-avatar img,
.group li .face .player-avatar img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
  border-radius:50% !important;
}
#playersListPreview .player-row.hidden{ display:none; }
#playersListPreview .player-row .player-name{
  flex:1 1 auto;
  font-size:13px;
  color:#e0e0e0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#playersListPreview .player-avatar{
  width:16px;
  height:16px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  color:#fff;
  cursor:pointer;
  box-sizing:border-box;
  /* 仅调整左侧预览头像的文字大小与行高，使其与列表内选手垂直居中且不影响主列表头像 */
  font-size:10px;      /* 左侧头像文字大小（按需改为9/11/12） */
  line-height:16px;    /* 与头像高度一致以垂直居中 */
  user-select:none;
}
/* ...existing code... */
/* 预览列：增宽，避免头像被裁切；让头像靠左一点避开滚动条 */
.left .label-icon.players-area #playersListPreview{
  position:absolute;
  top:0;
  right:0;
  width:58px !important;         /* 增大宽度，保证头像完整可见 */
  padding:0 6px 0 0 !important;
  pointer-events:none;
  box-sizing:border-box;
  overflow:visible;              /* 允许水平可见（JS 会控制垂直裁切） */
}

/* 每行靠右显示，行内头像离滚动条更远一些 */
.left .label-icon.players-area #playersListPreview .player-row{
  position:absolute;
  left: auto !important;
  right: 26px !important;        /* 从 8px 调小到 6px（按需调整）*/
  height:20px !important;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  pointer-events:auto;
  box-sizing:border-box;
  padding-right:4px !important;
  gap:0 !important;
  overflow:visible !important;
}

/* 头像尺寸/内边距调整，避免超出容器太多 */
.left .label-icon.players-area #playersListPreview .player-avatar{
  padding:0 6px !important;
  width:26px !important;
  height:26px !important;
  line-height:20px !important;
  font-size:10px !important;
  border-radius:50% !important;
  background:transparent !important;
  color:inherit !important;
  box-sizing:border-box !important;
}
/* ...existing code... */

/* 图片模式也不使用圆角并限制尺寸 */
.left .label-icon.players-area #playersListPreview .player-avatar img{
  display:inline-block;
  max-width:100%;
  max-height:100%;
  vertical-align:middle;
  border-radius:0 !important;
}
.left .label-icon.players-area #playersListPreview .avatar-menu{
  /* 仍以右侧锚点对齐（right:0），但向左平移自身宽度 + 间隙 */
  right: 0 !important;
  left: auto !important;
  transform-origin: right top;
  transform: translateX(calc(-100% - 8px)) !important; /* 向左完整展开并留 8px 间隙 */
  z-index:1300 !important;
  display:none; /* 与原规则一致，显示由 JS 控制 */
}
/* 打开时显示（保持原来显示逻辑） */
.left .label-icon.players-area #playersListPreview .avatar-menu.show{
  display:flex !important;
  flex-direction:column;
}
#playersListPreview .avatar-menu.show{ display:block; }
/* 自定义 url 文本框 */
.avatar-menu input[type="text"]{ width:100%; padding:6px; background:#232526; color:#e6e6e6; border:1px solid #333; border-radius:4px; box-sizing:border-box; }
  

/* 头像选择弹窗 */
.avatar-modal{ position: fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:3000; }
.avatar-modal.show{ display:flex; }
.avatar-modal .overlay{ position:absolute; inset:0; background:rgba(0,0,0,0.45); }
.avatar-modal .dialog{
  position:relative; width:520px; max-width:94%; border-radius:8px; padding:12px;
  background:#1f2224; color:#e6e6e6; box-shadow:0 10px 30px rgba(0,0,0,0.6); z-index:2;
}
.avatar-modal .dialog h4{ margin:0 0 8px 0; font-size:16px; }
.avatar-modal .dialog .small-muted{ color:#9aa0a6; margin-top:6px; }

/* 头像 modal 的预设图片样式 */
.avatar-presets{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:6px;
}
.avatar-presets .avatar-preset{
  width:64px;
  height:64px;
  border-radius:8px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  background:#222;
  cursor:pointer;
  border:2px solid transparent;
  box-sizing:border-box;
  padding:4px;
}
.avatar-presets .avatar-preset img{ width:48px;height:48px;object-fit:cover;display:block;border-radius:6px; }
.avatar-presets .avatar-preset .preset-name{
  margin-top:4px;
  font-size:11px;
  color:#dcdcdc;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
  text-align:center;
}
.avatar-presets .avatar-preset.selected{ border-color:#2e9cff; box-shadow:0 6px 18px rgba(46,156,255,0.12); }

#playersListPreview .player-avatar,
.left .label-icon.players-area #playersListPreview .player-avatar,
.group li .face .player-avatar,
button.player-avatar {
  width:26px !important;
  height:26px !important;
  min-width:26px !important;
  flex:0 0 26px !important;    /* 防止 flex 缩小 */
  padding:0 !important;
  margin:0 !important;
  box-sizing:border-box !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
}

/* 图片填充，保证圆形显示且不被裁切 */
#playersListPreview .player-avatar img,
.group li .face .player-avatar img {
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
  border-radius:50% !important;
}
  /* tabs 风格 */
  .top-tabs{
  display:flex;
  gap:10px;
  padding:10px 12px;
  align-items:center;
  justify-content:center;
  background:transparent;
  height: var(--tabs-height);
  margin-top:0;
  box-sizing:border-box;

  /* 新增：固定到窗口顶部 */
  position:fixed;
  top: calc(var(--banner-height) + 24px); /* 把 tabs 放在横幅下方，24px 可调 */
  left:50%;
  transform:translateX(-50%);
  width:80%; 
  z-index:1200;
  width: calc(100% - 50px);
  max-width: var(--content-max-width);
}
/* 背景宽条：用伪元素绘制，避免改 DOM。调整 background/color 可按需修改 */
.top-tabs::before{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;             /* 覆盖 .top-tabs 的 80% 宽度 */
  height: 100%;
  background: linear-gradient(90deg, rgba(46,156,255,0.12), rgba(46,156,255,0.04));
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  z-index: 1199;           /* 在按钮之下但在页面内容之上 */
  pointer-events: none;
}

/* 确保按钮在背景之上并可交互 */
.top-tabs .tab-btn{
  position: relative;
  z-index: 1200;
}
.top-tabs .tab-btn{
  padding:8px 32px;
 
  border:1px solid transparent;
  background:transparent;
  color:var(--tab-color,#dcdcdc);
  cursor:pointer;
}
.top-tabs .tab-btn[aria-selected="true"],
.top-tabs .tab-btn.active{
  font-size: 15px;
  font-weight: 600;
  color:#e6e6e6;
  position:relative;
  padding-bottom:12px;         /* 下划线距离文字的间距 */
  border-bottom:1px solid #d3d3d3; /* 下划线颜色/粗细 */
  border-radius:2px;          /* 可选：圆角效果 */
}
/* 面板容器：由 JS 控制 display */
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }


/* 让 container-tools 与顶部宽条（.top-tabs）等宽并居中，同时下移以避开 tabs/title */
.container-tools{
  position: fixed;
  top: calc(var(--tabs-height) - 200px); /* 在 tabs 下方，可微调 */
  left: 50%;
  transform: translateX(-50%);
  width: 80%;                            /* 与 .top-tabs 保持一致的 80% 宽 */
  max-width: var(--content-max-width);
  padding: 12px 20px;
  box-sizing: border-box;
  background: transparent;               /* 如需同背景可改为渐变或实色 */
  color: #e6e6e6;
  border-radius: 8px;
  z-index: 1150;                         /* 在页面内容之上但低于 tabs 背景 (1199/1200) */
  margin: 0;
  display:flex;
  align-items:center;
  gap:12px;
  padding: 8px 16px;
  background: transparent;
  box-sizing: border-box;                             /* 清除原有 margin，避免被多次计算 */
}

/* 当 panel-tools 被显示时，保证面板内容与 tabs 左边对齐（防止内部额外内边距） */
#panel-tools { display:block; } /* panel 显示逻辑由 JS 控制；此行可保留或删除 */
#panel-tools .container-tools { margin-top: calc(var(--title-height) + var(--tabs-height) + 10px); }
#panel-tools-placeholder{ height: calc(var(--tabs-height) + var(--title-height) + 12px); display:block; pointer-events:none; }
/* 如果你希望 container-tools 使用与 tabs 相同的背景宽条（可选）：
   复制 .top-tabs::before 的渐变样式到 container-tools::before 并设置 position:relative; */
.container-tools{ position: relative; }
.container-tools::before{
  content:"";
  position:absolute;
  left:15%;
  transform:translateX(-50%);
  width:30%;
  height:100%;
  background: linear-gradient(90deg, rgba(47, 88, 124, 0.16), rgba(46,156,255,0.02));
  border-radius:10px;
  z-index: -1;
  pointer-events: none;
}
/* 标题靠左、占据自然宽度 */
.container-tools h3{
  margin:0;
  font-size:18px;
  font-weight:600;
  flex:0 0 auto;
}
/* hint 与标题同行并靠右（如果想紧随标题则去掉 margin-left:auto） */
.container-tools .hint{
  margin:0;
  color:#bdbdbd;
  font-size:13px;
  margin-left:0; /* ← 关键：将 hint 推到右侧，若不需要右对齐改为 margin-left:0 */
  white-space:nowrap;
}
.container-tools .new-event-btn{
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  background:transparent;
  color:inherit;
  border:1px solid rgba(255,255,255,0.06);
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
  box-shadow: none;
}
.container-tools .new-event-btn:hover{
  background: rgba(46,156,255,0.08);
  box-shadow: 0 8px 20px rgba(46,156,255,0.06);
  transform: translateY(-3px);
}
.container-tools .new-event-btn:active{
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(46,156,255,0.05);
}
.container-tools .new-event-btn:focus{
  outline: 2px solid rgba(46,156,255,0.18);
  outline-offset: 2px;
}
/* 可选：在窄屏时缩小内边距 */
@media (max-width:520px){
  .container-tools .new-event-btn{ padding:6px 10px; font-size:14px; }
}

/* ====== 插入：事件弹窗样式（放在 <style> 块末尾） ====== */
  .event-modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:2600; }
.event-modal.show{ display:flex; }
.event-modal .overlay{ position:absolute; inset:0; background:rgba(0,0,0,0.55); }
.event-modal .dialog{ position:relative; width:880px; max-width:94%; background:#161819; color:#e6e6e6; border-radius:10px; box-shadow:0 12px 36px rgba(0,0,0,0.6); padding:14px; box-sizing:border-box; z-index:2; }
.event-modal .dialog .close-btn{ position:absolute; right:10px; top:10px; background:transparent;border:0;color:#cfcfcf;font-size:20px;cursor:pointer; }
.event-tabs{ display:flex; gap:8px; margin:8px 0 12px; }
.event-tabs .evt-tab{ background:transparent;border:0;padding:8px 14px;border-radius:6px;color:#cfcfcf;cursor:pointer; font-weight:600; }
.event-tabs .evt-tab.active{ color:#fff; background:rgba(46,156,255,0.12); box-shadow:0 6px 18px rgba(46,156,255,0.06); position:relative; }
.event-panels .evt-panel{ display:none; }
.event-panels .evt-panel.active{ display:block; }
.event-panel-row{ display:flex; gap:12px; align-items:center; margin:8px 0; }
.event-panel-row label{ min-width:110px; color:#bfbfbf; }
.event-results{ margin-top:8px; max-height:320px; overflow:auto; border:1px solid #2b2b2b; padding:8px; border-radius:6px; background:#0f1112; }

/* 小屏幕适配 */
@media (max-width:720px){
  .event-modal .dialog{ width:95%; padding:10px; }
  .event-panel-row{ flex-direction:column; align-items:stretch; }
  .event-panel-row label{ min-width:0; }
}
 /* 插入：section-wrap 管理样式，便于后续按 id 控制位置/可见性 */
.section-wrap{ margin:10px 0; box-sizing:border-box; }
/* 当需要整体隐藏某个版块时，可以给 wrapper 加上 .hidden */
.section-wrap.hidden{ display:none !important; }
.tab-panel{ display:block; } /* 原有 JS 控制 display，如有冲突请保留原规则 */
   
/* 调整：让晋级面板为横向可换行的容器，组为卡片，组内选手横向排列并换行 */
#promoGroupsPanel{
  position: fixed;
  /* 宽度与 container-tools 保持一致（与“新建赛事”左边对齐） */
  width: 13%;
  max-width: var(--content-max-width);
  /* top / right / bottom / left —— 左侧留出与 container-tools 相同的偏移（(100%-80%)/2 = 10%） */
  margin: 8px 0 0 10%;
  padding-left: 0px; /* 与 container-tools 内部内容对齐 */
  box-sizing: border-box;
  top: calc(var(--banner-height) + var(--tabs-height) + 90px);
  /* 保持竖向堆叠样式 */

    /* 关键：限制高度并允许滚动 */
    max-height: calc(100vh - (var(--banner-height) + var(--tabs-height) + 110px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:stretch;
}
#promoGroupsPanel{
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE */
}
#promoGroupsPanel::-webkit-scrollbar{ width:0; height:0; }

/* 每个组作为卡片垂直排列 */
#promoGroupsPanel .group{
  
  background:#252525;
  border-radius:8px;
  padding:5px;
  color:#e6e6e6;
  display:flex;
  flex-direction:column;
  width:100%;
 
  min-width: 0 !important;    /* 取消全局 min-width 限制 */
  width: auto !important;
  flex: 1 1 auto !important;  /* 按容器宽度弹性伸缩 */
  max-width: 100% !important;
  box-sizing: border-box;
}

/* 组标题（第一行） */
#promoGroupsPanel .group-title{
  cursor: pointer;
  position: relative;
  font-weight:700;
  color:#ffdca3;
  margin-bottom:8px;
  z-index: 1302;
  user-select: none;
}

/* 组内选手：竖向排列（每个 player-card 为一行） */
#promoGroupsPanel .group-items{
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* 单个选手一行：三列布局（序号 / 名字 / 得分） */
#promoGroupsPanel .player-card{
  display:flex;
  align-items:center;
  gap:5px;
  padding:8px;
  background:#444444;
  border-radius:6px;
  border:1px solid #232325;
  font-size:13px;
  box-sizing:border-box;
  width:100%;
  height: 35px;
}

/* 列宽度：序号固定，名字弹性，得分固定右对齐 */
#promoGroupsPanel .player-no{ 
  flex:0 0 23px; 
  min-width:20px; 
  text-align:center;
   background:#696969;
    color:#202020; 
    font-weight:600;
     border-radius:4px; 
     height:33px; 
     display:inline-flex;
      align-items:center; 
      justify-content:center; 
      margin-left: -6px;
    
    }
#promoGroupsPanel .player-name{ 
  flex:1 1 auto; 
  overflow:hidden; 
  text-overflow:ellipsis; 
  white-space:nowrap; 
  padding-left:6px;
 }

#promoGroupsPanel .player-score
{  
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:15px; 
  text-align:center;
   background:#696969;
    color:#e4ba00de; 
    font-weight:600;
     border-radius:4px; 
     height:33px;
  flex:0 0 15px; 
  padding:0 6px;
  margin-right: -7px;
  
 }


.banner-admin-wrap {
  position: fixed;
  top: 10px;
  right: 18px;
  z-index: 1225;
}

.banner-admin-btn {
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(17,17,17,0.75);
  color: #f4f4f4;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 13px;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: transform .15s ease, background .15s ease;
}

.banner-admin-btn:hover {
  background: rgba(46, 157, 255, 0.336);
  transform: translateY(-1px);
}

.banner-admin-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1300;
}

.banner-admin-modal.show {
  display: flex;
}

.banner-admin-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}

.banner-admin-dialog {
  position: relative;
  width: min(420px, calc(100vw - 24px));
  background: #121314;
  border: 1px solid #2b2b2d;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
  padding: 18px 18px 14px;
  color: #f1f1f1;
  box-sizing: border-box;
}

.banner-admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.banner-admin-header h3 {
  margin: 0;
  font-size: 18px;
}

.banner-admin-close {
  border: 0;
  background: transparent;
  color: #d6d6d6;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.banner-admin-tip {
  color: #bdbdbd;
  margin: 0 0 12px;
  font-size: 14px;
}

.banner-admin-dialog input {
  width: 100%;
  box-sizing: border-box;
  background: #232526;
  color: #f3f3f3;
  border: 1px solid #36383a;
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 6px;
}

.banner-admin-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.banner-url-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.banner-url-list label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #d9d9d9;
  font-size: 14px;
}

.banner-upload-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.banner-upload-row .banner-url-input {
  flex: 1 1 auto;
}

.banner-pick-file-btn {
  flex: 0 0 auto;
  border: 1px solid #2c2c2c;
  border-radius: 8px;
  background: transparent;
  color: #dfeaf7;
  padding: 8px 10px;
  cursor: pointer;
  white-space: nowrap;
}

.banner-file-input {
  display: none;
}

/* 响应式：小屏时保持可读性 */
@media (max-width:600px){
  #promoGroupsPanel .player-no{ flex:0 0 34px; min-width:34px; }
  #promoGroupsPanel .player-score{ flex:0 0 44px; min-width:44px; }
}
 /* ====== 插入：轮动横幅样式（放在 <style> 块末尾，覆盖优先级放后） ====== */
:root{ --banner-height:180px; } /* 可按需调整横幅高度 */
#rotatingBanner{
    position:fixed;
  left:50%;
  transform:translateX(-50%);
  top: 12px;
  width:80%;
  max-width:var(--content-max-width);
  height:var(--banner-height);
  z-index:1210;
  overflow:hidden;
  border-radius:8px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  background:#0b0b0b;
  display:block;
  box-sizing:border-box;
}
#rotatingBanner .rb-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .6s ease;
  will-change:opacity;
}
#rotatingBanner .rb-slide.active{ opacity:1; }
#rotatingBanner .rb-controls{ position:absolute; right:10px; bottom:8px; z-index:2; display:flex; gap:8px; }
#rotatingBanner .rb-dot{ width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.28); cursor:pointer; }
#rotatingBanner .rb-dot.active{ background:#2e9cff; }

/* 覆盖：确保首字头像为彩色背景、白色加粗字 */
#promoGroupsPanel .player-avatar{
  font-weight:700 !important;
  color:#ffffff !important;
  background: #6b6b6b !important; /* 若 JS 未设置背景色，这里有默认 */
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:28px !important;
  height:28px !important;
  min-width:28px !important;
  border-radius:50% !important;
  box-sizing:border-box !important;
  line-height:1 !important;
  overflow:hidden !important;
  
}
/* 图片填充规则 */
#promoGroupsPanel .player-avatar img{ width:100% !important; height:100% !important; object-fit:cover !important; border-radius:50% !important; }

/* 页面右侧自定义滚动条容器（只显示滑块） */
#promoScrollProxy{
  position: fixed;
  right: 8px; /* 距离页面右侧间距，可调整 */
  z-index: 1400;
  width: 10px;            /* 只显示细滑块 */
  background: transparent;
  border-radius: 8px;
  box-sizing: border-box;
  /* top/height 与 promo 面板可视区域同步（JS 会计算并覆盖 inline style） */
  pointer-events: auto;
  user-select: none;
}
#promoScrollProxy .track{
  position: absolute;
  inset: 0;
  background: transparent; /* 隐藏轨道，只保留 thumb */
}
#promoScrollProxy .thumb{
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 36px; /* 初始高度（会由 JS 计算） */
  background: rgba(255,255,255,0.18); /* 滑块颜色 */
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.45);
  transition: background .12s;
  cursor: pointer;
}

/* hover / active 提示 */
#promoScrollProxy .thumb:hover{ background: rgba(255,255,255,0.26); }
#promoScrollProxy .thumb:active{ background: rgba(255,255,255,0.34); }

/* 小屏时适度缩小 */
@media (max-width:600px){
  #promoScrollProxy{ right:6px; width:8px; }
  #promoScrollProxy .thumb{ height:30px; border-radius:5px; }
}




/* 已晋级列表样式（置于每个组卡片内，紧跟 group-items 之后） */
.promo-selected{
  margin-top:8px;
  border-top:1px dashed rgba(255,255,255,0.06);
  padding-top:8px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.promo-selected .small-muted{ color:#bdbdbd; font-size:12px; margin-bottom:4px; }
/* 已晋级的条目，外观与 player-card 类似，便于复用内联编辑等逻辑 */
.promoted-card{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px;
  background:#2f2f2f;
  border-radius:6px;
  border:1px solid #242424;
  font-size:13px;
  box-sizing:border-box;
  width:100%;
  height:32px;
}

/* 新增：浮动晋级容器（不改原有 layout） */
#promoFloating{
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none; /* 容器本身不拦截事件，卡片允许 pointer-events */
  z-index: 2700; /* 高于编辑弹窗（2601），低于头像弹窗（3000） */
}
/* 浮动卡片样式（绝对定位，由 JS 布局） */
.promoted-card-floating{
  position: absolute;
  pointer-events: auto;
  display:flex;
  gap:8px;
  align-items:center;
  padding:6px;
  background:#2b2b2b;
  border-radius:6px;
  border:1px solid rgba(0,0,0,0.45);
  color:#e6e6e6;
  min-width:220px;
  box-sizing:border-box;
  height:36px;
  font-size:13px;
  box-shadow:0 6px 18px rgba(0,0,0,0.35);
  transition: none;
}
.promoted-card-floating .player-no{ 
 
  flex:0 0 10px; 
  text-align:center; background:rgba(255,255,255,0.28); color:#202020; font-weight:600; border-radius:4px; height:32px; display:flex; align-items:center; justify-content:center; padding:0 6px; }
.promoted-card-floating .player-name{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-left:6px; }
.promoted-card-floating .player-avatar{ width:32px; height:32px; min-width:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; background:#474747; box-sizing:border-box; overflow:hidden; }
.promoted-card-floating .player-avatar img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }
.promoted-card-floating .player-score{ flex:0 0 10px; min-width:20px; text-align:center; background:#444; color:#e4ba00de; font-weight:700; border-radius:4px; height:32px; display:flex; align-items:center; justify-content:center; padding:0 6px; }
/* 保证卡片没有动画/浮起效果 */
#promoFloating .promoted-card-floating{ transition:none !important; transform:none !important; }

/* 新增：更平滑的 3D 透视与通用样式 */
.group li { perspective: 900px; }
.group li .flip { transform-style: preserve-3d; will-change: transform, opacity; }

/* 当使用传统 CSS 退路时确保视觉合理 */
.group li .face { backface-visibility: hidden; }

/* 可选：控制动画期间的 visual hint（鼠标禁用/阴影） */
.group li .flip.animating { box-shadow: 0 8px 26px rgba(0,0,0,0.45); }

/* effectBtn：暗色背景 + 白字，覆盖内联样式 */
#effectBtn,
#effectBtn.btn-ghost {
  background: #161718 !important;
  color: #ffa600 !important;
  border: 1px solid rgba(255,255,255,0.36) !important;
  box-shadow: none !important;
  padding: 6px 20px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
}

/* hover / focus 状态 */
#effectBtn:hover,
#effectBtn:focus,
#effectBtn.btn-ghost:hover,
#effectBtn.btn-ghost:focus {
  background: #222426 !important;
  outline: none !important;
  box-shadow: 0 6px 18px rgba(46,156,255,0.04) !important;
}
#effectBtn[disabled] { opacity: 0.6; pointer-events: auto; } /* 保持可点击（脚本可能强制启用） */