/* ============================================================================
   live.css — 直播模式样式（暗色电竞 + 玻璃拟态，与 main.css 风格同源）
   新增：直播信息条 #liveBar、观众列表、加入/关播弹窗、只读态。
   ============================================================================ */

/* ---------- 直播信息条 ---------- */
.live-bar {
  position: sticky;
  top: 0;
  z-index: 80;
  width: 100%;
  max-width: 420px;
  margin: 0 auto 14px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(18, 40, 28, 0.92), rgba(12, 26, 18, 0.92));
  border: 1px solid rgba(127, 200, 160, 0.28);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
}
/* ---------- 对战顶部信息条：样式与直播间 .live-bar 保持一致 ---------- */
.duel-bar {
  position: sticky;
  top: 0;
  z-index: 80;
  width: 100%;
  max-width: 420px;
  margin: 0 auto 14px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(18, 40, 28, 0.92), rgba(12, 26, 18, 0.92));
  border: 1px solid rgba(127, 200, 160, 0.28);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
}
.duel-bar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}
.duel-bar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.duel-room {
  font-size: 12px;
  color: #9bb6a4;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.duel-room b {
  color: #f0d860;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: 1px;
}
/* ---------- 对战防守方/观众 / 直播观众：主操作按钮整体置灰（duel-idle 由 syncDuelControls 切换，live-viewer 由 syncViewerControls 切换） ---------- */
/* 与普通比赛禁用态一致：浅色半透明白底 + 深色文字 */
body.duel-idle #rollBtn:disabled,
body.duel-idle #take1BBtn:disabled,
body.duel-idle #roll2Btn:disabled,
body.duel-idle .bs-choice-btn:disabled,
body.live-viewer #rollBtn:disabled,
body.live-viewer #take1BBtn:disabled,
body.live-viewer #roll2Btn:disabled,
body.live-viewer .bs-choice-btn:disabled,
body.live-page-viewer #rollBtn:disabled,
body.live-page-viewer #take1BBtn:disabled,
body.live-page-viewer #roll2Btn:disabled,
body.live-page-viewer .bs-choice-btn:disabled {
  background: rgba(255, 255, 255, 0.4);
  color: #2d5a3d;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
body.duel-idle #rollBtn:disabled:hover,
body.duel-idle #take1BBtn:disabled:hover,
body.duel-idle #roll2Btn:disabled:hover,
body.duel-idle .bs-choice-btn:disabled:hover,
body.live-viewer #rollBtn:disabled:hover,
body.live-viewer #take1BBtn:disabled:hover,
body.live-viewer #roll2Btn:disabled:hover,
body.live-viewer .bs-choice-btn:disabled:hover,
body.live-page-viewer #rollBtn:disabled:hover,
body.live-page-viewer #take1BBtn:disabled:hover,
body.live-page-viewer #roll2Btn:disabled:hover,
body.live-page-viewer .bs-choice-btn:disabled:hover {
  background: rgba(255, 255, 255, 0.4);
  color: #2d5a3d;
  transform: none;
  box-shadow: none;
}
/* 对战/直播观众 Roll 置灰：参照「打」按钮——背景保持白渐变，仅文字降为半透明深绿 */
body.duel-idle #rollBtn:disabled,
body.duel-idle #rollBtn:disabled:hover,
body.live-viewer #rollBtn:disabled,
body.live-viewer #rollBtn:disabled:hover,
body.live-page-viewer #rollBtn:disabled,
body.live-page-viewer #rollBtn:disabled:hover {
  background: linear-gradient(135deg, #ffffff 0%, #eaf0ec 100%);
  color: rgba(45, 90, 61, 0.5);
}
/* 直播观众：再来一局按钮与主按钮区一致置灰（不隐藏） */
body.live-viewer #newGameBtn:disabled,
body.live-page-viewer #newGameBtn:disabled {
  background: rgba(255, 255, 255, 0.4);
  color: #2d5a3d;
  cursor: not-allowed;
  box-shadow: none;
}
/* 直播观众：技能包按钮不显示（以右侧刷新按钮替代） */
body.live-viewer .item-bag-btn,
body.live-page-viewer .item-bag-btn {
  display: none !important;
}
/* 好坏球开关（防守方/观众禁用）：整体置灰 */
.bs-toggle.bs-not-turn {
  cursor: not-allowed;
  opacity: 0.55;
}
/* 主按钮区顶行：同步按钮（左上）+ 好坏球开关（右上），与 Roll 上方左右对称。
   原 .bs-toggle 的上下间距（-12px 上移贴骰区、30px 下距 Roll）移到此容器上 */
.bar-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: -12px 0 30px;
}
.bar-top-row .bs-toggle { margin: 0; }
/* 同步按钮：紧凑小按钮，与好坏球开关视觉协调（半透明描边 + 浅色文字）。
   width:auto 覆盖 main.css 全局 button 的 width:100%，避免在 bar-top-row 中被拉满整行 */
#hardRefreshBtn {
  padding: 6px 14px;
  font-size: 12px;
  line-height: 1;
  border: 1px solid rgba(180, 210, 190, 0.35);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.10);
  color: #d7e6da;
  cursor: pointer;
  box-shadow: none;
  width: auto;
  flex: 0 0 auto;
}
#hardRefreshBtn:hover { background: rgba(255, 255, 255, 0.16); }
#hardRefreshBtn:active { transform: scale(0.95); }
/* 防守态「同步」补救窗口：主操作区仅保留「同步」按钮（roll/打看/好坏球隐藏）。
   窗口开启（action-bar 挂 sync-window）时 actionBar 仍显示（见 syncDuelControls），
   其余按钮隐藏，只留「同步」；收到对方进攻局面后窗口关闭、整区隐藏。
   注意用 sync-window 限定，避免影响半局结束等 duel-idle 场景下应置灰显示的 rollBtn */
body.duel-idle .action-bar.sync-window #rollBtn,
body.duel-idle .action-bar.sync-window #bsChoiceBox,
body.duel-idle .action-bar.sync-window #choiceBox,
body.duel-idle .action-bar.sync-window .bar-top-row .bs-toggle { display: none !important; }
.live-bar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}
.live-bar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.live-status-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  flex: 0 0 auto;
  transition: background .2s;
}
.live-status-dot.on {
  background: #ff5252;
  box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7);
  animation: livePulse 1.6s infinite;
}
.live-status-dot.on.viewer {
  background: #69f0ae;
  box-shadow: 0 0 0 0 rgba(105, 240, 174, 0.7);
  animation: livePulseViewer 1.6s infinite;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7); }
  70%  { box-shadow: 0 0 0 8px rgba(255, 82, 82, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 82, 82, 0); }
}
@keyframes livePulseViewer {
  0%   { box-shadow: 0 0 0 0 rgba(105, 240, 174, 0.7); }
  70%  { box-shadow: 0 0 0 8px rgba(105, 240, 174, 0); }
  100% { box-shadow: 0 0 0 0 rgba(105, 240, 174, 0); }
}
.live-bar-title {
  font-size: 14px; font-weight: 700; color: #e8f0e8;
  white-space: nowrap; flex: 0 0 auto;
}
.live-room {
  font-size: 12px; color: #9bb6a4; white-space: nowrap;
  display: flex; align-items: center; gap: 6px; min-width: 0;
}
.live-room b {
  color: #f0d860; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: 1px;
}
.live-copy {
  width: auto; padding: 3px 8px; font-size: 11px; font-weight: 700;
  border: none; border-radius: 7px; cursor: pointer;
  background: rgba(240, 216, 96, 0.16); color: #f0d860;
}
.live-copy:hover { background: rgba(240, 216, 96, 0.28); }

/* ---------- 直播大厅：返回主页按钮（小尺寸、醒目，与标题紧凑） ---------- */
.live-back {
  display: inline-block;
  width: auto; min-height: 0; line-height: 1;
  margin-bottom: 4px;
  padding: 7px 14px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.5px;
  border: 1px solid rgba(127, 200, 160, 0.45); border-radius: 8px; cursor: pointer;
  background: rgba(127, 200, 160, 0.14); color: #bfe9cd;
  box-shadow: none !important;
  transition: filter .15s, color .15s;
}
.live-back:hover { filter: brightness(1.15); color: #fff; border-color: rgba(127, 200, 160, 0.85); }

/* ---------- 直播条按钮 ---------- */
.live-btn {
  display: inline-block;
  width: auto !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 700;
  border: none; border-radius: 10px; cursor: pointer;
  white-space: nowrap; min-height: 0 !important;
  box-shadow: none !important;
  transition: filter .15s, transform .12s;
}
.live-btn:hover { filter: brightness(1.1); }
.live-btn:active { transform: scale(0.95); }
.live-btn-host { background: linear-gradient(135deg, #2e7d32, #1e5c40); color: #fff; }
.live-btn-viewer { background: rgba(255, 255, 255, 0.12); color: #e8f0e8; }
/* 主播端「关闭房间」：亮蓝渐变，与「自定义挑战」按钮同款，统一挑战色系 */
.live-btn-stop { background: linear-gradient(135deg, #7cb8ff, #3f7ec4); color: #fff; }
.live-btn-exit { background: linear-gradient(135deg, #e5484d, #b8303a); color: #fff; }

/* 暂停/恢复按钮：中性蓝灰，与关播红区分 */
.live-btn-pause { background: linear-gradient(135deg, #4b6584, #34597f); color: #fff; }
.live-btn-pause:hover { filter: brightness(1.08); }
.live-status-dot.paused { background: #ffcf5c; }

/* ---------- 观众列表（直播条右侧）---------- */
.live-viewers {
  display: flex; align-items: center; gap: 5px; flex-wrap: nowrap;
  overflow-x: auto; max-width: 150px; scrollbar-width: thin;
}
.viewer-dot {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px 7px; border-radius: 8px; font-size: 11px; font-weight: 600;
  white-space: nowrap; flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.viewer-dot.host {
  background: rgba(240, 216, 96, 0.16); color: #f0d860;
  border-color: rgba(240, 216, 96, 0.4);
}
.viewer-dot.viewer {
  background: rgba(105, 240, 174, 0.12); color: #69f0ae;
  border-color: rgba(105, 240, 174, 0.32);
}

/* ---------- 直播标签（标题旁）：描边式，与实心渐变翻译按钮区分 ---------- */
.live-tag {
  display: inline-block; margin-left: 8px; padding: 2px 9px;
  font-size: 13px; font-weight: 700; vertical-align: -0.15em;
  color: #f05a4d; background: transparent;
  border: 1px solid rgba(240, 90, 77, 0.5);
  border-radius: 8px; letter-spacing: 1px;
  /* 整体上移 5px：各页面标题标签统一（原先视觉上偏下）。
     relative 不脱离文档流，不影响标题行高度与其他元素布局。
     子页面（速报/挑战/对战/Live!）的变体只需改配色，位移统一继承自此。 */
  position: relative;
  top: -5px;
}
/* ---------- 对战标签：空心黄边黄字（描边式），与直播红描边区分 ---------- */
.duel-tag {
  color: #f0d860; background: transparent;
  border-color: rgba(240, 216, 96, 0.5);
}

/* ---------- 观众模式：主按钮区与主播/对战房布局一致，置灰不隐藏（置灰见上方 duel-idle / live-viewer 组） ---------- */

/* ---------- 加入直播弹窗 ---------- */
.join-overlay, .closed-overlay {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 14, 24, 0.62);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
  padding: 20px;
}
.join-overlay.show, .closed-overlay.show { opacity: 1; pointer-events: auto; }
.join-card, .closed-card {
  position: relative; width: min(380px, 90vw);
  background: linear-gradient(160deg, rgba(20, 40, 28, 0.97), rgba(10, 22, 14, 0.97));
  border: 1px solid rgba(127, 200, 160, 0.32);
  border-radius: 18px; padding: 24px 22px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  transform: translateY(12px) scale(0.98); transition: transform .2s ease;
}
.join-overlay.show .join-card, .closed-overlay.show .closed-card { transform: translateY(0) scale(1); }
.join-close {
  position: absolute; top: 10px; right: 14px; width: auto; font-size: 22px; line-height: 1;
  color: #a8c4ae; cursor: pointer; border: none; background: none;
  box-shadow: none; /* 透明图标按钮：去掉通用 button 继承的 inset 阴影 */
}
.join-close:hover { color: #fff; }
.join-title { font-size: 18px; font-weight: 800; color: #fff; margin-bottom: 6px; }
.join-desc { font-size: 13px; line-height: 1.6; color: #a8c4ae; margin-bottom: 16px; }
.join-input {
  width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16);
  color: #e8f0e8; font-size: 16px; letter-spacing: 2px; text-align: center;
  text-transform: uppercase; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  outline: none;
}
.join-input:focus { border-color: #5a9a78; box-shadow: 0 0 0 3px rgba(90, 154, 120, 0.25); }
.join-msg { min-height: 18px; margin-top: 10px; font-size: 12px; text-align: center; color: #8ab894; }
.join-msg.err { color: #f08070; }
.join-btns { display: flex; gap: 10px; margin-top: 14px; }
.join-cancel, .join-confirm {
  flex: 1; padding: 11px; border: none; border-radius: 10px;
  font-size: 14px; font-weight: 700; cursor: pointer;
}
.join-cancel { background: rgba(255, 255, 255, 0.1); color: #cbd5e1; }
.join-cancel:hover { background: rgba(255, 255, 255, 0.16); }
.join-confirm { background: linear-gradient(135deg, #3a9a6a, #1e5c40); color: #fff; }
.join-confirm:hover { filter: brightness(1.08); }

/* ---------- 关播提醒弹窗 ---------- */
.closed-icon { font-size: 40px; text-align: center; margin-bottom: 8px; }
.closed-title { font-size: 18px; font-weight: 800; color: #fff; text-align: center; margin-bottom: 6px; }
.closed-desc { font-size: 13px; line-height: 1.6; color: #a8c4ae; text-align: center; margin-bottom: 18px; }
/* 比赛结果浮层：标题加大（无🏆）+ 比分展示 */
.duel-result-title { font-size: 26px; margin-bottom: 10px; }
/* 比赛结果浮层：获胜文案加大加粗 */
#duelResultDesc { font-size: 22px; font-weight: 800; color: #fff; }
.duel-result-score {
  font-size: 21px; font-weight: 800; color: #f0d860; text-align: center;
  letter-spacing: 1px; margin-bottom: 10px;
}
.closed-ok {
  width: 100%; padding: 12px 0; font-size: 15px; font-weight: 800; cursor: pointer;
  background: linear-gradient(135deg, #f0d860, #e8c84e); color: #2d5a3d;
  border: none; border-radius: 12px;
}
.closed-ok:active { transform: scale(0.98); }
/* 比赛结果浮层双按钮：横向均分，避免上下堆叠挤压 */
.closed-actions {
  display: flex;
  gap: 10px;
}
.closed-actions .closed-ok {
  flex: 1;
  padding: 12px 4px;
}
/* 次按钮「继续观看」：半透明描边风格，与黄色主按钮「返回大厅」区分 */
.closed-ok.ghost {
  background: rgba(255, 255, 255, 0.1);
  color: #d7e6da;
  border: 1px solid rgba(180, 210, 190, 0.35);
}
.closed-ok.ghost:hover { background: rgba(255, 255, 255, 0.16); }

/* ---------- 直播信息区日志（固定3行，向上滚动覆盖，不显示滚动条） ---------- */
#log {
  height: 3.6em;               /* 3 行（行高约 1.2em） */
  overflow: hidden;            /* 取消滚动条 */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* 新日志从底部上推 */
  box-sizing: border-box;
}
.log-line {
  flex: 0 0 auto;
  line-height: 1.2em;
  word-break: break-all;
}
.log-line.result-good { color: #6ee7a0; font-weight: 600; }
.log-line.result-bad { color: #f08070; font-weight: 600; }
.log-line.chat { color: #cfddd4; }

/* ---------- 弹幕输入框 ---------- */
.chat-bar {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.chat-input {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  padding: 9px 12px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: #e8f0e8;
  /* iOS 上 font-size < 16px 的输入框聚焦时页面会自动放大；设为 16px 规避。
     text-size-adjust 防止某些移动端浏览器额外缩放。 */
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  outline: none;
}
.chat-input::placeholder { color: #6a8a76; }
.chat-input:focus { border-color: #5a9a78; box-shadow: 0 0 0 3px rgba(90, 154, 120, 0.22); }
.chat-send {
  display: inline-block;
  width: auto; min-height: 0; line-height: 1;
  flex: 0 0 auto;
  padding: 9px 16px; font-size: 13px; font-weight: 700;
  border: none; border-radius: 9px; cursor: pointer;
  background: linear-gradient(135deg, #3a9a6a, #1e5c40); color: #fff;
  box-shadow: none !important;
  transition: filter .15s, transform .12s;
}
.chat-send:hover { filter: brightness(1.1); }
.chat-send:active { transform: scale(0.95); }

/* 直播卡片与 main 拉开层次 */
.live-card { margin-top: 0; }

/* live 页主操作区：骰子 3D 动画（will-change: transform + 0.6s 落定过渡）期间，
   iOS Safari 上按钮区易被波及产生亚像素抖动。main.css .action-bar 已带 translateZ(0)，
   这里再强化为 translate3d + will-change，长期保留独立合成层，隔离骰子动画的重绘波及。
   margin-top:0 覆盖 main.css 的 -10px：Roll 按钮与上方出局灯间隔增加 10px。 */
body.live-page-host .action-bar,
body.live-page-viewer .action-bar {
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  will-change: transform;
  margin-top: 0;
}

/* ---------- 直播大厅（宽度与其它页面一致，继承 .card 的 max-width） ---------- */
/* 对战大厅：创建/返回双按钮并排 */
.lobby-create-row {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.lobby-create-row .lobby-create { flex: 1; }
.lobby-create {
  display: block; width: 100%; box-sizing: border-box;
  padding: 14px 0; font-size: 15px; font-weight: 800; letter-spacing: 1px;
  border: none; border-radius: 11px; cursor: pointer;
  background: linear-gradient(135deg, #7cb8ff, #3f7ec4); color: #fff;
  box-shadow: 0 4px 16px rgba(124, 184, 255, 0.4);
  transition: filter .15s, transform .12s;
}
.lobby-create:hover { filter: brightness(1.1); }
.lobby-create:active { transform: scale(0.98); }
/* 对战大厅：「创建对战」黄底白字（黄白色系），仅作用于对战大厅页；
   「自定义挑战」改用蓝底，与创建对战的黄底视觉区分 */
body.duel-page-lobby .lobby-create.lobby-create-duel,
body.duel-page-lobby .lobby-create.lobby-create-duel.lobby-create-back {
  background: linear-gradient(135deg, #ffd23f, #f0a500); color: #fff;
  box-shadow: 0 4px 16px rgba(240, 168, 0, 0.4);
}
/* 已创建房间时按钮变为「返回对战/返回挑战」 */
.lobby-create.lobby-create-back {
  background: linear-gradient(135deg, #2e7d5b, #1a5a3a);
  box-shadow: 0 4px 16px rgba(46, 125, 91, 0.4);
}
.lobby-head {
  display: flex; justify-content: space-between; align-items: center;
  margin: 22px 0 10px;
}
.lobby-title { font-size: 15px; font-weight: 700; color: #f0d860; }
.lobby-count { font-size: 12px; color: #8aa08f; }
.lobby-empty {
  padding: 26px 16px; text-align: center; color: #8aa08f; font-size: 13px;
  border: 1px dashed rgba(255,255,255,0.16); border-radius: 11px;
}
.lobby-list { display: flex; flex-direction: column; gap: 10px; }
/* 直播大厅：直播项目栏与卡片底部拉开 20px 间距（仅作用于本页，不影响其他页面） */
.live-page-lobby .lobby-list { margin-bottom: 20px; }
/* 速报大厅：房间列表与卡片底部拉开间距（与直播大厅一致） */
.live-page-report .lobby-list { margin-bottom: 20px; }
/* 速报大厅标题标签：浅绿描边（与速报房间 report-badge.live 同色） */
.live-page-report .live-tag.report {
  color: #69f0ae;
  border-color: rgba(105, 240, 174, 0.5);
}
/* 挑战房间（solo-room 主播端）标题标签「挑战」：亮蓝描边，
   与挑战色系统一（徽标 / 「自定义挑战」按钮 / 战绩分区均为 #7cb8ff） */
body.live-page-host .live-tag {
  color: #7cb8ff;
  border-color: rgba(124, 184, 255, 0.5);
}
.lobby-item {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 12px 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 11px;
}
.lobby-item-info { min-width: 0; }
/* 房间行：类型标签 + 直播标签 + 比赛名同行显示，超长截断不换行 */
.lobby-item-id {
  display: flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 700; color: #fff; letter-spacing: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.lobby-item-meta { font-size: 12px; color: #8aa08f; margin-top: 3px; }
.lobby-item-actions { display: flex; gap: 8px; flex-shrink: 0; }
/* 对战大厅：房间按钮横排并稍窄 */
.duel-page-lobby .lobby-item-actions .lobby-btn { padding: 8px 10px; }
.lobby-btn {
  display: inline-block; width: auto; min-height: 0; line-height: 1;
  padding: 8px 14px; font-size: 13px; font-weight: 700;
  border: none; border-radius: 9px; cursor: pointer;
  box-shadow: none !important; white-space: nowrap;
  transition: filter .15s, transform .12s;
}
.lobby-btn-watch { background: linear-gradient(135deg, #35805f, #1e543b); color: #fff; }
.lobby-btn-duel { background: linear-gradient(135deg, #efc45f, #d19a35); color: #1a1a1a; }
.lobby-btn-back { background: linear-gradient(135deg, #3a9a6a, #1e5c40); color: #fff; }
/* 列表「返回对战」：与顶部「创建对战/返回对战」一致的黄底白字（黄白色系） */
.lobby-btn.lobby-btn-back-duel {
  background: linear-gradient(135deg, #ffd23f, #f0a500);
  color: #fff;
  box-shadow: 0 4px 16px rgba(240, 168, 0, 0.4);
}
.lobby-btn:hover { filter: brightness(1.12); }
.lobby-btn:active { transform: scale(0.95); }
/* 置灰：已参与对战/挑战时，「创建对战/自定义挑战」与列表「加入对战」不可用 */
.lobby-create:disabled,
.lobby-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.6);
  transform: none !important;
  box-shadow: none !important;
}
.lobby-create:disabled:hover { filter: grayscale(0.6); }
.lobby-btn:disabled:hover { filter: grayscale(0.6); }
.lobby-btn:disabled:active { transform: none; }

/* ---------- 对战大厅：用户名（队伍池随机，本地保存，黄黑色系） ---------- */
.duel-nick-row {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 8px; margin: 18px 0 2px; flex-wrap: wrap;
}
.duel-nick {
  display: inline-block;
  width: 125px; box-sizing: border-box;
  padding: 5px 12px; border-radius: 9px;
  font-size: 13px; font-weight: 700; color: #f0d860;
  text-align: center; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  background: rgba(240, 216, 96, 0.1);
  border: 1px solid rgba(240, 216, 96, 0.45);
}
.duel-nick.empty { color: #8aa08f; border-color: rgba(255,255,255,0.16); background: rgba(255,255,255,0.04); }
.duel-nick-rand {
  width: auto; height: auto; padding: 7px 12px;
  border: none; border-radius: 9px; cursor: pointer;
  background: linear-gradient(135deg, #ffd23f, #f0a500); color: #fff;
  font-size: 12.5px; font-weight: 700; line-height: 1; text-align: center;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(240, 168, 0, 0.4);
  transition: filter .15s, transform .12s;
}
.duel-nick-rand:hover { filter: brightness(1.08); }
.duel-nick-rand:active { transform: scale(0.95); }

/* ---------- 速报模式：大厅房间标签（描边式，与实心渐变翻译按钮区分） ---------- */
.report-badge {
  /* 完整声明 margin，覆盖 main.css 里 .challenge 卡片误命中的 margin-bottom: 24px */
  display: inline-block; margin: 0 6px 0 0; padding: 1px 7px;
  font-size: 11px; font-weight: 700;
  line-height: 1; /* 与 .duel-badge/.lobby-stream-tag 一致，徽标不高于同行文字 */
  background: transparent;
  border-radius: 6px; letter-spacing: 1px; vertical-align: middle;
}
.report-badge, .report-badge.live { color: #69f0ae; border: 1px solid rgba(105, 240, 174, 0.5); }  /* 直播速报（浅绿描边） */
/* 重播速报（橙描边）：原蓝色与「直播」标签（.lobby-stream-tag）撞色，改橙以便区分 */
.report-badge.replay { color: #ffa94d; border: 1px solid rgba(255, 169, 77, 0.5); }
.report-badge.challenge { color: #7cb8ff; border: 1px solid rgba(124, 184, 255, 0.5); }  /* 自定义挑战（亮蓝描边） */
.report-badge.duel { color: #f0d860; border: 1px solid rgba(240, 216, 96, 0.5); }  /* 对战（黄描边） */
/* 对战大厅房间状态徽标：等待中（黄）/ 比赛中（绿）/ 已结束（灰） */
.duel-badge {
  /* 完整声明 margin，覆盖 main.css 里 .challenge 卡片误命中的 margin-bottom: 24px */
  display: inline-block; margin: 0 6px 0 0; padding: 1px 7px;
  font-size: 11px; font-weight: 700;
  line-height: 1; /* 不继承容器大行高，避免徽标比同行文字高 */
  background: transparent; border-radius: 6px;
  letter-spacing: 1px; vertical-align: middle;
  border: 1px solid rgba(255, 255, 255, 0.18); color: #cfdde0;
}
.duel-badge.waiting { color: #f0d860; border-color: rgba(240, 216, 96, 0.5); }
.duel-badge.live { color: #69f0ae; border-color: rgba(105, 240, 174, 0.5); }
.duel-badge.ended { color: #8aa08f; border-color: rgba(138, 160, 143, 0.5); }
.duel-badge.challenge { color: #7cb8ff; border-color: rgba(124, 184, 255, 0.5); }  /* 我创建的挑战项目（亮蓝描边） */
/* 「开启直播」标签（蓝描边）：仅用于对战大厅 —— 那里房间可自主选择是否开直播，需要标注区分；
   直播大厅（/live）与 Live! 大厅（/stream）本身即直播入口，条目不再重复标注 */
.lobby-stream-tag {
  display: inline-block; margin-right: 6px; padding: 1px 7px;
  font-size: 11px; font-weight: 700;
  line-height: 1; /* 与 .duel-badge/.report-badge 一致，徽标不高于同行文字 */
  background: transparent; border-radius: 6px;
  letter-spacing: 1px; vertical-align: middle;
  color: #5aa0f0; border: 1px solid rgba(90, 160, 240, 0.5);
}

/* ---------- Live! 大厅（/stream）：速报组在上、直播组在下 ---------- */
/* 分组容器：某组无房间时由脚本整块隐藏（含小标题） */
.live-page-stream .lobby-section + .lobby-section { margin-top: 4px; }
/* 列表底部留白，与直播大厅 / 速报大厅保持一致 */
.live-page-stream .lobby-list { margin-bottom: 20px; }
/* 卡片底部引导语：点击回首页。纯文字链接（不做按钮），与主内容拉开间距 */
.live-page-stream .lobby-more {
  margin-top: 28px;
  text-align: center;
  font-size: 13px;
}
.live-page-stream .lobby-more a {
  color: #8aa08f;
  font-style: italic; /* 斜体：中文若无对应 italic 字形，浏览器会做倾斜合成 */
  text-decoration: none;
  letter-spacing: 0.5px;
  transition: color .15s ease;
}
.live-page-stream .lobby-more a:hover { color: #bfe9cd; }
/* 标题标签「Live!」：直播红实心底 + 白字（由描边式改实心，突出直播中状态）
   字体用 Bungee（Google Fonts 粗壮方块展示体）。
   必须显式 font-weight:400，否则继承 .live-tag 的 700 会触发合成加粗、字形发糊 */
.live-page-stream .live-tag.stream {
  color: #fff;
  background: linear-gradient(135deg, #f05a4d, #c93a2e);
  border-color: transparent; /* 保留 1px 边框占位，避免描边→实心时布局跳动 */
  /* 圆角收方：由胶囊（999px）回调到 8px。
     标签高约 23px，border-radius ≥ 约 11px 即等同全圆（胶囊），
     8px 约为高度的三分之一，呈明显的圆角矩形。更方用 6px、更圆用 10px。 */
  border-radius: 8px;
  /* Bungee 优先；字体不可达时退到系统自带的粗壮展示体（Arial Black / Impact），
     避免直接掉到 system-ui 变成普通细字重、丢失粗壮观感 */
  font-family: "Bungee", "Arial Black", "Impact", system-ui, sans-serif;
  font-weight: 400;  /* Bungee 仅 400 字重，避免继承 .live-tag 的 700 触发合成加粗 */
  font-size: 15px;   /* 比基础 .live-tag 的 13px 略大，红底白字下更醒目 */
  letter-spacing: 1px;
  line-height: 1.15; /* 收紧默认行高 → 胶囊更矮，底色更紧凑 */
  /* 上 1 / 下 3 不对称内边距：文字在底色内略微上移（原来视觉偏下）；
     左右内边距由 11px 收到 8px，底色宽度再短一截 */
  padding: 1px 8px 3px;
  /* 位移统一继承自基础 .live-tag（top:-5px），此处不再重复声明 */
}

/* ============================================================================
   速报观看页（report-viewer.html）
   ============================================================================ */
body.report-page-viewer .situation { margin-top: 24px; }
/* 速报页：缩小 result 与 situation 的间距，字号在通用 17px 基础上减小 */
.report-page-viewer .result {
  margin-top: -2px;
  font-size: 16px;
}
/* 实时翻译按钮锚点（高度 0，位于 situation 与 result 之间）：
   按钮绝对定位在垒包右侧、投打栏下方 */
.report-page-viewer .translate-anchor { position: relative; height: 0; }
/* 实时翻译按钮：浅绿色渐变，与页面绿色系统一 */
.report-page-viewer .translate-btn {
  position: absolute;
  right: 0;
  top: 0;
  width: 32px; height: 32px;
  padding: 0;
  background: linear-gradient(135deg, #5f9a76, #35683f);
  border: none;
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
  font-weight: 700;
  line-height: 32px;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
  border-radius: 7px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: transform .12s ease, box-shadow .12s ease;
}
.report-page-viewer .translate-btn:hover { transform: scale(1.05); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); }
.report-page-viewer .translate-btn:active { transform: scale(0.96); }
/* active：已开启翻译（显示中文），同款深绿渐变，亮度一致，仅文案「中」区分 */
.report-page-viewer .translate-btn.active {
  background: linear-gradient(135deg, #5f9a76, #35683f);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
/* 语音播报开关按钮：位于翻译按钮正下方（right 对齐，top 让位 + 间距）。
   静/声两态字号统一 16px（避免切换时字号跳动）；
   「声」（active）样式与翻译按钮完全一致（绿渐变/白字）；
   「静」（默认）为灰底半透明，视觉上与关闭状态区分 */
.report-page-viewer .tts-btn {
  position: absolute;
  right: 0;
  top: 40px;
  width: 32px; height: 32px;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.10);
  border: none;
  color: rgba(232, 240, 232, 0.7);
  cursor: pointer;
  box-sizing: border-box;
  border-radius: 7px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.report-page-viewer .tts-btn svg { display: block; }
.report-page-viewer .tts-btn:hover { transform: scale(1.05); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); }
.report-page-viewer .tts-btn:active { transform: scale(0.96); }
/* active：语音播报已开启（「声」），样式与翻译按钮一致（深绿渐变） */
.report-page-viewer .tts-btn.active {
  background: linear-gradient(135deg, #5f9a76, #35683f);
  border: none;
  color: rgba(255, 255, 255, 0.82);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
/* hsb（高校野球）无主客标签：比分不再为标签占位，与校名垂直居中对齐 */
body.is-hsb .challenge-score-val { margin-top: 0; }
/* 「比赛速报」信息标签：描边式（透明底+细边+浅绿字），与实心渐变翻译按钮区分 */
.report-tag {
  background: transparent;
  color: #69f0ae;
  box-shadow: none;
  border: 1px solid rgba(240, 168, 96, 0.45);
  /* 位移统一继承基础 .live-tag（top:-5px）。原此处为 -4px 且注释写「上移 8px」，
     与实际值不符且与其他页面不一致，故删除，由基础类统一控制。 */
}
/* 重播：「速报重播」橙色描边，与大厅 report-badge.replay 同色 */
.report-tag.replay {
  color: #ffa94d;
  border-color: rgba(255, 169, 77, 0.5);
}
/* 速报弹幕日志区：固定 3 行高度，超出可滚动 */
.report-page-viewer .log {
  margin-top: 12px;
  height: 3.6em;               /* 约 3 行 */
  line-height: 1.2em;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* 当前投手 / 打者对决条 */
.report-mb {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 0 0 12px; padding: 9px 12px;
  border: 1px solid rgba(105, 240, 174, 0.4); border-radius: 11px;
  background: linear-gradient(135deg, rgba(58, 154, 106, 0.14), rgba(105, 240, 174, 0.1));
}
.report-mb .mb-tag {
  font-size: 11px; font-weight: 700; color: #69f0ae; margin-right: 6px;
}
.report-mb .mb-pitcher, .report-mb .mb-batter { font-size: 14px; font-weight: 800; color: #fff; }
.report-mb .mb-vs { font-size: 11px; color: #69f0ae; font-weight: 700; letter-spacing: 1px; }

/* 先发名单（折叠面板） */
.report-lineup-toggle {
  display: block; width: 100%; margin: 2px 0 6px; padding: 8px;
  border: 1px dashed rgba(255, 255, 255, 0.18); border-radius: 9px;
  background: rgba(255, 255, 255, 0.04); color: #e8f0e8;
  font-size: 13px; font-weight: 600; cursor: pointer; text-align: center;
}
.report-lineup-toggle:hover { background: rgba(255, 255, 255, 0.08); }
.report-lineup {
  display: flex; gap: 10px; margin: 0 0 8px;
}
.report-lineup[hidden] { display: none; }
.report-lineup .rl-col {
  flex: 1; padding: 9px 10px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}
.report-lineup .rl-team {
  font-size: 12px; font-weight: 800; color: #69f0ae; margin-bottom: 2px;
}
.report-lineup .rl-col.rl-home .rl-team { color: #69f0ae; }
.report-lineup .rl-desc {
  font-size: 11px; color: #9db8a8; line-height: 1.5; margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 5px;
}
.report-lineup .rl-row {
  display: flex; align-items: center; gap: 7px; font-size: 12px; line-height: 1.9;
}
.report-lineup .rl-order {
  flex: 0 0 16px; text-align: center; color: #8aa08f; font-weight: 700;
}
.report-lineup .rl-pos {
  flex: 0 0 26px; text-align: center; color: #69f0ae; font-weight: 700;
}
.report-lineup .rl-name { flex: 1; color: #e8f0e8; }

/* 比赛信息浮层（ch-modal 内） */
.report-info { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.report-info .ri-row { display: flex; gap: 8px; font-size: 13px; line-height: 1.6; }
.report-info .ri-k { flex: 0 0 60px; color: #8aa08f; font-weight: 700; }
.report-info .ri-v { flex: 1; color: #e8f0e8; word-break: break-all; }

/* ---------- 创建直播浮层（自定义局面） ---------- */
.live-setup-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 14, 24, 0.62);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  padding: 20px;
  box-sizing: border-box;
}
.live-setup-overlay.show { opacity: 1; pointer-events: auto; }
.live-setup-card {
  width: 100%;
  max-width: 400px;
  max-height: 92vh;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 24px 22px;
  background: linear-gradient(160deg, rgba(20, 40, 28, 0.97), rgba(10, 22, 14, 0.97));
  border: 1px solid rgba(127, 200, 160, 0.32);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  color: #e8f0e8;
  transform: translateY(12px) scale(0.98);
  transition: transform .2s ease;
}
.live-setup-overlay.show .live-setup-card { transform: translateY(0) scale(1); }
.live-setup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.live-setup-head h2 { margin: 0; font-size: 19px; color: #fff; }
.live-setup-close {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent; /* 无底色 */
  border: none;
  color: #a8c4ae;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.live-setup-close:hover { color: #fff; }
.live-setup-sub { margin: 0 0 14px; font-size: 12px; color: #a8c4ae; }
.live-setup-label {
  display: block;
  margin: 12px 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: #cfe0d2;
}
/* 创建浮层：开启直播开关（滑动式） */
.live-switch-row { margin: 0 0 4px; }
.live-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.live-switch input { display: none; }
.live-switch-slider {
  width: 40px; height: 22px;
  border-radius: 11px;
  background: #39464a;
  position: relative;
  flex-shrink: 0;
  transition: background .2s;
}
.live-switch-slider::after {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #cfdde0;
  transition: transform .2s;
}
.live-switch input:checked + .live-switch-slider { background: #2e7d5b; }
.live-switch input:checked + .live-switch-slider::after { transform: translateX(18px); }
.live-switch-text { font-size: 12px; color: #8aa08f; }
/* 滑动选择：横向滚动 chips，支持手指滑动 + scroll-snap 定位 */
.team-picker {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding: 4px 2px 8px;
}
.team-chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  padding: 8px 14px;
  border-radius: 20px;
  border: 1px solid rgba(127, 200, 160, 0.25);
  background: rgba(30, 60, 42, 0.55);
  color: #cfe0d2;
  font-size: 14px;
  cursor: pointer;
  transition: all .14s ease;
  white-space: nowrap;
}
.team-chip:hover { border-color: rgba(127, 200, 160, 0.55); }
.team-chip.selected {
  background: linear-gradient(135deg, #3fae63, #2a7a45);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 2px 10px rgba(47, 122, 69, 0.5);
}
.team-picker-empty { font-size: 12px; color: #8aa08f; padding: 6px 0; }
.bases-pick, .outs-pick {
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: 14px;
  color: #dbe8dc;
}
.bases-pick label, .outs-pick label {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.bases-pick input, .outs-pick input { accent-color: #3fae63; width: 16px; height: 16px; }
.live-setup-scores { display: flex; gap: 12px; }
.live-setup-score { flex: 1; }
.live-setup-score input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 15px;
  outline: none;
}
.live-setup-score input:focus { border-color: #5a9a78; box-shadow: 0 0 0 3px rgba(90, 154, 120, 0.25); }
.live-setup-match {
  margin-top: 16px;
  padding: 12px;
  text-align: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(127, 200, 160, 0.35);
  font-size: 16px;
  font-weight: 800;
  color: #9fc9ab;
}
.live-setup-match.ready { color: #fff; border-style: solid; border-color: rgba(127, 200, 160, 0.6); }
.live-setup-msg {
  min-height: 18px;
  margin-top: 8px;
  font-size: 12px;
  color: #8aa08f;
  text-align: center;
}
.live-setup-msg.err { color: #ff9d9d; }
.live-setup-actions {
  display: flex;
  gap: 12px;
  margin-top: 10px;
}
.live-setup-btn {
  flex: 1;
  padding: 12px 0;
  border-radius: 12px;
  border: none;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
}
.live-setup-btn:active { transform: scale(0.97); }
.live-setup-btn.cancel {
  background: rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  border: none;
}
.live-setup-btn.cancel:hover { background: rgba(255, 255, 255, 0.16); }
.live-setup-btn.create {
  background: linear-gradient(135deg, #3a9a6a, #1e5c40);
  color: #fff;
  box-shadow: none;
}
.live-setup-btn.create:hover { filter: brightness(1.08); }

/* ---------- 创建/加入对战浮层：黄黑色系（大厅创建页 + 房间加入页共用，不影响直播浮层） ---------- */
body.duel-page-lobby .live-setup-card,
.duel-join-theme .live-setup-card {
  background: linear-gradient(160deg, rgba(30, 26, 10, 0.97), rgba(16, 13, 4, 0.97));
  border-color: rgba(240, 216, 96, 0.32);
  color: #f3ead6;
}
body.duel-page-lobby .live-setup-head h2,
.duel-join-theme .live-setup-head h2 { color: #f0d860; }
body.duel-page-lobby .live-setup-sub,
body.duel-page-lobby .live-setup-close,
.duel-join-theme .live-setup-sub,
.duel-join-theme .live-setup-close { color: #cbbd8d; }
/* 创建对战：延长赛规则说明（金色小字，略醒目） */
.duel-extra-note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #e8c878;
}
body.duel-page-lobby .live-setup-close:hover,
.duel-join-theme .live-setup-close:hover { color: #f0d860; }
body.duel-page-lobby .live-setup-label,
.duel-join-theme .live-setup-label { color: #e8d9a8; }
body.duel-page-lobby .live-setup-btn.create,
.duel-join-theme .live-setup-btn.create {
  background: linear-gradient(135deg, #ffd23f, #f0a500); color: #fff;
  box-shadow: 0 4px 14px rgba(240, 168, 0, 0.35);
}
/* ---------- 预设局数：滑动选择 ---------- */
.duel-innings-pick {
  display: flex; align-items: center; gap: 12px;
  padding: 4px 0;
}
.duel-innings-slider {
  -webkit-appearance: none; appearance: none;
  flex: 1; min-width: 0;
  height: 6px; border-radius: 3px; outline: none;
  background: rgba(255, 255, 255, 0.18); cursor: pointer; margin: 0;
}
.duel-innings-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, #ffd23f, #f0a500);
  border: 2px solid #1c1808;
  box-shadow: 0 2px 6px rgba(240, 168, 0, 0.5);
}
.duel-innings-slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, #ffd23f, #f0a500);
  border: 2px solid #1c1808;
  box-shadow: 0 2px 6px rgba(240, 168, 0, 0.5);
}
.duel-innings-slider::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.18); }
.duel-innings-val {
  flex: 0 0 auto; min-width: 52px; text-align: center;
  font-size: 15px; font-weight: 800; color: #f0d860;
}
/* 局制固定 9 局：禁用的滑动条置灰，弱化交互感 */
.duel-innings-slider:disabled {
  cursor: default; opacity: 0.4;
}
.duel-innings-slider:disabled::-webkit-slider-thumb {
  background: #8a8a8a; box-shadow: none;
}
.duel-innings-slider:disabled::-moz-range-thumb {
  background: #8a8a8a; box-shadow: none;
}

/* ---------- 创建直播浮层：随机队伍（我方/对方分开） ---------- */
.team-rand-row {
  display: flex;
  gap: 10px;
}
.team-rand-side {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.team-rand-btn {
  width: 100%;
  padding: 10px 0;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #3a9a6a, #1e5c40);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: none;
  transition: transform .12s ease, filter .12s ease;
}
.team-rand-btn:hover { filter: brightness(1.08); }
.team-rand-btn:active { transform: scale(0.96); }
/* 对手名在左、随机按钮在右的横排 */
.team-rand-row-inline {
  display: flex;
  gap: 8px;
  align-items: center;
}
.team-rand-row-inline .team-rand-name {
  flex: 1;
  min-width: 0;
}
.team-rand-row-inline .team-rand-btn {
  width: auto;
  flex: none;
  padding: 10px 14px;
}
/* 对方随机：红色系，与「我方」绿色区分，呼应直播页状态红 #ff5252 */
#teamRandOppBtn,
#chTeamRandOppBtn {
  background: linear-gradient(135deg, #ff6b6b, #c0392b);
  box-shadow: 0 4px 14px rgba(192, 57, 43, 0.45);
}
#teamRandOppName.ready,
#chTeamRandOppName.ready { color: #ffd9d9; border-style: solid; border-color: rgba(255, 107, 107, 0.6); }
.team-rand-name {
  padding: 10px 8px;
  text-align: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(127, 200, 160, 0.35);
  font-size: 14px;
  font-weight: 700;
  color: #9fc9ab;
  word-break: break-all;
}
.team-rand-name.ready { color: #fff; border-style: solid; border-color: rgba(127, 200, 160, 0.6); }
.team-rand-tag { font-size: 12px; color: #8aa08f; }
.team-rand-empty {
  margin-top: 8px;
  padding: 10px;
  text-align: center;
  font-size: 12px;
  color: #ff9d9d;
  border-radius: 10px;
  background: rgba(255, 157, 157, 0.08);
  border: 1px solid rgba(255, 157, 157, 0.25);
}

/* ============================================================================
   模式色系统一：对战=黄 / 挑战=红 / 观众=绿
   顶部信息条（覆层）按钮 + 相关页面按钮统一各自主色系
   ============================================================================ */

/* 对战模式顶部覆层（duel-room）：退出按钮改黄底白字，与黄色「分享对战」统一 */
body.live-page-duel .live-btn-exit {
  background: linear-gradient(135deg, #ffd23f, #f0a500);
  color: #fff;
}
body.live-page-duel .live-btn-exit:hover { filter: brightness(1.08); }

/* 对战模式说明浮层（duel-room「对战说明」ch-modal）：由通用墨绿改为黄黑，
   与「加入对战」浮层（.duel-join-theme）配色统一 */
body.live-page-duel .ch-card {
  background: linear-gradient(160deg, rgba(30, 26, 10, 0.97), rgba(16, 13, 4, 0.97));
  border-color: rgba(240, 216, 96, 0.32);
  color: #f3ead6;
}
body.live-page-duel .ch-card h2 { color: #f0d860; }
body.live-page-duel .ch-card p { color: #e8d9a8; }
body.live-page-duel .ch-close { color: #cbbd8d; }
body.live-page-duel .ch-close:hover { color: #f0d860; }
body.live-page-duel .challenge-stats {
  color: #d9c87e;
  border-top-color: rgba(240, 216, 96, 0.2);
}
body.live-page-duel .challenge-meta,
body.live-page-duel .ch-desc-end { color: #cbbd8d; }
body.live-page-duel .challenge-status.done { color: #ffd23f; }
body.live-page-duel .challenge-status.todo { color: #f0d860; }
/* 对战说明信息表（参考锦标赛 match-info-body 的 mi-* 结构，配色适配黄黑主题） */
body.live-page-duel .ch-card .mi-section-title {
  font-weight: 700; font-size: 19px; text-align: center; margin: 2px 0 6px; color: #f0d860;
}
body.live-page-duel .ch-card .mi-desc {
  margin: 0 0 4px; color: #e8d9a8; font-size: 16px; font-weight: 700;
  line-height: 1.7; white-space: pre-wrap; text-align: center;
}
body.live-page-duel .ch-card .mi-hr {
  border: none; border-top: 1px solid rgba(240, 216, 96, 0.2); margin: 12px 0;
}
body.live-page-duel .ch-card .mi-line { display: flex; align-items: baseline; margin: 8px 0; }
body.live-page-duel .ch-card .mi-label {
  flex: 0 0 6.5em; text-align: right; padding-right: 12px;
  color: #cbbd8d; font-size: 13px; white-space: nowrap;
}
body.live-page-duel .ch-card .mi-value {
  flex: 1; font-weight: 600; color: #f3ead6; font-size: 13px; word-break: break-word;
}

/* 挑战模式顶部覆层（solo-room 直播挑战）：「分享直播间」保持红系（与蓝底「关闭房间」形成区分） */
body.live-page-host .live-copy {
  background: rgba(229, 72, 77, 0.16);
  color: #ff8a8a;
}
body.live-page-host .live-copy:hover { background: rgba(229, 72, 77, 0.32); color: #fff; }

/* 观众直播间顶部覆层（live-viewer）：「退出观看」由红改绿、「分享直播间」由黄改绿，统一绿色系 */
body.live-page-viewer .live-btn-exit {
  background: linear-gradient(135deg, #2e7d32, #1e5c40);
  color: #fff;
}
body.live-page-viewer .live-copy {
  background: rgba(105, 240, 174, 0.16);
  color: #69f0ae;
}
body.live-page-viewer .live-copy:hover { background: rgba(105, 240, 174, 0.32); color: #fff; }